Plantillas de carrusel de WhatsApp
Las plantillas de carrusel de tarjetas multimedia te permiten mostrar varios productos en un único mensaje de plantilla de marketing en WhatsApp. Cada producto aparece como una tarjeta desplazable horizontalmente, lo que permite a los usuarios navegar, comparar y actuar sobre las ofertas sin verse abrumados por múltiples mensajes.
Este formato es especialmente eficaz para promociones y campañas estacionales.
Una plantilla de carrusel de tarjetas multimedia es una plantilla de marketing de WhatsApp que combina:
- Un único texto en el cuerpo del mensaje, y
- Un carrusel desplazable horizontalmente de hasta 10 fichas de producto
Cada tarjeta representa un producto o una oferta y está diseñada para conducir a los usuarios a una página externa de compra o información.
Las tarjetas de carrusel sólo son compatibles con los mensajes de las plantillas de marketing y no están disponibles para las plantillas de utilidades o autenticación.
Componentes de un carrusel
Cada tarjeta de carrusel puede contener los siguientes componentes:
Encabezado (obligatorio)
Una imagen o un vídeo que represente el producto.
Texto del cuerpo (opcional)
Texto descriptivo breve, como el nombre del producto, el precio o la promoción.
Botones (opcionales, hasta dos por tarjeta)
Los tipos de botones admitidos son:
- Botones URL
- Botones de números de teléfono
- Botones de respuesta rápida
Puede mezclar tipos de botones dentro de una misma tarjeta (por ejemplo, un botón de URL y otro de respuesta rápida).
Requisito de coherencia
Todas las tarjetas de una misma plantilla de carrusel deben utilizar el mismo conjunto de componentes.
Por ejemplo, si una tarjeta incluye un cuerpo de texto y dos botones, todas las tarjetas deberán incluir también un cuerpo de texto y dos botones.
Crear una plantilla de carrusel de WhatsApp
Los carruseles de tarjetas multimedia deben crearse como plantillas de marketing utilizando la API de gestión de plantillas.
Cada plantilla consta de:
- A
BODYcomponente (se aplica a todo el mensaje) - A
CAROUSELcomponente que contiene hasta 10 tarjetas - Cada tarjeta debe definir los mismos componentes
Carrusel de recomendaciones de productos
Este ejemplo crea una plantilla de carrusel con tres fichas de producto, cada una de las cuales incluye:
- Una cabecera de imagen
- Un organismo con un parámetro de precio dinámico
- Un botón URL y un botón de respuesta rápida
{
"name": "sample_carousel_template10",
"language": "en",
"category": "MARKETING",
"allow_category_change": true,
"components": [
{
"type": "BODY",
"text": "Hi *{{1}}*. Following your preferences, we think those are the *Vonage* products that match best your needs:",
"example": {
"body_text": "[['Pablo']]"
}
},
{
"type": "CAROUSEL",
"cards": [
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYMX_ceB7hy4UrocTFGovCrheY7VIeEc0Lxc2fAn_SNsWN5icskgixQ1viE8pPoiiQ6S6Smv6RpaWHNb5mJaUQI4Y7zB6L87QvnTNs3NeVmfg:e:1775210982:1767162543555562:100040931896219:ARYyiV3YGhM1uOFNyKw"]
}
},
{
"type": "BODY",
"text": "*Video API*: As low as {{1}} USD per minute per participant. The best option to have full control on your video app and you want to delight your users!",
"example": {
"body_text": "[['0.00395']]"
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Video API Developer Docs",
"url": "https://tokbox.com/developer/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about *Video API*!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYfk5Coa-tyuiaGtJIGbbZpadRtRf6_DRGx1eC4COq2TBS9jESnifBwlvBesVPYsJoJG0vlF8DcQ-SAoynD7_V4AKoVcAbO_fS9tVesGgb-Aw:e:1775210995:1767162543555562:100040931896219:ARYPxK9WzQSw_RPhWnI"]
}
},
{
"type": "BODY",
"text": "*Messages API*: As low as {{1}} EUR per minute per participant. With almost every pre-built for you, this option saves you time to go live!",
"example": {
"body_text": "[['0.00475']]"
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Messages API Page",
"url": "https://www.vonage.com/communications-apis/messages/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about *Messages API*!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARZWziKvjbUO_8_-zr3gi45fXqs_4kI8A24lPhI1QvREJuojcAEspv6iHMjBvAOJ23j2sT8Y11xn1oFNm_vUsQHNwGTlpodB1Q8OxonGUrmFDw:e:1775211007:1767162543555562:100040931896219:ARa3BLIlI4stgYj9Hzo"]
}
},
{
"type": "BODY",
"text": "*In-App Voice*: Build app-to-app, app-to-phone and phone-to-app use cases. app-to-app calls as low as {{1}} EUR per minute per participant.",
"example": {
"body_text": "[['0.0040']]"
}
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "In-App Voice Developer Docs",
"url": "https://developer.vonage.com/en/vonage-client-sdk/in-app-voice/overview"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about *In-App Voice*!"
}
]
}
]
}
]
}
]
}
Respuesta
Status 202 ACCEPTED
{
"id": "1477582267072231",
"status": "PENDING",
"category": "MARKETING"
}
Carrusel con parámetros de URL dinámicos
Esta plantilla muestra botones de URL dinámicos, en los que parte de la URL se proporciona en el momento del envío.
{
"name": "sample_carousel_dynamic_links10",
"language": "en",
"category": "MARKETING",
"allow_category_change": true,
"components": [
{
"type": "BODY",
"text": "Hi *{{1}}*. Below you have some dynamic links:",
"example": {
"body_text": "[['Pablo']]"
}
},
{
"type": "CAROUSEL",
"cards": [
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYfk5Coa-tyuiaGtJIGbbZpadRtRf6_DRGx1eC4COq2TBS9jESnifBwlvBesVPYsJoJG0vlF8DcQ-SAoynD7_V4AKoVcAbO_fS9tVesGgb-Aw:e:1775210995:1767162543555562:100040931896219:ARYPxK9WzQSw_RPhWnI"]
}
},
{
"type": "BODY",
"text": "Learn more about Vonage Messages API"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Link",
"url": "https://vonage.com/{{1}}",
"example": [
"https://www.vonage.com/communications-apis/messages/"
]
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARZWziKvjbUO_8_-zr3gi45fXqs_4kI8A24lPhI1QvREJuojcAEspv6iHMjBvAOJ23j2sT8Y11xn1oFNm_vUsQHNwGTlpodB1Q8OxonGUrmFDw:e:1775211007:1767162543555562:100040931896219:ARa3BLIlI4stgYj9Hzo"]
}
},
{
"type": "BODY",
"text": "Learn more about Vonage Voice Communications"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Link",
"url": "https://vonage.com/{{1}}",
"example": [
"https://www.vonage.com/communications-apis/voice/"
]
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYMX_ceB7hy4UrocTFGovCrheY7VIeEc0Lxc2fAn_SNsWN5icskgixQ1viE8pPoiiQ6S6Smv6RpaWHNb5mJaUQI4Y7zB6L87QvnTNs3NeVmfg:e:1775210982:1767162543555562:100040931896219:ARYyiV3YGhM1uOFNyKw"]
}
},
{
"type": "BODY",
"text": "Learn more about Vonage Video API platform"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Link",
"url": "https://vonage.com/{{1}}",
"example": [
"https://www.vonage.com/communications-apis/video/"
]
}
]
}
]
}
]
}
]
}
Respuesta
Status 202 Accepted
{
"id": "1635112524349526",
"status": "PENDING",
"category": "MARKETING"
}
Carrusel informativo sin parámetros
Esta plantilla utiliza texto estático en el cuerpo y botones, sin que se requieran parámetros al enviar.
{
"name": "sample_carousel_quick_reply10",
"language": "en",
"category": "MARKETING",
"allow_category_change": true,
"components": [
{
"type": "BODY",
"text": "With *Vonage* you can implement any type of Voice application.\n\nGoing from basic SIP trunks to make calls and receive inbound calls in your Vonage virtual numbes, to complex Voice API applications featuring text-to-speech, speech-to-text, conference rooms, etc.\n\nWe also offer the Client SDK by which you can add In-App Voice capabitilities to your web and native apps"
},
{
"type": "CAROUSEL",
"cards": [
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYvt342aYJNXghr96KCAaJrEjtBQ1V2MK2AGhspduZc0ALIvV_Ti2Ec3Fr09SyJQAlmLb8OEnymiA25n-RzwVA8qUpXrHozR28OHkVhfCz9vA:e:1775215593:1767162543555562:100040931896219:ARYOpAnR6U-6cAGW8YM"]
}
},
{
"type": "BODY",
"text": "*Vonage SIP Trunking*: Make phone calls worldwide via SIP. Rent a virtual number and receive inbound calls too!"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Vonage SIP Trunking Docs",
"url": "https://developer.vonage.com/en/sip/overview"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about SIP Trunking!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARYXBRY83hHNm6fcsll3p7zJsxepaZIuAuKM1YYbbkix--aE3w41wTdGMXY_rN8hYA4etKSS-a6xCygPGETN4C3ZBLBywyE93IFa4mx1Za1q7A:e:1775215701:1767162543555562:100040931896219:ARY6_ZRadoHSHQHYUuU"]
}
},
{
"type": "BODY",
"text": "*Voice API Text-to-Speech*: You can convert text to natural-sounding language in a range of languages and voices"
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Vonage Voice API TTS Docs",
"url": "https://www.vonage.com/communications-apis/voice/features/tts/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about Voice API Text-to-Speech!"
}
]
}
]
},
{
"components": [
{
"type": "HEADER",
"format": "IMAGE",
"example": {
"header_handle": ["4::aW1hZ2UvanBn:ARZtdQZsf61x1CHZuzu9hHpxkny9sBr7JDwg92UEPIgjOkUZdC1_ua19bGNzePg5oig83AbYWDX_itrGormlSiqiU8Pz71jUxpPqTrTnHQGB6Q:e:1775215569:1767162543555562:100040931896219:ARb4jYhguGyuCUukgcE"]
}
},
{
"type": "BODY",
"text": "*Voice Quality Engine*: Deliver high quality voice experiences using our reliable global carrier network."
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "URL",
"text": "Vonage Voice Quality Engine Docs",
"url": "https://www.vonage.com/communications-apis/platform/voice-quality/"
},
{
"type": "QUICK_REPLY",
"text": "Tell me more about Voice Quality Engine!"
}
]
}
]
}
]
}
]
}
Respuesta
Status 202 ACCEPTED
{
"id": "1214481130497745",
"status": "PENDING",
"category": "MARKETING"
}
Experiencia del usuario al recibir un carrusel
Cuando un usuario pulsa un botón de URL en una tarjeta de carrusel:
- La URL asignada se abre en el navegador web predeterminado del dispositivo
- El usuario sale de la experiencia del cliente de WhatsApp
Porque las compras se realizan fuera de WhatsApp:
- No se activan webhooks de WhatsApp para los pedidos
- Los detalles del pedido no están disponibles en las API de WhatsApp
Cargar archivos multimedia
Antes de enviar plantillas de carrusel con medios, es posible que tenga que cargar sus archivos multimedia para obtener manejadores de medios. Cargue los archivos multimedia mediante la Media Upload API para obtener los manejadores de medios.
Cargar solicitud de medios:
curl --location 'https://api.nexmo.com/v2/whatsapp-manager/media/uploads?file_type=image%2Fjpg' \
--header 'Authorization: Basic xxxxxxxxxxx' \
--form 'mediafile=@"/Users/pcristobaldelrio/Desktop/client-sdk.png"'