Las plantillas de mensaje predeterminado en WhatsApp se expresan con lenguaje de marcado. Si se utiliza JavaScript Underscore, es posible crear plantillas dinámicas enriquecidas con datos.
📖 Este artículo explica:
Considera que este artículo se refiere a la aplicación de mensajería WhatsApp. iPaper permite hacer Checkout con WhatsApp pero no puede ofrecer asistencia para configurar una cuenta de WhatsApp.
Sustitución de datos variables en plantillas de WhatsApp (sin HTML)
Para utilizar el valor de una variable en la plantilla, es necesario usar esta sintaxis:
Grand total = <%= data.grandTotal %>
Aquí, "data." son los objetos JSON que contienen toda la información disponible (valores), y "grandTotal" es el valor que se quiere incluir.
Cuando la plantilla se procesa para generar el correo final, todas las variantes dentro de "<%= ... %> son reemplazados por valores reales.
En el ejemplo anterior, si la compra total son 450, el mensaje de WhatsApp mostraría los datos así:
Grand total = 450
Entrada de muestra (Sample Input)
Las opciones disponibles de objetos de datos dependen del contexto en que se utilice la plantilla. En el editor de plantillas, puedes ver un ejemplo de cómo los objetos de datos están estructurados. Sólo necesitas ir a la pestaña "Sample Input" (Entrada de muestra).
Esta pestaña muestra una representación JSON de todos los objetos de datos, sus objetos anidados y la matriz de elementos que puedes utilizar en tu mensaje predeterminado de WhatsApp con algunos datos de muestra. Por ejemplo:
{
“language”: {
“title”: “Shopping list”,
“item”: “Item”,
“price”: "Price",
"amount": "Amount",
"total": "Total",
"grandTotal": "Grand total",
"description": "Description"
},
"settings": {
"hidePrices": false,
"decimalSeparator": ".",
"currency": "DKK"
},
"senderName": "John",
"items": [
{
"itemID": "XYZ25",
"name": "Club soda",
"price": 79.95,
"amount": 4,
"totalPrice": 319.8,
"description": "Effervescent beverage"
}
],
"grandTotal": 319.8
}
Estructuras dinámicas con ciclos
Es possible crear una estructura dinámica para tu plantilla usando ciclos. Esto es particularmente útil para crear un número variable de filas de una tabla, por ejemplo, al incluir una fila por cada artículo del pedido.
Para crear un ciclo, esta es la sintaxis que se tiene que usar:
<% _.each(data.items, function(item) { %>
<%= item.amount %> x <%= item.itemID %> : <%= item.name %>
<% }); %>
En este caso «data.items» es una colección de elementos en el objeto de datos JSON.
El elemento «item» será accesible dentro del ciclo, y representará el elemento actual. El ciclo se ejecutará tantas veces como elementos tenga la colección que se está repitiendo. Dentro del cuerpo del ciclo, se puede utilizar una sustitución regular de variables en el objeto «item».
Ejemplo completo de una plantilla de WhatsApp
El siguiente código representa un ejemplo de plantilla de mensaje de WhatsApp que incluye un listado de los productos e incluye "Hola" y "Saludos cordiales".
Hola,
Aquí está mi orden de WhatsApp:
<% _.each(data.items, function(item) { %><%= item.amount %> x *<%= item.name %>* - <%= item.itemID %> <% if (!data.settings.hidePrices) { %> - <%= item.price.toFixed(2).replace('.', data.settings.decimalSeparator) %> / <%= (item.amount * item.price).toFixed(2).replace('.', data.settings.decimalSeparator) %><% } %>
<% }) %>
*Grand total is <%= data.grandTotal %>*
Saludos cordiales,
Explicación del mensaje de muestra
Para incluir cada elemento de la lista, las plantillas deben incluir un ciclo. Este es el comienzo del ciclo y significa «Repetir para cada elemento en data.items».
<% _.each(data.items, function(item) { %>
Luego viene: importe x (veces) nombre del artículo y el ID del artículo.
<%= item.amount %>x*<%= item.name %>*-<%= item.itemID %>
Nota: dentro del ciclo, se puede llamar a cada punto de datos del elemento utilizando:
- item.itemID
- item.name
- item.price
- item.amount
- item.totalPrice
- item.description
Luego, se establece una condición: Si la opción de ocultar precios no está activada:
<% if (!data.settings.hidePrices) { %>
Entonces, indica el precio, con el decimal correcto, ya sea coma (,) o punto (.)
<%= item.price.toFixed(2).replace('.', data.settings.decimalSeparator) %>
A continuación, muestra la cantidad de artículos * precio del artículo y el subtotal, con el decimal correcto, ya sea coma (,) o punto (.)
<%= (item.amount * item.price).toFixed(2).replace('.', data.settings.decimalSeparator) %><% } %>
Finalmente, el gran total.
*Grand total is<%= data.grandTotal %>*
Esto generaría un mensaje de WhatsApp similar a:
⚠️ A diferencia de las plantillas de correo electrónico, la plantilla de WhatsApp no admite HTML y sólo utiliza texto normal, así como el marcado
<%= ... %>.
The format does allow for some basic formatting:
To bold something, add an asterisk to either side of the word: *bold*
To italicize something, add an underscore to either side of the word: _italics_
El formato permite aplicar algunos formatos básicos:
Para poner algo en negritas, añade un asterisco a cada lado de la palabra: *ejemplo*
Para poner algo en cursivas, añada un guión bajo a cada lado de la palabra: _ejemplo_.
Convierte tu PDF en una experiencia interactiva de compras en línea
Entiende cómo esta y otras tácticas para Flipbooks pueden ayudarte a atraer e inspirar a tus clientes en nuestro Marco de Éxito.