Manual de Usuario

Guía completa para usar TextOnFlow — el editor de imágenes personalizadas para ManyChat y WhatsApp. Actualizado 2026-04-09.

¿Qué es TextOnFlow?

TextOnFlow es una herramienta visual de arrastrar-y-soltar para crear imágenes personalizadas con texto, stickers, marcos, contadores regresivos y códigos QR. Diseñado para integrarse con ManyChat y WhatsApp, permite que cada usuario reciba una imagen única con su nombre, ciudad o cualquier dato de sus custom fields.

También incluye un generador de imágenes con IA (Gemini 2.5) para crear la imagen base sin necesitar un diseñador.

Paso 1 — Cargar tu imagen base

Tienes tres formas de obtener la imagen base. Elige la que mejor se adapte a tu flujo:

Pegar un link: Copia la URL de tu imagen y pégala en el campo de texto. Funciona con links directos (.jpg, .png, .webp). Presiona Cargar para confirmar.

Subir desde tu PC: Haz clic en ↑ Subir para seleccionar un archivo directamente desde tu computadora.

Generar con IA: Describe la imagen que quieres y Gemini la genera en segundos. Ve a la sección Paso 1B — Generación con IA más abajo para el flujo completo.

Ilustración — Panel de carga de imagen

Sustituir Imagen

https://…/mi-imagen.jpg

Filtro: Sin filtro

Guías

1024 × 1024 px

Una vez cargada la imagen, el título cambia de "Cargar Imagen" a "Sustituir Imagen" para dejar claro que el siguiente clic reemplazará la base actual.

Paso 1B — Generación de imagen con IA IA

TextOnFlow incluye un generador de imágenes impulsado por Gemini 2.5 Flash. Puedes crear la imagen base sin necesitar un diseñador ni acceso a un banco de imágenes.

En la pantalla de inicio haz clic en el botón Crear con IA. Se abre el panel de generación.

Escribe un prompt descriptivo en español o inglés, elige el aspecto de imagen (cuadrada, horizontal, vertical, Story…) y selecciona un estilo visual (Cinematográfico, Boceto, Acuarela, Steampunk, etc.).

Haz clic en Generar imagen. El proceso tarda entre 15 y 40 segundos. Verás el progreso animado mientras esperas.

Cuando la imagen esté lista puedes Usar esta imagen (carga en el canvas), Volver a intentar (nueva generación con el mismo prompt) o Editar prompt para ajustarlo.

Ilustración — Panel IA (selección de aspecto y estilo)

ASPECTO DE IMAGEN

1:1
Cuadrada

16:9
Horizontal

9:16
Story

4:5
Portrait

ESTILO VISUAL

Cinematográfico

Boceto

Steampunk

Acuarela

Risografía

Monocromo

Una ciudad futurista al amanecer, colores cálidos…

Usa el botón Mejorar prompt (varita mágica) para que la IA expanda tu descripción automáticamente antes de generar — suele producir resultados más detallados.

La generación con IA está sujeta a límites de uso diario según tu plan. El contador se muestra en la barra de progreso debajo del botón de generación.

Paso 2 — Agregar textos personalizados

Con la imagen en el canvas, usa el panel derecho para añadir capas de texto.

Haz clic en el botón ＋ dentro del acordeón Textos.
Escribe el contenido. Usa {{nombre}}, {{ciudad}} o cualquier variable de ManyChat.
Ajusta tamaño, fuente, color y posición arrastrando el texto directamente sobre el canvas.
Activa la sombra o el fondo del texto si necesitas mayor legibilidad.
Doble clic sobre un texto en el canvas: lo centra horizontal y verticalmente. Shift + doble clic: centra solo horizontalmente.

Ilustración — Acordeón de textos con variable ManyChat

Textos 2

▾

Texto

¡Hola, {{nombre}}!

Fuente

Impact

72 px

Color

#ffffff

Las variables entre dobles llaves {{variable}} son reemplazadas automáticamente por ManyChat con los datos reales de cada contacto. Puedes usar cualquier custom field de tu cuenta.

Paso 3 — Stickers y Marcos

En Stickers añade imágenes o íconos sobre el canvas. Puedes subir cualquier PNG con fondo transparente.
Doble clic sobre un sticker en el canvas: lo centra horizontal y verticalmente. Shift + doble clic: centra solo horizontalmente.
En Marcos agrega rectángulos con color, borde y opacidad personalizables para enmarcar zonas de la imagen.
Mueve y redimensiona cada elemento arrastrando sus esquinas sobre el canvas.
Clic derecho sobre cualquier elemento para agrupar, desagrupar, duplicar o eliminar.

Ilustración — Acordeones del panel (Stickers y Marcos)

Stickers 1

▾

Marcos 0

▾

Paso 4 — Contador regresivo

En el acordeón Contador agrega un temporizador visible en la imagen:

Contador de Evento: todos los usuarios ven la misma cuenta regresiva hacia una fecha fija.
Contador de Urgencia: cada usuario tiene su propio contador personal que empieza al recibir el mensaje.

Ilustración — Acordeón contador

Contador 1

▾

Tipo

Evento

Urgencia

Fecha

2026-12-31 23:59

Paso 5 — Código QR

En el acordeón Código QR puedes agregar un código QR personalizado directamente sobre la imagen.

Escribe la URL o texto que codificará el QR.
Presiona Agregar QR al canvas para colocarlo centrado en la imagen.
Ajusta el color de los módulos, el fondo, el color del marco y el padding — el QR se actualiza automáticamente en el canvas sin crear uno nuevo.
Redimensiona el QR arrastrando sus esquinas en el canvas.

Los cambios de color y padding actualizan el QR existente en tiempo real — sin crear duplicados. Si cambias la URL y presionas "Agregar QR", se crea un QR nuevo adicional.

Paso 6 — Guías de alineación

Activa el checkbox de Guías en la barra superior del panel para mostrar líneas de centrado sobre el canvas. Son solo visuales — no aparecen en la imagen final.

Ilustración — Guías de alineación activas

Guías

Las líneas verdes marcan el centro horizontal y vertical del canvas.

Paso 7 — Filtros y fondo

Usa el selector de Filtro para aplicar efectos al canvas: brillo, contraste, escala de grises, sepia y más de 15 filtros estilo Instagram. El color de fondo del área de trabajo (gris, blanco o negro) es solo visual y no afecta la imagen final que se envía a ManyChat.

Paso 8 — JSON para ManyChat

El panel derecho tiene una sección JSON para ManyChat al final. Este JSON conecta TextOnFlow con tu bot.

El JSON se actualiza automáticamente cada vez que modificas el diseño.
Cópialo con el botón Copiar y pégalo en el bloque "Dynamic Image URL" de ManyChat.
Cada vez que modifiques posición, fuente o tamaño, debes volver a copiar y reemplazar el JSON en tu bot.

Ilustración — JSON generado en el panel derecho

"url": "https://www.textonflow.com/generate-multi",
"texts": [
  {
    "content": "Hola {{nombre}}",
    "font_size": 72,
    "x": 512, "y": 200
  }
]

⚠ Cada vez que cambies algo (tamaño, posición, fuente…) debes copiar el JSON actualizado y reemplazarlo en tu bot de ManyChat para que los cambios tengan efecto.

Paso 9 — Visualizar y exportar ACTUALIZADO

Cuando tu diseño esté listo, haz clic en el botón flotante ▶ Visualizar imagen que aparece debajo del canvas. El servidor procesa la imagen con Pillow en alta resolución (2× supersampling) y abre el modal de resultado.

Ilustración — Botón flotante y estado de generación

Generando imagen personalizada… aguarda un momento

↑ El mensaje de estado aparece justo debajo del botón mientras procesa.

En el modal de resultado encontrarás:

Descargar — descarga la imagen al equipo como archivo JPG.
Drive — sube directamente a tu Google Drive (requiere conexión previa).
Copiar URL — copia el link directo de la imagen.
Compartir (morado) — abre el selector nativo de apps del dispositivo para compartir la imagen como archivo (mobile). En desktop descarga la imagen automáticamente.
Facebook / Telegram (íconos) — comparte la URL pública en redes sociales.
WhatsApp (ícono verde) — en mobile comparte la imagen como foto; en desktop descarga la imagen y abre WhatsApp Web para que la adjuntes.
Copiar JSON — copia el payload listo para pegar en ManyChat Dynamic Image.

Paso 10 — Google Drive ACTUALIZADO

TextOnFlow puede guardar tus imágenes directamente en tu Google Drive, en una carpeta llamada TextOnFlow. La integración funciona 100% en el navegador — sin pasar por nuestros servidores.

El panel de Google Drive está en el panel derecho, justo arriba de la sección JSON. También puedes guardar directamente desde el modal de resultado con el botón "Drive".

Ilustración — Panel Drive en el panel derecho (encima del JSON)

Google Drive

📁 Carpeta: TextOnFlow

↑ LED verde = conectado. Debajo del Drive aparece la sección JSON.

Haz clic en Conectar en el panel Drive. Se abre la ventana de autorización de Google.

Selecciona tu cuenta y haz clic en "Permitir". TextOnFlow solo pide acceso a los archivos que él mismo crea (drive.file scope — acceso mínimo).

El LED cambia a verde y el botón dice "Desconectar". Ahora puedes guardar imágenes desde el modal de resultado con el botón Drive o directamente desde la IA con el botón Drive del modal AI.

La sesión se recuerda. Una vez autorizado, no necesitas volver a conectar. Solo se pide nuevamente si el token expira (~1 hora de inactividad).

Alcance mínimo: TextOnFlow solo puede ver y modificar los archivos que él mismo crea. No puede acceder a ningún otro archivo de tu Google Drive.

Distorsión de texto NUEVO

La sección Distorsión en el panel de texto aplica efectos de curvatura y sesgo al texto seleccionado. Está organizada en 3 columnas:

Columna 1 — Curvatura (Warp): elige entre 15 estilos de deformación: Arco, Arco inferior, Bandera, Pez, Ojo de pez, Inflar, Apretar, Ola, Aro, y más. Usa el botón ✕ para quitar el warp.
Columna 2 — Sesgo horizontal (X): inclina el texto hacia la izquierda o derecha. Slider entre −50 y 50. Botón de reset al centro.
Columna 3 — Sesgo vertical (Y): inclina el texto hacia arriba o abajo. Slider entre −50 y 50. Botón de reset al centro.

Ilustración — Sección Distorsión (3 columnas)

CURVATURA

Arco ▾

SESGO X

↺

SESGO Y

↺

La vista previa en el canvas refleja el warp exactamente como se verá en la imagen final. Puedes combinar curvatura + sesgo para efectos creativos.

Gotero (cuentagotas) NUEVO

El gotero permite seleccionar el color de texto directamente desde cualquier punto de la imagen base. Está disponible en el panel de texto junto al selector de color.

Haz clic en el ícono del cuentagotas (🔬) junto al color del texto.
El cursor cambia a una mira. Haz clic sobre cualquier pixel del canvas para tomar su color.
El color del texto se actualiza automáticamente al color tomado.

Ideal para hacer que el color del texto combine con los tonos de tu imagen de fondo — sin necesidad de copiar y pegar códigos hexadecimales.

Viñeta NUEVO

El efecto de viñeta oscurece los bordes del canvas para dar profundidad y enfocar la atención al centro. Se configura en el acordeón Viñeta del panel derecho.

Intensidad: controla qué tan oscuros son los bordes (0 = sin viñeta, 100 = bordes negros).
Radio: qué tan grande es el área central sin oscurecer.
La viñeta se renderiza en la imagen final (sí aparece al generar).

🔗 API de Render Dinámico NUEVO

La API de Render Dinámico te permite generar imágenes personalizadas para cada contacto en tiempo real, sin descargar nada manualmente. ManyChat llama una URL con los datos del contacto y TextOnFlow devuelve la imagen lista al instante.

Caso de uso ideal: campañas de WhatsApp donde cada persona ve su nombre, su ciudad, su descuento personalizado o cualquier dato de sus Custom Fields.

Flujo completo — Imagen personalizada por contacto

💬

ManyChat
envía mensaje

→

🔗

URL con variables
del contacto

→

⚡

TextOnFlow
renderiza <1 seg

→

🖼️

Imagen JPEG
personalizada

→

📱

WhatsApp
la muestra

Variables en tus textos

En cualquier capa de texto, usa llaves simples: {nombre} {descuento} {ciudad}. TextOnFlow las detecta automáticamente.

Descarga una vez

Genera o descarga tu diseño al menos una vez para que la imagen quede registrada en el servidor. Solo necesitas hacer esto una vez por plantilla.

Guarda como Template

Abre el panel 🔗 API de Render Dinámico al final del editor. Escribe un nombre y haz clic en Guardar Template API.

Pega en ManyChat

Copia la URL de render y pégala como Image URL en tu flujo de ManyChat. Agrega las variables de ManyChat como parámetros.

Ilustración — Panel API de Render Dinámico (en el editor)

🔗 API de Render Dinámico BETA ▼

Escribe variables en tus textos

{nombre} {descuento} {producto}

✓ Variables detectadas en tus textos: {nombre} · {descuento}

Guarda como Template

Black Friday ES — Promo

💾 Guardar Template API

Tu URL de Render

https://www.textonflow.com/render/a1b2c3d4 📋

Cómo usar la URL en ManyChat

En el bloque de imagen de ManyChat, selecciona URL dinámica y pega tu URL agregando las variables de ManyChat como parámetros:

https://www.textonflow.com/render/a1b2c3d4?nombre={{first name}}&descuento={{custom field: descuento}}

Cada parámetro en la URL corresponde a una variable {...} de tu diseño.
ManyChat sustituye {{first name}} por el nombre real del contacto antes de llamar la URL.
TextOnFlow renderiza la imagen en menos de 1 segundo y ManyChat la muestra directamente.
La imagen se cachea 30 segundos para no repetir renders idénticos.

Puedes usar la URL de render también en SMS, email o cualquier herramienta que acepte una URL de imagen dinámica — no es exclusiva de ManyChat.

⚡ Integraciones — Make, Zapier y Webhooks NUEVO

Además de la URL de render directa, TextOnFlow acepta webhooks POST desde cualquier herramienta de automatización. Esto permite que sistemas externos (CRM, Shopify, Google Sheets, HubSpot…) disparen la generación de imágenes sin que intervenga ManyChat.

Flujo Push — El sistema externo dispara la imagen

🛒

Shopify
nueva venta

→

⚙️

Make / Zapier
detecta evento

→

🔔

POST
/webhook/render

→

🖼️

TextOnFlow
genera imagen

→

📲

URL lista
para usar

Endpoint del Webhook

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

Envía un JSON con el ID del template y las variables del contacto:

{
  "template_id": "a1b2c3d4",
  "variables": {
    "nombre": "Juan García",
    "descuento": "30",
    "producto": "Curso Premium"
  }
}

TextOnFlow responde con JSON:

{
  "ok": true,
  "image_url": "https://www.textonflow.com/storage/wh_a1b2c3d4_Juan_ab12cd.jpg",
  "template_id": "a1b2c3d4",
  "variables_used": ["nombre", "descuento", "producto"]
}

La image_url es una URL pública que puedes usar directamente en ManyChat, Telegram, email o cualquier canal. La imagen se guarda y es accesible inmediatamente.

Configurar en Make.com (ex-Integromat)

⚙️

Make — Módulo HTTP

1. Agrega un módulo HTTP → Make a Request
2. URL: https://www.textonflow.com/webhook/render
3. Método: POST
4. Headers: Content-Type: application/json
5. Body: JSON con template_id y variables
6. Mapea los campos del módulo anterior a las variables

⚡

Zapier — Webhooks by Zapier

1. Action: Webhooks by Zapier → POST
2. URL: https://www.textonflow.com/webhook/render
3. Payload Type: JSON
4. Data: escribe template_id y dentro de variables los campos del trigger
5. Usa la image_url de la respuesta en pasos posteriores

Ilustración — Escenario en Make.com

🛒

Shopify
New Order

→

🔔

HTTP
POST Request

→

💬

ManyChat
Send Message

HTTP · Make a Request

URL

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

Método

POST

Body (JSON)

{
"template_id": "a1b2c3d4",
"variables": {
"nombre": {{1.customer.first_name}},
"producto": {{1.line_items[].title}}
}
}

El campo output_format acepta "url" (por defecto) o "base64". Usa base64 cuando necesitas incrustar la imagen directamente sin guardarla.

La imagen generada por el webhook se guarda en el servidor. No se elimina automáticamente — ideal para que ManyChat pueda acceder a ella en cualquier momento del flujo.

Casos de uso reales

🎂

Felicitación de cumpleaños

Google Sheets detecta cumpleaños del día → Make genera imagen con nombre y foto → ManyChat envía por WhatsApp.

🛒

Confirmación de pedido

Shopify registra nueva venta → Zapier llama el webhook → imagen con nombre + número de pedido → enviada al cliente.

🏆

Certificado de logro

CRM marca contacto como "completado" → Make genera certificado personalizado → enviado por WhatsApp o email.

🎟️

Ticket de evento

HubSpot confirma registro → imagen con nombre + fecha + QR personalizado → enviado automáticamente.

Extensión de Chrome

Instala la extensión de TextOnFlow para Chrome. Haz clic derecho en cualquier imagen del navegador y ábrela directamente en el editor sin tener que copiar y pegar links.

Atajos de teclado útiles

Doble clic sobre texto o sticker — centra en X e Y
Shift + Doble clic — centra solo en X (horizontal)
Flechas ↑↓←→ — mueve el elemento seleccionado 1 px
Shift + Flechas — mueve 10 px
Clic derecho sobre elemento — menú contextual (agrupar, duplicar, eliminar)
Shift + clic en canvas — selección múltiple