1. Introducción
Última actualización: 11/05/2022
Te damos la bienvenida a Business Messages
Este codelab es una introducción a la integración en Business Messages, que les permite a los clientes conectarse con las empresas que administras a través de la Búsqueda de Google y Maps. Quizá tengas una empresa que quiera integrar Business Messages directamente, trabajes en un proveedor de software independiente que cree soluciones de mensajería para las empresas con las que trabajas o quizás te hayas encontrado con Business Messages y quieras explorar la plataforma.
Independientemente de lo que te haya traído aquí, este codelab es una manera fantástica de comenzar. Al final del proceso, tendrás tu primer agente digital con el que los usuarios podrán interactuar. Cuando tengas todo listo para publicar tus mensajes con Business Messages después de perfeccionarte, tendrás el potencial de llegar a millones de clientes.
¿Qué características tiene un buen agente digital?
Business Messages es una plataforma de conversación que proporciona una experiencia similar a la de una app en dispositivos móviles que permite a los consumidores conectarse con las empresas sin instalar una app adicional. Un agente digital es la pieza de lógica con la que interactúan tus clientes. Una aplicación web implementada en la nube o en tu infraestructura administra la lógica. Depende totalmente de ti cómo respondes al usuario. Los mejores agentes brindan contexto para establecer expectativas, mantener la participación de los clientes y brindar funcionalidad para asistir a necesidades empresariales.
Qué compilarás
En este codelab, compilarás un agente digital en Business Messages para una empresa ficticia llamada Bonjour Meal. Este agente digital responderá algunas preguntas simples, como "¿A qué hora cierran?". o "¿Puedo realizar compras en línea?".
En este codelab, los usuarios podrán comprar artículos a través del agente digital, dirigirlos a un procesador de pagos para recaudar dinero y, luego, programar la recolección de sus artículos ficticios en la tienda.
En este codelab, tu app hará lo siguiente:
- Cómo responder preguntas con un chip de sugerencias
- Guía al usuario para que haga preguntas que tu agente digital pueda responder
- Proporciona funciones de conversación enriquecidas para mantener a los usuarios involucrados en la conversación.
Qué aprenderás
- Cómo implementar una aplicación web en App Engine en Google Cloud Platform. Como alternativa, puedes usar ngrok para probar tu aplicación local públicamente.
- Cómo configurar tu cuenta de Business Messages con un webhook de aplicación web para recibir mensajes de los usuarios
- Cómo enviar funciones completas, como tarjetas, carruseles y sugerencias de conversación con la API de Business Messages
- Cómo envía tus mensajes Business Messages
Este codelab se enfoca en la compilación de tu primer agente digital.
Requisitos
- Regístrate para obtener una cuenta de desarrollador gratuita de Business Communications
- Consulta nuestro sitio para desarrolladores a fin de obtener instrucciones sobre cómo hacerlo
- Un dispositivo con Android 5 o una versión posterior, O BIEN un dispositivo iOS con la app de Google Maps
- Tener experiencia en programación de aplicaciones web
- Una conexión a Internet
2. Cómo prepararte
Habilitar las API
Para este codelab, como trabajaremos con una aplicación de Django, nos guiaremos por la API de Cloud Build para implementar la aplicación en App Engine. Como alternativa, si usas ngrok, no es necesario habilitar la API de Cloud Build.
Para habilitar la API de Cloud Build, sigue estos pasos:
- Abre la API de Cloud Build en la consola de Google Cloud.
- Haz clic en Habilitar.
Crear una cuenta de servicio
Debes crear una cuenta de servicio para acceder a las APIs de Business Communications y Business Messages. Sigue los pasos de la documentación para crear una cuenta de servicio en Business Communications Developer Console.
Implementa el código de inicio del EchoBot de Django para Python
En una terminal, clona la Muestra de Django Echo Bot en el directorio de trabajo de tu proyecto con el siguiente comando:
$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code
Copia el archivo de credenciales JSON que creaste para la cuenta de servicio en la carpeta de recursos de la muestra y cambia el nombre de las credenciales a “bm-agent-service-account-credentials.json”.
bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json
En una terminal, navega al directorio del paso 1 de la muestra.
Ejecuta los siguientes comandos en una terminal para implementar la muestra:
$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
- PROJECT_ID es el ID del proyecto que usaste para registrarte en las API.
Observa la URL de la aplicación implementada en el resultado del último comando:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
El código de partida que acabas de implementar contiene una aplicación web con un webhook para recibir mensajes de Business Messages. La aplicación repite los mensajes al usuario y puede mostrar algunas de las funciones completas disponibles en la plataforma de conversación.
Configura tu Webook
Ahora que se implementó el servicio, deberás usar la URL de la aplicación para configurar la URL de tu webhook en la página Configuración de la cuenta de la consola para desarrolladores de Business Communications.
La URL de webhook será la URL de la aplicación y “/devolución de llamada/”. Por ejemplo, podría ser algo como esto: https://PROJECT_ID.appspot.com/callback/
Ve a la página Configuración de la cuenta de Business Communications Console. En la esquina superior derecha, debajo de la barra de navegación, deberías ver el nombre de tu proyecto de GCP. Si ves un menú desplegable, asegúrate de seleccionar tu proyecto de GCP.
Completa los detalles del Punto de contacto técnico y, luego, actualiza Webhook con la URL de webhook para tu aplicación implementada.
Haz clic en Guardar junto a la referencia de tu proyecto de GCP.
3. Crea tu primer agente
Cómo usar la consola para desarrolladores de Business Communications
En Business Communications Console, haz clic en el logotipo de la parte superior izquierda para volver al panel de la consola y, luego, haz clic en Crear agente. Se crea una marca al mismo tiempo que creas tu agente. Selecciona Business Messages para Tipo de agente y asegúrate de que la Información del socio sea correcta.
En Marca, escribe el nombre de la marca que estás creando.La marca es la empresa con la que trabajas, y los consumidores pueden interactuar conversacionalmente con el agente. En Nombre del agente, especifica lo que quieres que vean los usuarios en la conversación de Business Messages. En el caso de la ficticia Bonjour Meal, Bonjour Rail es la empresa ferroviaria que administra los restaurantes de Bonjour Meal. Así que especificaré Bonjour Rail como la marca y Bonjour Meal como el agente.
El agente es la entidad conversacional que representa a la marca.
Haz clic en Crear agente y deja que la consola haga algo de magia. Esta solicitud tarda unos segundos en realizar varias solicitudes a la API de Business Communications para crear la marca y el agente. Puedes usar la API de Business Communications directamente para crear un agente y una marca. Consulta la documentación para ver cómo se vería una solicitud curl con el objetivo de que hiciera las mismas acciones que la consola.
Tener tu primera conversación
Abre el agente que acabas de crear y verás la página Overview, en la que podrás comenzar a revisar los detalles del agente. Consulta las URLs de prueba del agente. Estas URLs se usan para invocar la plataforma de conversación en tu dispositivo.
Para copiar la URL de prueba, haz clic en cualquiera de los chips. Por supuesto, copia la URL de prueba del dispositivo que tengas a mano para realizar la prueba. Envía este mensaje copiado a tu dispositivo como quieras.
Una vez que estés en tu dispositivo móvil, si presionas el vínculo, se invocará el selector de agentes de Business Messages con la URL de prueba de tu agente prepropagada.
Presiona Iniciar para invocar la plataforma de conversación de tu agente.
Interactúa con el agente y hazte una idea de lo que es capaz de hacer. En su mayoría, deberías notar que la plataforma de conversación solo replicará tus mensajes. Envíale un mensaje como "Hello, World!" El agente te enviará el mismo mensaje.
La aplicación implementada también contiene cierta lógica para mostrar las funciones enriquecidas disponibles en Business Messages.
- Si envías "tarjeta", invocarás una tarjeta enriquecida
- Si envías "chips", se invocarán chips de sugerencias.
- Si envías "carrusel", invocarás el carrusel de tarjetas enriquecidas
¡Felicitaciones! Esta es la conversación inaugural del agente contigo.
Cada una de las funciones enriquecidas se puede usar para proporcionar un mejor contexto a la persona que se comunica con tu agente. Envía recursos gráficos en tarjetas enriquecidas para comunicar mejor las ideas o usa chips de sugerencias para guiar la conversación.
Actualiza el mensaje de bienvenida y usa los chips de conversación
Practiquemos un poco con la Consola para desarrolladores, veamos cómo editar el mensaje de bienvenida del agente y cómo aprovechar los chips de sugerencias para ayudar a los usuarios a comunicarse.
Dirígete a la página Descripción general del agente y selecciona Información del agente. Desplázate hacia abajo hasta la sección de mensajes de bienvenida y de temas de conversación.
Actualiza el mensaje de bienvenida (el campo de entrada amarillo) para que lea lo siguiente:
Te damos la bienvenida al agente inicial de Bonjour Meal. Puedo hacer eco de tus mensajes y mostrarte algunas de las funciones avanzadas compatibles con la plataforma. ¡Pruébala!
Haz clic en + Agregar tema de conversación como se indica en el cuadro púrpura de la imagen anterior para agregar temas de conversación que invoquen chips de sugerencias, el carrusel y la tarjeta. Los disparadores de conversación que agregues necesitan un componente de texto y un componente de notificación de conversión. El texto es lo que se muestra al usuario, mientras que los datos de notificación de conversión son los que se envían al webhook de tu agente. El webhook analiza los datos de notificación de conversión y envía la respuesta adecuada al usuario. 
La Información del agente en la consola se ve así después de la modificación:
En el lado derecho de la consola, verás una vista previa de cómo se verá el agente. ¿Notas cómo el mensaje de bienvenida refleja lo que acabas de cambiar y las fichas de sugerencias que hay debajo?
Esta es una gran herramienta para tener una idea de cómo será la experiencia del usuario. Puedes usarlo mientras compilas tu agente y planificas los recorridos del usuario que deseas respaldar.
Lamentablemente, no podremos ver estos cambios reflejados en la conversación de inmediato, ya que los datos anteriores se almacenan en caché en la infraestructura de Business Messages. La caché se borra aproximadamente cada 2 horas, por lo que deberías poder probarlo mañana.
Mientras tanto, veamos cómo funciona todo.
4. Analiza el código de partida
Una vista de 3,000 metros del código fuente
El código de partida que implementaste repite los mensajes a los usuarios y puede presentar una tarjeta enriquecida, un carrusel o chips de sugerencias. Analicemos con más detalle el código fuente para poder comprender cómo funciona. Luego, descubriremos qué debemos cambiar.
El código de partida es un proyecto de Django. En una parte posterior de esta serie de codelabs, usaremos Google Datastore para conservar datos como carritos de compras y conversaciones asociadas. No te preocupes si no has usado Django; es bastante sencillo, y al final de este codelab habrás aprendido cómo funciona.
En un nivel alto, Django enrutará las URLs a las vistas, y la lógica de vista produce una plantilla que se renderiza en el navegador. Veamos el archivo urls.py del proyecto.
bm-django-echo-bot/bmcodelab/urls.py [Líneas 31 a 37]
from django.urls import include, path
import bopis.views as bopis_views
urlpatterns = [
path('', bopis_views.landing_placeholder),
path('callback/', bopis_views.callback),
]
Aquí se definen dos rutas, por lo que Django puede ejecutar lógica si se reconocen esas dos URL. Si la URL del proyecto es https://PROJECT_ID.appspot.com/, las rutas que conoce el proyecto son las siguientes:
- https://PROJECT_ID.appspot.com/
- https://PROJECT_ID.appspot.com/callback/
Ambas rutas de URL hacen referencia a bopis_views, que es de bopis/views.py. Veamos lo que sucede en este archivo. Para comenzar, entendamos primero bopis_views.landing_placeholder.
bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [Líneas 302-309]
...
def landing_placeholder(request):
return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
<br/><br/>
To message your Bonjour Meal agent, go to the Developer Console and retrieve
the Test URLs for the agent you have created as described in the codelab
<a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...
Tu servidor web ejecuta esta lógica cuando recibe una solicitud web que apunta a la raíz del proyecto. En este caso, no ocurre nada demasiado sofisticado: simplemente devolvemos una respuesta HTTP que contiene código HTML al navegador que realizó la solicitud. Así que, sí, puedes abrir la URL raíz del proyecto, pero no hay mucho que hacer cuando vuelves a este codelab.
La otra URL enruta a una función llamada callback, también en bopis/views.py. Veamos esa función.
bm-django-echo-bot/bopis/views.py [Líneas 60 a 101]
...
def callback(request):
"""
Callback URL. Processes messages sent from user.
"""
if request.method == "POST":
request_data = request.body.decode('utf8').replace("'", '"')
request_body = json.loads(request_data)
print('request_body: %s', request_body)
# Extract the conversation id and message text
conversation_id = request_body.get('conversationId')
print('conversation_id: %s', conversation_id)
# Check that the message and text body exist
if 'message' in request_body and 'text' in request_body['message']:
message = request_body['message']['text']
print('message: %s', message)
route_message(message, conversation_id)
elif 'suggestionResponse' in request_body:
message = request_body['suggestionResponse']['postbackData']
print('message: %s', message)
route_message(message, conversation_id)
elif 'userStatus' in request_body:
if 'isTyping' in request_body['userStatus']:
print('User is typing')
elif 'requestedLiveAgent' in request_body['userStatus']:
print('User requested transfer to live agent')
return HttpResponse("Response.")
elif request.method == "GET":
return HttpResponse("This webhook expects a POST request.")
...
Aquí, la lógica analiza el cuerpo de la solicitud de un message o suggestionResponse y pasa esa información a una función llamada route_message. Luego, devuelve una HttpResponse a la infraestructura de Business Messages para confirmar la recepción del mensaje.
Esta es una función importante. Esta lógica es el webhook de tu aplicación web, que recibe mensajes de usuarios que interactúan con tu agente. Puedes extender el webhook para enviar mensajes a una herramienta de automatización como Dialogflow a fin de comprender lo que podría decir un usuario y producir una respuesta a partir de esa inferencia. También puedes reenviar el mensaje para que el usuario pueda conectarse con un agente humano. Observa el siguiente diagrama:
Business Messages envía el contenido del mensaje como una carga útil de JSON a tu webhook, que se enruta a un agente humano o a alguna lógica para responder como un bot. Ese mecanismo de enrutamiento, en nuestro caso aquí, es route_message. Veamos.
bm-django-echo-bot/bopis/views.py [Líneas 105-122]
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
else:
echo_message(message, conversation_id)
...
Esta lógica comienza a examinar el mensaje que recibió el usuario. En primer lugar, se normaliza el mensaje reduciendo todos los caracteres. Una vez normalizado, comprueba si el mensaje es alguna de las constantes definidas en la parte superior del archivo.
bm-django-echo-bot/bopis/views.py [Líneas 40-42]
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...
Es decir, el bot analiza los mensajes que contienen específicamente cualquiera de las cadenas que colocamos en el postback_data de los activadores de conversación del paso anterior de este codelab. Si no aparece ninguna de esas cadenas, simplemente pasa el mensaje a una función llamada echo_message, que puedes imaginar que repetiría los mensajes.
Cómo enviar mensajes
Entonces, a estas alturas, deberías tener una idea de cómo recibe los mensajes la aplicación web. Todo esto se hace con el webhook.
Pero ¿cómo envía la app un mensaje saliente a un usuario con Business Messages?
Cuando tu infraestructura responde al usuario, debes enviar la respuesta a la API de Business Messages, que entrega el mensaje al usuario.
La API de Business Messages tiene bibliotecas en Python, Node.js y Java. También tenemos una API de REST a la que puede realizar solicitudes directamente si su infraestructura no está en un lenguaje para el que tengamos una biblioteca. Consulta Cómo enviar mensajes para ver cómo se usa cURL para enviar un mensaje a un ID de conversación específico.
A los fines de este codelab, nos enfocaremos en el uso de la biblioteca cliente de Python que ya está integrada en el código de partida de Bonjour Meal que se implementó en App Engine en tu proyecto de GCP, o en la ejecución local a través de ngrok.
Observemos la función echo_message y veamos cómo interactuamos con la API para enviar el mensaje a Business Messages.
bm-django-echo-bot/bopis/views.py [Líneas 199-212]
...
def echo_message(message, conversation_id):
'''
Sends the message received from the user back to the user.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text=message)
send_message(message_obj, conversation_id)
...
En esta función, se crea una instancia de BusinessMessagesMessage con la variable de mensaje que se pasa a la función echo_message. Una vez que se crea una instancia, el objeto se pasa a send_message junto con el ID de la conversación.
bm-django-echo-bot/bopis/views.py [Líneas 214-236]
...
def send_message(message, conversation_id):
'''
Posts a message to the Business Messages API, first sending
a typing indicator event and sending a stop typing event after
the message has been sent.
Args:
message (obj): The message object payload to send to the user.
conversation_id (str): The unique id for this user and agent.
'''
credentials = ServiceAccountCredentials.from_json_keyfile_name(
SERVICE_ACCOUNT_LOCATION,
scopes=['https://www.googleapis.com/auth/businessmessages'])
client = bm_client.BusinessmessagesV1(credentials=credentials)
# Create the message request
create_request = BusinessmessagesConversationsMessagesCreateRequest(
businessMessagesMessage=message,
parent='conversations/' + conversation_id)
bm_client.BusinessmessagesV1.ConversationsMessagesService(
client=client).Create(request=create_request)
...
Todo lo que hace la función send_message es usar las credenciales de tu cuenta de servicio para verificar que puedas enviar mensajes a esta conversación, crear una instancia de un cliente de Business Messages y crear una solicitud para enviar el mensaje al conversation ID determinado.
Las funciones enriquecidas también usan la función send_message, pero los mensajes que crean son específicos de las tarjetas enriquecidas, los carruseles y los chips de sugerencias. Las tarjetas enriquecidas y los carruseles pueden incluir recursos gráficos, mientras que los chips de sugerencias tienen postback_data para que la lógica de devolución de llamada pueda analizarla correctamente.
Ahora que vimos cómo enviar un mensaje, investiga cómo la muestra envía tarjetas enriquecidas, carruseles y chips de sugerencias. En la siguiente sección, modificaremos el código fuente para enviar mensajes con algunas de estas funciones enriquecidas.
Cuando esté todo listo, personalicemos el agente de Bonjour Meal.
5. Personaliza tu agente
Si seguiste el codelab hasta ahora, deberías ver nuestro hermoso agente.
Bueno, no es tan hermoso, se ve un poco desnudo y, en realidad, no representa muy bien a nuestro negocio. Por suerte, tenemos un conocimiento fundamental del código que respalda al agente y contamos con las herramientas que necesitamos para personalizar nuestro agente de la forma que queramos.
En el resto de este codelab, extenderemos el agente con lo siguiente:
- Incluye un logotipo real.
- Mensaje de bienvenida mejorado
- Proporciona información sobre el horario de atención
- Informa al usuario que pronto estará disponible la compra de artículos en línea
- Uso de chips de sugerencias conversacionales para facilitar la conversación.
Aprovecharemos la consola de Business Communications para que nos ayude a actualizar el logotipo y el mensaje de bienvenida, pero siempre tendrás la opción de usar directamente las APIs de Business Communications para hacer lo mismo. Luego, tendremos que actualizar el código fuente para enviar mensajes apropiados para brindar información sobre el horario de atención, y Bonjour Meal pronto ofrecerá una función de compras en línea. Cuando hayas terminado, volveremos a Business Communications Console y crearemos chips de sugerencias conversacionales para ayudar a guiar la conversación hacia las experiencias de camino ideal que admite el agente digital.
Incluye un logotipo
En la consola de Business Communications, selecciona tu agente y ve a Información del agente. Se recomienda actualizar el logotipo de la empresa, como se indica en amarillo a continuación.
Haz clic en Subir y podrás seleccionar una imagen para subirla o importarla desde una URL.
Consulta los lineamientos de diseño de logotipos en la documentación para obtener información sobre las prácticas recomendadas a la hora de usar tus propios logotipos.
Subamos el logotipo ubicado en el código fuente que clonaste al comienzo de este codelab. Puedes encontrarlo en el directorio ./assets/ del repositorio. El archivo se llama "bonjour_meal-logo.png". Puedes arrastrar el archivo a la ventana modal del navegador web. Se mostrará una herramienta de edición ligera para manipular la calidad y el recorte de la imagen. Ajusta la resolución de la imagen y recorta la imagen para que sea inferior o igual a la restricción de 50 KB. Cuando estés conforme con la imagen, haz clic en la marca de verificación del círculo azul para confirmar y, luego, haz clic en Seleccionar, en la parte inferior de la ventana modal.
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. Este es un cambio que demorará un tiempo en reflejarse en tu dispositivo, ya que la información del agente se almacena en caché en nuestros servidores y debería estar visible dentro de las dos horas posteriores al cambio.
Actualiza el mensaje de bienvenida
La actualización del mensaje de bienvenida es algo que ya hicimos anteriormente en este codelab. Volvamos a hacerlo, pero esta vez configura un mensaje de bienvenida más aplicable al recorrido del usuario de Bonjour Meal.
En Business Communications Console, selecciona tu agente y ve a Información del agente. Desplázate hacia abajo hasta que veas el campo de entrada Mensaje de bienvenida en el que podrás actualizar el mensaje.
Como sabemos que agregaremos temas de conversación, podemos hacer referencia a ellos en nuestro mensaje de bienvenida. En el campo de entrada, vamos a reemplazarlo por el siguiente texto:
"Bienvenido a Bonjour Meal. Soy un asistente que puede ayudarte con las preguntas que tengas sobre Bonjour Meal. Prueba alguna de las siguientes opciones".
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. De nuevo, este cambio tardará un tiempo en reflejarse debido a nuestro mecanismo de almacenamiento en caché para asegurarnos de que todo sea ágil.
Proporcionar información sobre el horario de atención
Para proporcionar esta información a los usuarios, les enviaremos un mensaje personalizado con la API de Business Messages.
Quizás recuerdes que los mensajes se analizan en la función route_message de views.py. Primero, la función normaliza la cadena y, luego, comienza a comprobar si el mensaje normalizado coincide con alguno de los parámetros hard-coded. Para simplificar, agregaremos una condición adicional en la que comprobemos si el mensaje normalizado es igual a una nueva constante a la que llamaremos CMD_BUSINESS_HOURS_INQUIRY y contendrá el valor "business-hours-verification". Si la condición se evalúa como verdadera, invocaremos una función llamada send_message_with_business_hours.
La función route_message ahora se verá de la siguiente manera:
bm-django-echo-bot/bopis/views.py
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
else:
echo_message(message, conversation_id)
...
Para que el código funcione, tendremos que hacer dos cambios más: La primera es definir CMD_BUSINESS_HOURS_INQUIRY junto con las otras constantes, la segunda es definir la función send_message_with_business_hours y enviar un mensaje con la API de Business Messages.
Primero, definamos la constante en la parte superior del archivo con las otras declaraciones de la constante:
bm-django-echo-bot/bopis/views.py
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...
Y ahora, para definir send_message_with_business_hours. Puedes definir esta función en cualquier parte del archivo con la sintaxis de Python correspondiente. Como esta función simplemente envía un mensaje, al igual que echo_message, puedes usarla como plantilla para definir esta función.
bm-django-echo-bot/bopis/views.py
...
def send_message_with_business_hours(conversation_id):
message = '''Thanks for contacting us! The hours for the store are:\n
MON 8am - 8pm\n
TUE 8am - 8pm\n
WED 8am - 8pm\n
THU 8am - 8pm\n
FRI 8am - 8pm\n
SAT 8am - 8pm\n
SUN 8am - 8pm
'''
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text=message)
send_message(message_obj, conversation_id)
...
De esta manera, nuestro bot debería poder responder con este horario de atención al usuario cuando envíe el siguiente mensaje: "business-hours-verification". Esto es lo que puedes esperar:
Una vez que implementes el código fuente en GCP, los cambios serán visibles de inmediato. No almacenamos en caché la aplicación web en Google Cloud Platform de la misma manera en que se almacena en caché la información del agente, por lo que podrás probar esta experiencia de inmediato.
Si bien estamos haciendo cambios en el código fuente, vamos a hacer una modificación más que le permitirá al usuario preguntar acerca de las compras en línea. Tu agente digital te responderá diciendo que la función aún no está disponible. Regresa más tarde.
Informa al usuario que pronto habrá compras en línea
Realizaremos una modificación similar a la que hicimos para informar al usuario sobre el horario de atención. Esta vez, colocaremos la información en una tarjeta enriquecida junto con una imagen atractiva.
Analiza el mensaje normalizado y verifica una condición para una constante llamada CMD_ONLINE_SHOPPING_INQUIRY con el valor establecido como "online-shopping-query" que invoca send_online_shopping_info_message si la condición es verdadera.
bm-django-echo-bot/bopis/views.py
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
send_online_shopping_info_message(conversation_id)
else:
echo_message(message, conversation_id)
...
Ahora, define send_online_shopping_info_message. Queremos que este mensaje se envíe en una tarjeta enriquecida con una imagen, así que copiaremos la función send_rich_card para usarla como plantilla y definir send_online_shopping_info_message.
Primero, debemos actualizar el texto de resguardo para que tenga un mensaje adecuado. El texto alternativo se usa si el dispositivo no puede recibir una tarjeta enriquecida por algún motivo. Luego, debemos actualizar BusinessMessagesRichCard para que incluya un título, una descripción, sugerencias y un campo multimedia relevantes. Nuestra función debería verse de la siguiente manera:
bm-django-echo-bot/bopis/views.py
...
def send_online_shopping_info_message(conversation_id):
fallback_text = ('Online shopping will be available soon!')
rich_card = BusinessMessagesRichCard(
standaloneCard=BusinessMessagesStandaloneCard(
cardContent=BusinessMessagesCardContent(
title='Online shopping info!',
description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
suggestions=[],
media=BusinessMessagesMedia(
height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
contentInfo=BusinessMessagesContentInfo(
fileUrl=SAMPLE_IMAGES[4],
forceRefresh=False
))
)))
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
richCard=rich_card,
fallback=fallback_text)
send_message(message_obj, conversation_id)
...
¡Muy bien! Nuestro agente digital ahora puede responder a las consultas de los usuarios sobre las compras en línea. Por ahora, nuestro agente digital aún no admite compras en línea, por lo que enviamos un mensaje al usuario para informarle que la función estará disponible próximamente. Así se ve nuestro agente digital cuando el usuario consulta sobre cómo comprar en línea.
Al igual que el cambio anterior que hicimos para permitir que un usuario consulte sobre el horario de atención, este cambio se puede ver de inmediato si utilizas ngrok o tan pronto como implementas el código en App Engine de GCP.
En la próxima parte, usaremos disparadores de conversación y chips de sugerencias para guiar la conversación hacia el camino ideal.
Cómo usar chips para guiar la conversación
Realizamos algunos cambios en el código fuente e implementamos el agente digital actualizado, pero nunca esperaríamos que los usuarios escriban "consulta del horario de atención". o “online-shopping-info” para preguntar sobre la empresa. Actualicemos los disparadores de conversación para que, cuando se abra la conversación, el usuario no solo reciba un lindo mensaje de bienvenida, sino que también se presenten temas de conversación.
Dirígete a la Consola de Business Communications y accede a la página Información del agente. Anteriormente, definimos disparadores de conversación para "chips", "tarjeta" y "carrusel". Si bien estas herramientas siguen funcionando, ya no son relevantes para nuestra función comercial. Puedes dejarlos allí para seguir mostrando estas funciones enriquecidas o quitarlas para que tu agente digital muestre temas de conversación específicamente para el negocio Bonjour Meal.
Crearemos dos temas de conversación nuevos. Para la primera, configura el texto como "¿Cuál es tu horario de atención?". y configura los datos de notificación de conversión como "business-hours-verification". Para el segundo tema de conversación, configura el texto como "¿Puedo hacer compras aquí?". y configura los Datos de notificación de conversión como "online-shopping-info".
El resultado debería ser la configuración que se muestra en la siguiente captura de pantalla:
Al igual que con otros cambios realizados en Business Communications Console, este proceso tardará un tiempo en propagarse antes de que puedas ver los cambios realizados en tu dispositivo móvil.
Ahora que terminamos con los disparadores de conversación, también necesitaremos una forma de guiar al usuario por un camino ideal una vez que la conversación haya comenzado. Es posible usar chips contextualmente después de que se envía un mensaje para guiar al usuario a otras funciones que admite el agente digital. Enviaremos un mensaje con una sugerencia de hacer algo más con el agente cada vez que el usuario consulte sobre el horario de atención o las compras en línea.
Al final de la función, agrega lo siguiente:
bm-django-echo-bot/bopis/views.py
...
def send_online_shopping_info_message(conversation_id):
...
# at the end of the function, send a message with suggestions
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text='Let us know how else we can help you:',
fallback='Please let us know how else we can help you.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Business hours',
postbackData='business-hours-inquiry')
),
])
send_message(message_obj, conversation_id)
...
# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
# at the end of the function, send a message with suggestions
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text='Let us know how else we can help you:',
fallback='Please let us know how else we can help you.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Can I purchase online?',
postbackData='online-shopping-inquiry')
),
])
send_message(message_obj, conversation_id)
...
Ten en cuenta que el campo de texto de BusinessMessagesSugerencias tiene un límite de 25 caracteres, como se describe en la documentación.
Con temas de conversación actualizados y el uso estratégico de chips de sugerencias, estas son algunas capturas de pantalla de la experiencia del usuario esperada.
6. Felicitaciones
Felicitaciones, creaste correctamente tu primer agente digital de Business Messages.
Implementaste una aplicación web para admitir tu agente digital en Business Messages, utilizaste la consola de Business Communications para modificar el agente y moldeaste la experiencia del usuario con un agente digital realizando cambios en el código fuente.
Ahora conoces los pasos clave que debes seguir para crear una experiencia interactiva de Business Messages y las posibilidades a partir de este momento son emocionantes. Puedes ampliar tu agente para que admita la búsqueda de inventario o presentar un carrito de compras para hacer un seguimiento de lo que podría interesarle al usuario. Podrías usar un carrusel para mostrar elementos del menú y, mediante sugerencias, permitir que el usuario seleccione los artículos que le interesan.
Aquí tienes un avance de lo que podría verse.
¿Cómo puedo desarrollar una experiencia de conversación excelente?
Los mejores agentes proporcionan información contextual a los usuarios y, al mismo tiempo, les brindan funciones durante la conversación para que puedan participar e interactuar con la empresa como lo harían normalmente por teléfono o incluso en persona. Piensa en cómo podrían aplicarse los siguientes temas a una conversación que te gustaría tener con una empresa con la que trabajas.
Proporcionar contexto y establecer expectativas
Proporcionar contexto puede ser cualquier cosa, desde indicar explícitamente cómo puedes ayudar al usuario hasta presentar al agente digital con una persona con la que el usuario pueda identificarse. Los agentes exitosos en Business Messages usan el avatar de representación para mostrarle al usuario con quién están hablando.
Establecer las expectativas depende de la experiencia del usuario que estés creando. Por ejemplo, si tu agente admite la búsqueda de inventario, primero debes informar al usuario que la disponibilidad puede ser baja antes de proporcionar la respuesta.
Proporciona funciones al usuario
Los consumidores se conectan con las empresas todo el tiempo. Desde consultas como comprobar el estado de un pedido hasta comprobar si un artículo está en stock, Business Messages puede brindar asistencia a interacciones complejas con los usuarios. Muchos usuarios siguen llamando a las empresas por teléfono para obtener respuestas a sus preguntas, incluso si las respuestas están disponibles en su sitio web. Como resultado, las empresas deben invertir más recursos para manejar el volumen de llamadas, en especial durante las festividades.
Mantén la atención de los usuarios
Proporciona puntos de contacto conversacionales para que el usuario siga participando en la conversación. Entre mensajes, puedes invocar indicadores de escritura para indicarle al usuario que estás procesando una respuesta para él.
Con funciones enriquecidas, como indicadores de escritura, chips de sugerencias, tarjetas enriquecidas y carruseles, puedes guiar al usuario por las experiencias del usuario de la ruta ideal para ayudarlo a completar ciertas tareas, como hacer un pedido en un menú de elementos. El objetivo es reducir el tráfico de llamadas a la línea telefónica de una empresa.
Es fundamental que una conversación proporcione funcionalidad al usuario. Los usuarios que se conectan con una empresa por mensajería esperan que se respondan sus preguntas rápidamente. En una situación no ideal, el agente digital no puede facilitar la conversación, lo que puede llevar a una mala experiencia del usuario. Afortunadamente, hay formas de solucionar esto, como transferir la conversación a un agente humano, que abordaremos en un codelab futuro.
¿Qué sigue?
Cuando tengas todo listo, consulta algunos de los siguientes temas para obtener información sobre las interacciones más complejas que puedes lograr en Business Messages.
- La vida de un agente: Creación para lanzamiento
- Requisitos y lineamientos
- Lineamientos del logotipo
- Todas las guías
Documentos de referencia
- SuggestedReply
- Documento de referencia de Message de Business Messages
- Definición de JSON para RichCard