Tarjetas deslizables tipo carrousel
Apila varias tarjetas con media detrás de una sola cabecera para que el contacto pueda deslizar entre opciones. Cada tarjeta lleva su propia imagen o video y sus propios botones, dándote un mini-catálogo dentro de la conversación.
Resumen
El comando #Carousel arma un grupo de tarjetas deslizable horizontalmente. La
cabecera define una portada (imagen o video) y un título. Después de la cabecera, cada tarjeta
es un bloque #ButtonMix separado por exactamente cinco diagonales
(/////). Las tarjetas pueden mezclar botones de calificación, copiar código, llamada
y URL.
Carrousel está en BETA y no funciona en Android. Úsalo donde sepas que el contacto está en iOS, o usa una secuencia de mensajes con botones de imagen como respaldo.
Anatomía de un carrousel
- Una cabecera declarada con
#Carousel, seguida de separadores triple pipe|||, un título, un subtítulo y un media. - Una o más tarjetas, cada una un bloque
#ButtonMix. - Cinco diagonales (
/////) entre cada par de tarjetas después de la primera.
Ejemplo completo
Un carrousel de cuatro tarjetas con portada de video y cuatro tipos distintos:
#Carousel|||Título|||Subtítulo|||video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4||| #ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|button*Bueno*id_good/button*Malo*id_bad/button*Pésimo*id_terrible /////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|copy*Copiar código*000011 /////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|call*Llamar ahora*id_call /////#ButtonMix|Título|Subtítulo|video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4|url*Visitar web*https%3A%2F%2Fwww.google.com/url*Contactar*https%3A%2F%2Fwww.facebook.comTarjetas explicadas
Cabecera (portada del carrousel)
#Carousel|||Título|||Subtítulo|||video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4|||Tarjeta 1, botones de calificación
#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|button*Bueno*id_good/button*Malo*id_bad/button*Pésimo*id_terribleTarjeta 2, botón copiar código
/////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|copy*Copiar código*000011Tarjeta 3, botón de llamada
/////#ButtonMix|Título|Subtítulo|image*https://wisphub.io/static/img/wisp-bg-5.jpg|call*Llamar ahora*id_callTarjeta 4, botones de URL sobre video
/////#ButtonMix|Título|Subtítulo|video*https://wazzap-files.sfo3.cdn.digitaloceanspaces.com/0104bf58-22ea-4b66-9454-79ebe69cdf6d.mp4|url*Visitar web*https%3A%2F%2Fwww.google.com/url*Contactar*https%3A%2F%2Fwww.facebook.comResultado
- El contacto ve una sola burbuja con la portada, luego desliza horizontalmente por las cuatro tarjetas.
- Cada tarjeta se comporta según su tipo de botón:
- Botones de imagen: registra el ID tocado.
- Botón copiar código: copia el valor y muestra un toast.
- Botón de llamada: abre el marcador.
- Botón de URL: abre el link codificado.
- Tu CRM registra cada respuesta. En HighLevel el ID de respuesta llega a la conversación para que los workflows ramifiquen.
Notas importantes
- Carrousel está en BETA y no funciona en Android. Siempre prueba en el dispositivo objetivo antes de escalar.
- Las imágenes deben ser .jpg. Los videos .mp4. El tope de tamaño viene de tu CRM, normalmente 5 MB por archivo.
- Usa exactamente cinco diagonales
/////entre tarjetas después de la segunda. - Cada ID de botón debe ser único y estable en todo el carrousel, no solo dentro de una tarjeta.
- Mantén las etiquetas de botones cortas, el viewport del carrousel es angosto.
- Los botones de URL requieren links URL-encoded pegados como texto plano.
Solución de problemas
El carrousel solo muestra la primera tarjeta
El separador está mal. Las tarjetas después de la primera deben empezar con exactamente
cinco diagonales (/////). Cuatro o seis rompen el parser.
Los botones de URL abren un link roto
No codificaste la URL. Convierte https://...?q=hola mundo a
https%3A%2F%2F...%3Fq%3Dhola%20mundo antes de pegar.
Los carrousels también sirven para menús de respuesta: combínalos con disparadores de etiquetas para que la tarjeta elegida aplique automáticamente una etiqueta al contacto en tu CRM.