Índice:
Introdução
Este artículo le mostrará cómo crear el archivo JSON para ambos tipos de mensajes interactivos de una manera fácil de entender, proporcionando un ejemplo para cada caso.
Para mejorar la experiencia de los usuarios que interactúan con Smart Contact, se pueden usar dos nuevos tipos de mensajes en el flujo conversacional como contenido dinámico, sin necesidad de aprobación previa de las (message templates).
Los nuevos tipos se denominan mensajes interactivos por WhatsApp y pueden ser:
Listar Mensajes: permitirá la selección de un ítem de una lista de hasta 10 opciones. Este tipo de mensaje proporciona una forma más simple y consistente para que los usuarios seleccionen una opción cuando interactúan con una empresa.
Botones de respuesta: permitirá seleccionar hasta 3 opciones en forma de botones. Este tipo de mensaje proporciona una forma más rápida para que los usuarios realicen una selección de un menú cuando interactúan con una empresa. Los botones de respuesta tienen la misma experiencia de usuario que las plantillas interactivas con botones.
Ver más información en la documentación oficial de WhatsApp: haga clic aquí para acceder
Mensaje de lista
La mensajería de tipo menú está disponible de forma nativa en Blip. Esto significa que es posible usar el componente a través del constructor y tener la misma experiencia en el canal de WhatsApp.
Componente constructor:
Si el payload no está habilitado, el texto de las opciones se replicará en el Id, eliminando los espacios y los caracteres especiales.
El ID es utilizado por el canal para identificar qué opción se ha seleccionado.
Si deseas personalizar los valores de los Ids y hacerlos fijos, independientemente de los textos de las opciones, debes hacer lo siguiente:
- "Set payload": debe estar marcado.
- "Postback mime type": debe configurarse con el valor "text/plain".
- "Postback value": el valor proporcionado se asignará al Id.
- Los valores deben ser únicos entre los payloads y entre las opciones que no tienen payloads definidos.
Ejemplo de cómo se renderiza el componente en WhatsApp:
Reglas existentes para botones:
1. Texto del título:
- Se admiten emojis y rebajas
- Longitud máxima: 1024 caracteres
2. Botón:
Título del botón. Valor fijo “Menú”
- Maximum limit: 20 characters
3. Lista de opciones:
- Se admiten emojis
- Markdown no es compatible
- Tamaño máximo: 10 opciones
- Debe ser único.
- Longitud máxima: 24 caracteres.
Observaciones:
- Los componentes de tipo menú que se convierten a Mensaje de lista solo tendrán 1 sección.
- Si alguna de estas reglas no se respeta, la conversión del componente se realiza a texto.
Para utilizar este componente por parte del constructor, es necesario habilitar la configuración de Menú. En la pestaña Canales > Configuración, habilite el convertidor, como se muestra en la imagen a continuación:
Además, todavía es posible usar el componente a través del tipo de mensaje Contenido dinámico del bloque en el constructor de todos modos.
De acuerdo con la imagen a continuación, en el campo 1, defina el valor application/json para el tipo de contenido dinámico, en el campo 2, defina el JSON que compondrá el contenido y confirme los cambios a través del botón Guardar, botón 3.
Ejemplo de un mensaje de lista JSON:
{
"recipient_type": "individual",
"type": "interactive",
"interactive": {
"type": "list",
"header": {
"type": "text",
"text": "your-header-content"
},
"body": {
"text": "List Body Message"
},
"action": {
"button": "Send",
"sections": [
{
"title": "Section 1",
"rows": [
{
"id": "ID 1.1",
"title": "Title 1.1",
"description": "Description 1.1"
},
{
"id": "ID 1.2",
"title": "Title 1.2",
"description": "Description 1.2"
}
]
},
{
"title": "Section 2",
"rows": [
{
"id": "ID 2.1",
"title": "Title 2.1",
"description": "Description 2.1"
},
{
"id": "ID 2.2",
"title": "Title 2.2",
"description": "Description 2.2"
}
]
}
]
}
}
}
El ejemplo se representará de la siguiente manera:
Finalmente, así es como encajan las partes:
Botones de respuesta
El mensaje de respuesta rápida está disponible de forma nativa en Blip. Esto significa que es posible usar el componente a través del constructor y tener la misma experiencia en el canal de WhatsApp.
Componente constructor:
En caso de que el payload no esté habilitado, el texto de las opciones se replicará en el ID, eliminando los espacios y los caracteres especiales.
El ID se utiliza por el canal para identificar qué opción ha sido seleccionada. Si desea personalizar los valores de los IDs y mantenerlos fijos, independientemente de los textos de las opciones, deberá:
- "Set payload": debe estar marcado.
- "Postback mime type": debe configurarse con el valor "text/plain".
- "Postback value": el valor proporcionado se asignará al ID.
- Los valores deben ser únicos entre los payloads y entre las opciones que no tengan payloads definidos.
Ejemplo de cómo se renderiza el componente en WhatsApp:
Reglas existentes para botones:
Texto:
- Contenido del mensaje
- Se admiten emojis y rebajas
- Los enlaces son compatibles
- Longitud máxima: 1024 caracteres
Botones:
- Debes tener al menos 1 botón
- El número de botones está limitado a 3
Texto:
- No se permite texto vacío
- Debe ser único
- Los emojis son compatibles, pero el descuento no lo es
- Longitud máxima: 20 caracteres
Comentarios:
- Si alguna de estas reglas no se respeta, la conversión del componente se realiza a texto.
Para utilizar este componente por parte del constructor, es necesario habilitar la configuración de Quick reply. En la pestaña Canales > Configuración, habilite el convertidor, como se muestra en la imagen a continuación:
Además, en cualquier caso, todavía es posible utilizar el componente a través del tipo de mensaje Dynamic Content.
Entonces, en este caso, el mensaje del tipo Botón de respuesta tendría cuatro tipos diferentes de encabezados que puede usar: texto, documento, video e imagen.
Se recomienda utilizar la estructura de JSON's a continuación, ya que con ellos, el mensaje se presentará en el Blip Desk, tal como fue enviado al contacto.
Esta idoneidad no invalida la forma en que la plataforma ya manejó el componente Botón de respuesta anteriormente.
Para todos los ejemplos en el nuevo formato, el tipo mime esperado es:
- application/vnd.lime.document-select+json
Ejemplos recomendados:
Json - Texto:
{
"header":{
"type":"application/vnd.lime.media-link+json",
"value":{
"type":"",
"title":"This is a title send from lime",
"text":"This is a subtitle send from lime"
}
},
"options":[
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title1",
"text":"text1"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title2",
"text":"text2"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title3"
}
}
}
]
}
Json - Imagen:
{
"header":{
"type":"application/vnd.lime.media-link+json",
"value":{
"type":"image/jpeg",
"aspectRatio":"1:1",
"title":"This is a title send from lime",
"text":"This is a subtitle send from lime",
"uri":
"https://s1.static.brasilescola.uol.com.br/be/conteudo/images/imagem-em-lente-convexa.jpg"
}
},
"options":[
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title1"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title2",
"text":"identificador_2"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title3"
}
}
}
]
}
Json - Video:
{
"header":{
"type":"application/vnd.lime.media-link+json",
"value":{
"type":"video/mp4",
"aspectRatio":"1:1",
"title":"This is a title send from lime",
"text":"This is a subtitle send from lime",
"uri" :
"https://edisciplinas.usp.br/pluginfile.php/5196097/mod_resource/content/1/Teste.mp4"
}
},
"options":[
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title1"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title2",
"text":"identificador_2"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title3"
}
}
}
]
}
Json - Documento:
{
"header":{
"type":"application/vnd.lime.media-link+json",
"value":{
"type":"application/pdf",
"aspectRatio":"1:1",
"title":"This is a title send from lime",
"text":"This is a subtitle send from lime",
"uri":
"https://blip-community.s3-sa-east-1.amazonaws.com/documento-padrao-blip.pdf"
}
},
"options":[
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title1"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title2",
"text":"identificador_2"
}
}
},
{
"label":{
"type":"application/vnd.lime.media-link+json",
"value":{
"title":"Title3"
}
}
}
]
}
Incluso con el flujo recomendado, existe el flujo que usa el JSON original, que hoy en día ya no se recomienda, como se explicó anteriormente al comienzo de este tema.
Para cualquiera de los tipos a continuación, el tipo MIME esperado para el componente es:
- application/json
Aquí hay un ejemplo de un botón de respuesta de encabezado de texto JSON:
{
"recipient_type": "individual",
"type": "interactive",
"interactive": {
"type": "button",
"header": {
"type": "text",
"text": "header text"
},
"body": {
"text": "Button Body Message"
},
"action": {
"buttons":[
{
"type": "reply",
"reply": {
"id": "unique-postback-id",
"title": "Clique aqui"
}
},
{
"type": "reply",
"reply": {
"id": "unique-id",
"title": "Não clique"
}
}
]
}
}
}
Un ejemplo de un botón de respuesta de encabezado de documento JSON:
{
"recipient_type": "individual",
"type": "interactive",
"interactive": {
"type": "button",
"header": {
"type": "document",
"text": "Boleto",
"document": {
"link": "https://blip-community.s3-sa-east-1.amazonaws.com/documento-padrao-blip.pdf",
"filename": "some-file-name"
}
},
"body": {
"text": "Button Body Message"
},
"action": {
"buttons": [
{
"type": "reply",
"reply": {
"id": "unique-postback-id",
"title": "First"
}
},
{
"type": "reply",
"reply": {
"id": "unique-id",
"title": "Second"
}
}
]
}
}
}
Un ejemplo de JSON de botón de respuesta de encabezado de video:
{
"recipient_type": "individual",
"type": "interactive",
"interactive": {
"type": "button",
"header": {
"type": "video",
"text": "video blip",
"video": {
"link": "http://techslides.com/demos/sample-videos/small.mp4"
}
},
"body": {
"text": "Button Body Message"
},
"action": {
"buttons": [
{
"type": "reply",
"reply": {
"id": "unique-postback-id",
"title": "First"
}
},
{
"type": "reply",
"reply": {
"id": "unique-id",
"title": "Second"
}
}
]
}
}
}
Un ejemplo de un botón de respuesta de encabezado de imagen JSON:
{
"recipient_type": "individual",
"type": "interactive",
"interactive": {
"type": "button",
"header": {
"type": "image",
"text": "blip image",
"image": {
"link": "https://sindinfor.org.br/wp-content/uploads/2020/10/blip-og-image.png"
}
},
"body": {
"text": "Button Body Message"
},
"action": {
"buttons": [
{
"type": "reply",
"reply": {
"id": "unique-postback-id",
"title": "First"
}
},
{
"type": "reply",
"reply": {
"id": "unique-id",
"title": "Second"
}
}
]
}
}
}
Finalmente, así es como encajan las partes:
Para obtener más información, acceda a la discusión sobre el tema en nuestra comunidad o los videos en nuestro canal. 😃