Cómo enviar plantillas Carrusel a WhatsApp
Table of Contents
Síntoma / Necesidad
Deseo presentar múltiples opciones, productos o servicios de manera visual y atractiva a mis clientes en WhatsApp, permitiendo que naveguen entre ellos y realicen acciones específicas, todo dentro de una conversación automatizada. Las plantillas de texto simples o con una sola imagen no son suficientes para mi objetivo de mostrar un catálogo o una serie de ofertas.
Contexto / Escenarios
Las plantillas tipo Carrusel de WhatsApp son ideales para ofrecer una experiencia interactiva y visualmente rica a los usuarios. Son particularmente útiles en escenarios como:
Presentación de productos o servicios: Mostrar diferentes artículos de un catálogo, destacando sus características y precios, con un botón para más información o compra.
Ofertas y promociones múltiples: Exhibir varias promociones activas, permitiendo al cliente elegir la que más le interese.
Guías paso a paso o tutoriales visuales: Desglosar un proceso en pasos individuales, cada uno con una imagen y una breve descripción.
Preguntas frecuentes visuales: Responder a preguntas comunes con opciones interactivas en cada tarjeta.
Colecciones de contenido: Presentar diferentes artículos de blog, noticias o recursos relacionados.
En Wolkvox Manager, esta funcionalidad se integra a través de los routing points de tipo ChatBot en Wolkvox Studio, utilizando el componente "Responder Chat" con conectores de WhatsApp de tipo Cloud API. Es crucial recordar que la plantilla de carrusel debe ser creada y aprobada previamente en Meta Business Manager.

Respuesta (Solución / Recomendación)
Paso 1: Creación y Aprobación de la Plantilla de Carrusel en Meta Business Manager (Requisito Indispensable)
Antes de configurar cualquier cosa en Wolkvox Studio, la plantilla tipo Carrusel debe ser diseñada, creada y aprobada en tu cuenta de Meta Business Manager. Wolkvox Studio solo permite el envío de plantillas existentes y no su diseño.
Para conocer el paso a paso técnico sobre cómo crear estas plantillas tipo carrusel, consulta directamente la guía oficial de Meta dando [clic aquí].
Paso 2: Configuración en Wolkvox Studio (Routing Point ChatBot)
Una vez que tu plantilla de Carrusel está aprobada en Meta, puedes configurarla para ser enviada desde tu ChatBot en Wolkvox Studio.
- Ingresa a Wolkvox Studio:
- Accede a tu Wolkvox Manager.
- En el menú lateral izquierdo, navega hasta "Wolkvox Studio" (o el apartado donde diseñas tus flujos).
- Abre el routing point de tipo ChatBot donde deseas enviar el carrusel.
- Agrega el Componente "Responder Chat": Desde la paleta de componentes, arrastra y suelta el componente "Responder Chat" (o "Reply Chat") en tu flujo de diseño. Conéctalo a la lógica de tu ChatBot en el punto deseado.
- Configura el Componente "Responder Chat": Haz doble clic en el componente "Responder Chat" para abrir su ventana de configuración.
- Ve a la pestaña "Avanzado".
- En el campo "Plantillas", haz clic en el desplegable y selecciona el nombre exacto de tu plantilla de Carrusel aprobada en Meta Business Manager.
- Haz clic en el botón "Cargar plantilla". Esto cargará automáticamente la estructura JSON mínima necesaria para tu carrusel.
- Ajusta el JSON para las Variables y URLs de Imágenes:
- El campo de texto en el componente "Responder Chat" mostrará una estructura JSON que refleja tu plantilla. Necesitarás modificar los campos parameters para las variables y las URLs de las imágenes. Un ejemplo de la estructura a modificar se vería así:
- name: Es el nombre exacto de la plantilla de Meta Business. Este valor debe coincidir, no se puede inventar.
- language.code: Código del idioma de la plantilla.
- Componente "body":
- "type": Tipo de componente. En este caso, siempre debe ser "body".
- "parameters":
- "type": Tipo de parámetro. Aquí siempre es "text".
- "text": Texto que reemplazará a las variables en la plantilla. Este campo es configurable y debe coincidir con las variables definidas en la plantilla.
- Componente "carousel":
- "type": Tipo de componente. Aquí siempre debe ser "carousel".
- "cards": Un arreglo de tarjetas que forman el carrusel. Cada tarjeta tiene sus propios componentes.
- Tarjeta "card_index": Índice de la tarjeta en el carrusel. Este campo es obligatorio y debe ser único para cada tarjeta.
- Componentes de la tarjeta (header):
- "type": Tipo de parámetro. Aquí siempre es "image".
- "image": Objeto que contiene la URL de la imagen.
- "link": URL de la imagen. Este campo es configurable y debe ser una URL válida de una imagen.
- Componentes de la tarjeta (body):
- "body":
- "parameters": Generalmente vacío, ya que el cuerpo de la tarjeta suele ser estático.
- "body":
- Componentes de la tarjeta (buttons):
- "sub_type": Subtipo de botón. Puede ser "quick_reply" o "url".
- "index": Índice del botón. Debe coincidir con el índice definido en la creación de la plantilla.
- "parameters": Parámetros del botón.
- "type": Tipo de parámetro. Aquí siempre es "text".
- "text": Texto asociado al botón. Este campo es configurable y debe coincidir con las variables definidas en la plantilla.
- Componentes de la tarjeta (header):
- El campo de texto en el componente "Responder Chat" mostrará una estructura JSON que refleja tu plantilla. Necesitarás modificar los campos parameters para las variables y las URLs de las imágenes. Un ejemplo de la estructura a modificar se vería así:
{
"template": {
"name": "carousel_media_cards_v2",
"language": {
"code": "es_MX"
},
"components": [
{
"type": "body",
"parameters": [
{
"type": "text",
"text": "Pablo"
},
{
"type": "text",
"text": "30% off"
},
{
"type": "text",
"text": "30OFF"
}
]
},
{
"type": "carousel",
"cards": [
{
"card_index": 0,
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"link": "<url_link>"
}
}
]
},
{
"type": "body",
"parameters": [
]
},
{
"type": "button",
"sub_type": "quick_reply",
"index": 0,
"parameters": [
]
},
{
"type": "button",
"sub_type": "url",
"index": 1,
"parameters": [
{
"type": "text",
"text": "es"
}
]
}
]
},
{
"card_index": 1,
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"link": "<url_link>"
}
}
]
},
{
"type": "body",
"parameters": [
]
},
{
"type": "button",
"sub_type": "quick_reply",
"index": 0,
"parameters": [
]
},
{
"type": "button",
"sub_type": "url",
"index": 1,
"parameters": [
{
"type": "text",
"text": "es"
}
]
}
]
},
{
"card_index": 2,
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"link": "<url_link>"
}
}
]
},
{
"type": "body",
"parameters": [
]
},
{
"type": "button",
"sub_type": "quick_reply",
"index": 0,
"parameters": [
]
},
{
"type": "button",
"sub_type": "url",
"index": 1,
"parameters": [
{
"type": "text",
"text": "docs"
}
]
}
]
}
]
}
]
}
}
- Guarda los Cambios: Una vez que hayas configurado el JSON con las URLs de las imágenes y los valores de las variables, haz clic en el botón "Guardar" en la ventana de configuración del componente.
Nota: Las plantillas de tipo "Carousel" están limitadas a ser enviadas únicamente desde un routing point de tipo chat en Wolkvox Studio. No se pueden enviar directamente desde el aplicativo wolkvox Agent por un agente. Esta configuración ayuda a mantener la coherencia y automatización en la presentación de información estructurada y visualmente atractiva a través de los flujos de chat predefinidos.
