Qué hay en el ZIP
What's in the ZIP
- 💬deal-chatfunnel-esp.txt El flujo del chat en español, listo para pegar. The chat flow in Spanish, ready to paste.
- 💬deal-chatfunnel-eng.txt El mismo flujo en inglés. The same flow in English.
- 🖼️Imágenes 16:916:9 images Piezas de la campaña: descuentos, 2x1, envío gratis y más. Campaign artwork: discounts, 2-for-1, free shipping and more.
- 🎨3 temas CSS3 CSS themes Sutil, Monstruitos y Futurista para el botón y la ventana de chat. Subtle, Monsters and Futuristic for the button and chat window.
Antes de empezar: el flujo funciona con Joinchat Premium, porque usa Chat Funnels. Los temas CSS funcionan en cualquier Joinchat.
Before you start: the flow needs Joinchat Premium, because it uses Chat Funnels. The CSS themes work with any Joinchat.
Paso a paso
Step by step
Sube las imágenes a tu web
Upload the images to your site
- En WordPress ve a Medios › Añadir archivo multimedia y sube las imágenes que quieras usar.
- Haz clic en cada imagen y fíjate en la barra de direcciones: el número que aparece tras
item=(opost=) es su ID. Apúntalo.
Por defecto el flujo usa dos imágenes: una de bienvenida y otra junto al cupón. Puedes cambiarlas por cualquiera de la colección.
- In WordPress go to Media › Add New Media File and upload the images you want to use.
- Click each image and check the address bar: the number after
item=(orpost=) is its ID. Write it down.
By default the flow uses two images: a welcome one and one next to the coupon. You can swap them for any image in the collection.
Importa el flujo
Import the flow
- Ve a Joinchat › Chat Funnels › Añadir nuevo Chat Funnel y ponle un nombre, por ejemplo Black Friday.
- En el editor pulsa la pestaña Texto (arriba a la derecha, junto a Visual).
- Abre
deal-chatfunnel-esp.txt(o el-eng) con un editor de texto, copia todo el contenido y pégalo. - Vuelve a la pestaña Visual: verás los pasos del flujo uno debajo de otro.
- Pulsa Publicar.
Copia el archivo entero sin tocar los espacios del principio de cada línea. Si falta una parte o se descuadra un sangrado, el editor no podrá leer el flujo.
- Go to Joinchat › Chat Funnels › Add New Chat Funnel and give it a name, for example Black Friday.
- In the editor click the Text tab (top right, next to Visual).
- Open
deal-chatfunnel-eng.txt(or the-espone) in a text editor, copy all of it and paste it. - Switch back to the Visual tab: you will see the flow steps one under another.
- Click Publish.
Copy the whole file and leave the spaces at the start of each line as they are. If a part is missing or the indentation shifts, the editor won't be able to read the flow.
Adáptalo a tu tienda
Make it yours
Puedes editar cada paso en la vista Visual o directamente en Texto. Esto es lo que conviene revisar:
You can edit each step in the Visual view or directly in Text. This is what you should review:
| Busca | Qué hacer |
|---|---|
{IMG 65275 380}{IMG 65270 380} | Imprescindible: cambia el número por el ID de tu imagen del paso 1. Esos números son de nuestra web; en la tuya mostrarían otra imagen o nada. El 380 es el ancho en píxeles. |
BF26-EXTRA10 | Pon tu código de cupón real (aparece en el mensaje y en el WhatsApp que te llega). |
| 27 al 30 de noviembre | Ajusta las fechas de tu campaña y la validez del cupón. |
| Ofertas y categorías | Cambia los textos de los botones y las ofertas por las tuyas. |
| Envíos, devoluciones, pagos | Revisa las respuestas para que digan exactamente tus plazos y condiciones. |
{SITE} | No lo toques: se cambia solo por el nombre de tu web. |
| Look for | What to do |
|---|---|
{IMG 65275 380}{IMG 65270 380} | Must do: replace the number with your image ID from step 1. Those numbers belong to our site; on yours they would show a different image or nothing. The 380 is the width in pixels. |
BF26-EXTRA10 | Use your real coupon code (it shows in the chat and in the WhatsApp message you receive). |
| November 27–30 Valid through November 30, 2026 | Set your campaign dates and coupon expiry. |
| Deals and categories | Change the button labels and deals to your own. |
| Shipping, returns, payments | Check that the answers match your real times and policies. |
{SITE} | Leave it as is: it is replaced with your site name automatically. |
En la columna derecha del editor tienes la Ayuda de mensajes con todos los formatos: negrita, enlaces, botones, imágenes y textos aleatorios.
The editor's right column has the message help box with every format: bold, links, buttons, images and random texts.
Muéstralo en el chat
Show it in the chat
- En Joinchat › Chat Funnels, copia la variable dinámica de tu flujo. Tiene esta forma:
{CHAT 12345}. - Ve a Joinchat › Ajustes › General y pégala en Llamada a la acción, sustituyendo lo que haya.
- Guarda los cambios.
Cuando termine el Black Friday, vuelve a poner tu llamada a la acción de siempre.
- In Joinchat › Chat Funnels, copy your flow's dynamic variable. It looks like this:
{CHAT 12345}. - Go to Joinchat › Settings › General and paste it into Call to Action, replacing what's there.
- Save changes.
Once Black Friday is over, put your usual call to action back.
Dale un look de Black Friday (opcional)
Give it a Black Friday look (optional)
- Elige uno de los tres temas de abajo y pulsa Copiar CSS (o abre su archivo
.cssdel ZIP y copia todo). - Ve a Joinchat › Ajustes › Avanzado y pégalo en CSS personalizado.
- Guarda los cambios.
Usa solo un tema a la vez. Para volver al diseño normal, borra el CSS del campo. Si tu versión de Joinchat no tiene ese campo, pégalo en Apariencia › Personalizar › CSS adicional.
- Pick one of the three themes below and click Copy CSS (or open its
.cssfile from the ZIP and copy it all). - Go to Joinchat › Settings › Advanced and paste it into Custom CSS.
- Save changes.
Use only one theme at a time. To go back to the normal design, delete the CSS from the field. If your Joinchat version doesn't have that field, paste it in Appearance › Customize › Additional CSS.
1 · Sutil
1 · Subtle
Negro y dorado, cabecera negra con línea dorada y una trama suave de iconos de compra. Elegante y discreto.
Black and gold, black header with a gold line and a soft pattern of shopping icons. Elegant and low-key.
2 · Monstruitos
2 · Monsters
Amarillo, morado, azul y coral con contornos de cómic, sombras 3D y fuente redondeada. Divertido y muy visible.
Yellow, purple, blue and coral with comic outlines, 3D shadows and a rounded font. Fun and eye-catching.
3 · Futurista
3 · Futuristic
Negro brillante, verde neón y cristal esmerilado con desenfoque. Moderno y tecnológico.
Glossy black, neon green and frosted glass with blur. Modern and techy.
Pruébalo como un cliente
Test it like a customer
Abre tu web en una ventana de incógnito y en el móvil, recorre todas las opciones del chat y comprueba que el mensaje llega bien a tu WhatsApp. Si usas un plugin de caché, vacía la caché antes de probar.
Open your site in an incognito window and on your phone, go through every chat option and check that the message reaches your WhatsApp correctly. If you use a caching plugin, clear the cache before testing.
Si algo no sale bien
Troubleshooting
Al pegar el flujo no aparecen los pasos
Asegúrate de haberlo pegado en la pestaña Texto y de haber copiado el archivo completo, desde la primera línea - step: 0 hasta el final, sin cambiar los espacios.
Las imágenes no se ven en el chat
Revisa que el número dentro de {IMG ...} sea el ID de una imagen que existe en tu biblioteca de medios.
El tema no se aplica
Vacía la caché de tu web y del navegador. Comprueba también que solo haya un tema pegado y que no lo hayas copiado a medias.
La fuente del tema no es la de la vista previa
Los temas 2 y 3 cargan su fuente desde Google Fonts. Si tu web bloquea fuentes externas, se usará una fuente del sistema y el resto del tema funcionará igual.
The steps don't show up after pasting the flow
Make sure you pasted it in the Text tab and copied the whole file, from the first line - step: 0 to the end, without changing the spaces.
Images don't show in the chat
Check that the number inside {IMG ...} is the ID of an image that exists in your media library.
The theme isn't applied
Clear your site and browser cache. Also check that only one theme is pasted and that you copied it completely.
The theme font doesn't match the preview
Themes 2 and 3 load their font from Google Fonts. If your site blocks external fonts, a system font is used and the rest of the theme works the same.