TextOnFlow - Configurador Visual

Cargando imagen…

sin cambios

100%

Filtro:

Ajustes imagen

☀ Brillo 100%

◑ Contraste 100%

🎨 Satur. 100%

Guías

Viñeta

▾

⠿

Textos 0

▾

⠿

Templates de bienvenida

▾

Carga textos pre-configurados listos para ManyChat. Requiere imagen cargada. Puedes editar cada texto después.

⠿

Stickers 0

▾

⠿

Brand Kit

▾

Colores

Fuentes favoritas

⠿

Logos clientes 0

▾

Guarda logos de tus clientes. Al subir un logo se extraen automáticamente los colores de su marca.

⠿

Marcos 0

▾

⠿

Contador 0

▾

⠿

Código QR 0

▾

URL o texto

Color QR

Fondo QR

Marco

Fondo transparente

Padding marco: 20px

⠿

Mapa Dinámico 0 NUEVO

▾

Coordenadas exactas del local. También acepta {{ciudad}} o dirección de texto.

Usar coordenadas de MYKOZ Copan
22.893601669944495, -109.90806963327955

Estilo

Zoom: 13 (barrio=15 · ciudad=12 · región=9)

Mostrar pin rojo en el centro

📏 Mostrar distancia del cliente dentro del mapa

Redactor IA IA

▾

Tono

Tu texto o idea

0 caracteres

Incluir sello textonflow.com

Listo para ManyChat

{
  "template_name": "tu-imagen.jpg",
  "texts": []
}

Cómo actualizar tu bot de ManyChat

Cada vez que cambies algo (tamaño, separación, posición…) debes Copiar el JSON actualizado y reemplazarlo en tu bot de ManyChat. Si no lo actualizas, ManyChat seguirá usando la versión anterior.

Manual de Integraciones — Zapier · Make · BoostSpace

Atajos de teclado

Navegación del canvas

Pellizco / Ctrl + RuedaZoom de la vista del canvas Espacio + ArrastreMover el área de dibujo (pan) Ctrl + ZDeshacer Ctrl + YRehacer

Textos — Selección

Shift + ClicAgregar texto a la selección Arrastrar en vacíoSelección múltiple por área Clic en imagen / mallaDeseleccionar todo

Textos — Movimiento

Doble clicCentrar en canvas (X e Y) Shift + Doble clicCentrar solo en X FlechasMover 1 px Shift + FlechasMover 10 px Supr / BackspaceEliminar capa seleccionada

Textos — Estilo

Clic derecho en textoCopiar / Pegar estilo entre capas

Stickers

Doble clicCentrar en canvas (X e Y) Shift + Doble clicCentrar solo en X Shift + ArrastreMover solo en eje dominante (X o Y) Clic derecho en pestañaCopiar / Pegar estilo entre stickers

Contador

Doble clic en cabeceraCentrar contador en canvas

🔗 API de Render Dinámico BETA ▼

¿Cómo funciona?

💬

ManyChat
llama la URL

→

⚡

TextOnFlow
renderiza en <1s

→

📱

WhatsApp
muestra la imagen

Cada contacto recibe su imagen personalizada · Sin descargas · Sin editor

Escribe variables en tus textos

Usa llaves simples en cualquier capa de texto:

{nombre} {descuento} {producto}

Guarda este diseño como Template

Copia la URL y pégala en ManyChat

— guarda el template primero —

ManyChat sustituye las variables automáticamente:
/render/id?nombre={{first name}}&descuento=30

⚡ Integraciones — Zapier · Make · BoostSpace ▼

Endpoint universal

POST https://www.textonflow.com/webhook/render

Cuerpo del request (JSON)

{
  "template_id": "TU_TEMPLATE_ID",
  "variables": {
    "nombre": "{{first name}}",
    "descuento": "30",
    "producto": "{{custom field}}"
  }
}

Obtén el template_id desde la sección API de Render Dinámico → guarda tu template → aparece en la URL.

Paso 1 — Trigger

Elige cualquier trigger: HubSpot, ActiveCampaign, Shopify, formulario, etc.

Paso 2 — Acción: "Webhooks by Zapier"

Busca Webhooks by Zapier → acción "POST"

                                        URL: https://www.textonflow.com/webhook/render

                                        Payload Type: json

                                        Data: template_id | TU_TEMPLATE_ID

                                        Data: variables.nombre | (campo del trigger)

Paso 3 — Usa la imagen generada

La respuesta incluye image_url. Úsala en el siguiente paso (enviar por WhatsApp, email, Slack, etc.)

📖 Ver manual completo con diagramas y blueprints ↗

Webhook de salida (render.done)

TextOnFlow puede notificar a tu sistema al terminar cada render. Configura tu URL de destino:

Payload recibido: {"{"}"event":"render.done","image_url":"...","template":"...","ts":"..."{"}"}

Sobre campos personalizados

Campos del sistema:
{{first_name}}, {{last_name}}, {{email}}, {{phone_number}}

Mis campos personalizados:
Haz clic en + Nuevo en el panel de texto para registrar tus campos de ManyChat.
El nombre debe ser EXACTO tal como aparece en ManyChat (mayúsculas, acentos, guiones)

Los campos se guardan en tu navegador. Si cambias de equipo, vuelve a agregarlos.

Política de Uso Aceptable

Listo para ManyChat

¿Tienes algo que decirnos?

¡Gracias por tu feedback!

Política de Uso Aceptable

Cargar Imagen

Listo para ManyChat

¿Tienes algo que decirnos?

¡Gracias por tu feedback!