Índice:
- Introducción
- Respuesta Rápida
- Rich Card de Carrusel
- Cómo Crear tus Componentes JSON
- Rich Card Independiente
- Rich Card Independiente con Medios
- Acciones Sugeridas (Abrir un Enlace y/o Marcar un Número)
- Cómo Personalizar tus Propios Componentes
Introducción
Los siguientes tipos de mensajes ya se han integrado con Blip, lo que significa que simplemente puedes usar los componentes ya integrados de Blip a través de Builder.
Respuesta Rápida
Aquí tienes un ejemplo que muestra cómo puedes usar la función de respuesta rápida de Blip para crear sugerencias en GBM.
El primer paso es crear la función de Respuesta Rápida a través de un bloque en Builder.
Edita la Respuesta Rápida como desees.
¡Eso es todo! Así es como se verá tu mensaje al usar GBM:
Rich Card de Carrusel
Aquí tienes un ejemplo que muestra cómo puedes usar la función de carrusel de Blip para crear tarjetas ricas de carrusel en GBM.
El primer paso es crear la función de Carrusel a través de un bloque en Builder.
Edita el Carrusel como desees.
¡Eso es todo! Así es como se verá tu mensaje al usar GBM:
Cómo Crear tus Componentes JSON
Cómo Empezar
Esta página wiki te mostrará cómo crear el archivo JSON para muchos tipos diferentes de mensajes de GBM de una manera fácil de entender, dándote un ejemplo para cada caso.
Antes de cada uno de los ejemplos a continuación, necesitarás seguir estos dos pasos:
El primer paso es crear un contenido dinámico a través de cualquier bloque en builder.
Recuerda establecer el tipo de contenido dinámico a application/json.
Notas importantes:
Tu mensaje final solo será visible a través de GBM, si estás intentando probar esto usando cualquier otro canal como Blip Chat, mostrará "Unsupported Content" en lugar del contenido correcto.
Si tu mensaje contiene un campo de sugerencia, es decir, un botón para que el usuario presione, entonces también debes crear un comando de "awaiting user input" en el bloque a través de Blip.
Image
El archivo Json para enviar una imagen es:
{
"image": {
"contentInfo": {
"fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
}
}
}
Así es como se verá el mensaje final en GBM:
Imagen con Sugerencias
El campo "postbackData" es el valor que debes tratar como la respuesta del usuario cuando hagan clic en el botón de sugerencia.
El archivo Json final para crear una Imagen con Sugerencias es:
{
"suggestions": [
{
"reply": {
"text": "Suggestion 01",
"postbackData": "reply1"
}
},
{
"reply": {
"text": "Suggestion 02",
"postbackData": "reply2"
},
}
],
"image": {
"contentInfo": {
"fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
}
}
}
Así es como se verá el mensaje final en GBM:
Rich Card Independiente
El campo "postbackData" es el valor que debes tratar como la respuesta del usuario cuando hagan clic en el botón de sugerencia.
El archivo Json final para crear una Standalone Rich Card es:
{
"richCard": {
"standaloneCard": {
"cardContent": {
"title": "Título del Standalone Rich Card",
"description": "Descripción del Standalone Rich Card",
"suggestions": [
{
"reply": {
"text": "Suggestion 01",
"postbackData": "reply1"
}
},
{
"reply": {
"text": "Suggestion 02",
"postbackData": "reply2"
}
}
]
}
}
}
}
Así es como se verá el mensaje final en GBM:
Rich Card Independiente con Medios
El campo "postbackData" es el valor que debes tratar como la respuesta del usuario cuando hagan clic en el botón de sugerencia.
El archivo Json final para crear una Standalone Rich Card es:
{
"richCard": {
"standaloneCard": {
"cardContent": {
"title": "Título del Standalone Rich Card",
"description": "Descripción del Standalone Rich Card",
"media": {
"height": "SHORT",
"contentInfo": {
"fileUrl": "https://www.take.net/files/themes/blank_theme/assets/img/take-og-image.png"
}
},
"suggestions": [
{
"reply": {
"text": "Suggestion 01",
"postbackData": "reply1"
}
},
{
"reply": {
"text": "Suggestion 02",
"postbackData": "reply2"
}
}
]
}
}
}
}
Así es como se verá el mensaje final en GBM:
Acciones Sugeridas (Abrir un Enlace y/o Marcar un Número)
El campo "postbackData" es el valor que debes tratar como la respuesta del usuario cuando hagan clic en el botón de sugerencia.
El campo "texto" tiene un máximo de 25 caracteres.
El archivo Json final para crear una Standalone Rich Card es:
{
"suggestions": [
{
"action": {
"text": "Título de Acción 01",
"postbackData": "link",
"openUrlAction": {
"url": "https://www.take.net/"
}
}
},
{
"action": {
"text": "Título de Acción 02",
"postbackData": "dial",
"dialAction": {
"phoneNumber": "+5531999999999"
}
}
}
],
"text": "Sugerencias Texto"
}
Así es como se verá el mensaje final en GBM:
Si haces clic en el botón "Título de la Acción 01", se abrirá la URL especificada en el json: "https://www.take.net/", y si haces clic en el botón "Título de la Acción 02", se marcará el número especificado en el campo "phoneNumber": "+5531999999999".
Para un mensaje que contiene solo un botón que abre un enlace, puedes usar el siguiente Json:
{
"suggestions": [
{
"action": {
"text": "Título de Acción 01",
"postbackData": "link",
"openUrlAction": {
"url": "https://www.take.net/"
}
}
}
],
"text": "Sugerencias Texto"
}
Y para un mensaje que contenga solo un botón que marque un número de teléfono, puedes usar el siguiente Json
{
"suggestions": [
{
"action": {
"text": "Título de Acción 02",
"postbackData": "dial",
"dialAction": {
"phoneNumber": "+5531999999999"
}
}
}
],
"text": "Sugerencias Texto"
}
Cómo Personalizar tus Propios Componentes
Introducción
Esta página wiki te enseñará cómo crear tus propios archivos Json para enviar todo tipo de mensajes personalizados desde Blip a GBM como contenido dinámico.
El tutorial en esta página sigue un conjunto estricto de reglas para que tu Json final funcione como contenido dinámico en Blip, pero si quieres saber más sobre cada componente, puedes visitar la Documentación de GBM . Ten en cuenta que su plantilla puede verse diferente a la de esta página y si sigues la suya, tu mensaje puede no funcionar. Algunos campos que están presentes en la documentación original no están presentes en esta wiki porque pueden ser creados utilizando las propias herramientas de Blip, como el Carousel Rich Card por ejemplo, o porque no deberían ser usados.
Descripción de la Plantilla
Los mensajes que enviarás como contenido dinámico usando esta guía necesitan tener el tipo application/json.
Todos los siguientes componentes "object ()" se desarrollan en esta wiki, son un campo compuesto por otros campos, pero tu archivo Json final no debe tener ningún componente "object ()" escrito en él. Por ejemplo, el "object (SuggestedReply)" está compuesto por un campo "text" y un campo "postbackData", por lo que tu archivo Json final tendrá los campos "text" y "postbackData" en lugar del campo "object (SuggestedReply)".
La plantilla general es la siguiente:
{
"suggestions": [
{
object (Suggestion)
}
],
"fallback": string,
"containsRichText": boolean,
// Union field content can be only one of the following:
"text": string,
"image": {
object (Image)
},
"richCard": {
object (RichCard)
}
// End of list of possible types for union field content.
}
suggestions[]: object (Suggestion). Una lista de respuestas sugeridas que aparecen como una lista de chips de sugerencia siguiendo el mensaje asociado. Máximo 13 sugerencias.
Ten en cuenta que la funcionalidad de sugerencias es equivalente a la respuesta rápida de Blip, que ya está integrada con el canal GBM. Así que, si necesitas crear un mensaje compuesto únicamente por las sugerencias y un texto, usa la respuesta rápida propia de Blip. Si necesitas mezclar sugerencias con imágenes en el mismo mensaje, por ejemplo, debes usar el contenido dinámico.
fallback: String. Opcional. Texto de respaldo que se muestra si el dispositivo del usuario no es compatible con el tipo o contenido del mensaje.
containsRichText: Boolean. Opcional. Si es verdadero, indica que el mensaje contiene texto enriquecido.
Debes elegir solo una de las siguientes opciones:
text: String. Un mensaje de texto.
image: object (Image). Un mensaje de imagen.
richCard: object (RichCard). Rich card message.
Sugerencia
object (Suggestion)
// Union field option can be only one of the following:
"reply": {
object (SuggestedReply)
},
"action": {
object (SuggestedAction)
}
// End of list of possible types for union field option.
Debes elegir solo una de las siguientes opciones:
reply: object (SuggestedReply). Una sugerencia para que el usuario responda con el texto especificado.
action: object (SuggestedAction). Una acción sugerida que inicia una acción nativa en el dispositivo.
object (SuggestedReply)
Cuando se toca, envía la respuesta de texto de vuelta al agente.
"text": string,
"postbackData": string
text: String. Texto que se muestra en la respuesta sugerida y se envía al agente cuando el usuario lo toca. Máximo 25 caracteres.
postbackData: String. La cadena que el agente recibe cuando un usuario toca la respuesta sugerida, esto es lo que debe ser evaluado al validar la entrada del usuario.
object (SuggestedAction)
Cuando se toca, inicia la acción nativa correspondiente en el dispositivo.
"text": string,
"postbackData": string,
// Union field action can be only one of the following:
"openUrlAction": {
{
"url": string
}
},
"dialAction": {
{
"phoneNumber": string
}
}
// End of list of possible types for union field action.
text: String. Texto que se muestra en la acción sugerida. Máximo 25 caracteres.
postbackData: String. La cadena que el agente recibe cuando un usuario toca la acción sugerida.
url: String. La URL que se abrirá en openUrlAction.
phoneNumber: String. Required. El número de teléfono especificado que se marcará.
Debes elegir solo una de las siguientes opciones:
dialAction: Abre la aplicación de marcación predeterminada del usuario.
openUrlAction: Abre la URL especificada.
Image
object (Image)
"image": {
"contentInfo": {
object (ContentInfo)
}
}
contentInfo: object (ContentInfo). Información sobre una imagen, incluyendo la URL de la imagen y la URL de la miniatura de la imagen.
object (ContentInfo)
"fileUrl": string,
"thumbnailUrl": string,
"forceRefresh": boolean,
"altText": string
fileUrl: String. URL accesible públicamente del archivo. Máximo 5 MB.
Supported types: image/jpeg, image/jpg, image/png.
thumbnailUrl: String. Opcional. URL accesible públicamente de la miniatura. Máximo 25 KB.
Supported content types: image/jpeg, image/jpg, image/png.
forceRefresh: Boolean. Si está activado, la plataforma obtiene el archivo y la miniatura de las URLs especificadas, incluso si la plataforma tiene copias en caché del archivo (y/o de la miniatura).
altText: String. Texto que describe los detalles sobre el medio para fines de accesibilidad.
RichCard
object (RichCard)
Una tarjeta enriquecida independiente o un carrusel de tarjetas enriquecidas enviadas del agente al usuario.
"standaloneCard": {
object (StandaloneCard)
}
standaloneCard: object (StandaloneCard). Standalone card.
object (StandaloneCard)
"cardContent": {
object (CardContent)
}
cardContent: object (CardContent). El contenido de la tarjeta, como título, descripción, etc.
object (CardContent)
"title": string,
"description": string,
"media": {
object (Media)
},
"suggestions": [
{
object (Suggestion)
}
]
title: String. Opcional. Título de la card. Máximo 200 caracteres.
description: String. Opcional. Descripción de la card. Máximo 2000 caracteres.
media: object (Media). Opcional. Medios para incluir en la card.
suggestions[]: object (Suggestion). Opcional. Lista de sugerencias para incluir en la card. Máximo 4 sugerencias.
object (Media)
Un archivo de medios dentro de una card enriquecida.
"height": enum (Height),
"contentInfo": {
object (ContentInfo)
}
height: enum (Height). La altura del medio dentro de una card enriquecida.
Enums | Values |
HEIGHT_UNSPECIFIED | No especificado. |
SHORT | 112 DP. |
MEDIUM | 168 DP. |
TALL | 264 DP. No disponible para carruseles de card enriquecidas cuando el ancho de la tarjeta está configurado en SMALL. |
contentInfo: object (ContentInfo). Información sobre una imagen, incluyendo la URL de la imagen y la URL de la miniatura de la imagen.
Para más información, visite la discusión sobre el tema en nuestra comunidad o videos en nuestro canal. 😃