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 con los Mensajes de Negocio, que permite a los clientes conectarse con las empresas que administras a través de la Búsqueda de Google y Maps. Es posible que tengas una empresa y quieras integrarla directamente con Business Messages, o tal vez trabajes para un proveedor de software independiente que crea soluciones de mensajería para las empresas con las que trabajas, o tal vez te hayas topado con Business Messages y quieras probar la plataforma.
Independientemente de lo que te haya traído aquí, este codelab es una forma fantástica de comenzar. Al final, tendrás tu primer agente digital con el que los usuarios podrán interactuar. Cuando tengas todo listo para lanzar tu cuenta de Business Messages después de pulirla un poco más, tendrás la posibilidad de llegar a millones de clientes.
¿Qué características tiene un buen agente digital?
Los mensajes de la empresa son 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 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 completamente de ti cómo respondas al usuario. Los mejores agentes proporcionan contexto para establecer expectativas, mantener la participación de los clientes y ofrecer funcionalidad para satisfacer las necesidades de los usuarios.
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 comprar en línea?".
En este codelab, tus usuarios podrán comprar artículos a través del agente digital, dirigir al usuario a un procesador de pagos para que recaude dinero y, luego, programar la retirada de sus artículos ficticios en la tienda.
En este codelab, tu app hará lo siguiente:
- Responde 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 al usuario interesado 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 de forma pública.
- 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 enriquecidas, como tarjetas, carruseles y sugerencias de conversación con la API de Business Messages
- Cómo se envían tus mensajes con los Mensajes de Negocio
Este codelab se enfoca en compilar tu primer agente digital.
Requisitos
- Regístrate para obtener una cuenta de desarrollador de Comunicaciones Empresariales gratuita
- Consulta nuestro sitio para desarrolladores a fin de obtener instrucciones sobre cómo hacerlo
- Un dispositivo Android con la versión 5 o una posterior, O 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
En este codelab, como trabajaremos con una aplicación de Django, usaremos 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, haz lo siguiente:
- 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 que se indican en la documentación para crear una cuenta de servicio en la consola de desarrolladores de Business Communications.
Cómo implementar el código de partida de Django Python EchoBot
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 enriquecidas disponibles en la plataforma de conversación.
Configura tu libro electrónico
Ahora que se implementó tu servicio, usarás la URL de la aplicación para configurar la URL del webhook en la página Configuración de la cuenta de la Developer Console de Business Communications.
La URL del webhook será la URL de la aplicación + "/callback/". Por ejemplo, podría ser algo como lo siguiente: https://PROJECT_ID.appspot.com/callback/
Ve a la página Configuración de la cuenta de la Consola de comunicaciones empresariales. 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 del webhook de 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 de desarrollador de Comunicaciones Empresariales
En la Consola de comunicaciones empresariales, haz clic en el logotipo de la esquina superior izquierda para volver al panel de la consola y, luego, en Crear agente. Creas una marca al mismo tiempo que creas tu agente. Selecciona Mensajes de la empresa 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 de forma conversacional con el agente. En Nombre del agente, especifica lo que quieres que los usuarios vean en la conversación de Business Messages. En el caso de la empresa ficticia Bonjour Meal, Bonjour Rail es la empresa ferroviaria que administra los restaurantes Bonjour Meal. Por lo tanto, especificaré Bonjour Rail como la marca y Bonjour Meal como el agente.
El agente es la entidad de conversación que representa a la marca.
Haz clic en Crear agente y deja que la consola haga 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 de curl para hacer lo mismo que hace la consola.
Ten tu primera conversación
Abre el agente que acabas de crear. Verás la página Descripción general, que te permitirá 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 para el dispositivo que tienes a mano para realizar la prueba. Envía este mensaje copiado a tu dispositivo de la forma que quieras.
Una vez que estés en tu dispositivo móvil, presiona el vínculo para invocar el selector de agentes de Business Messages con la URL de prueba del agente propagada previamente.
Presiona Launch para invocar la plataforma de conversación de tu agente.
Interactúa con el agente y hacerte una idea de lo que es capaz de hacer. En general, la plataforma de conversación solo repetirá tus mensajes. Envía un mensaje como “Hola, mundo” y verás que el agente te enviará ese mismo mensaje.
La aplicación implementada también contiene cierta lógica para mostrar las funciones enriquecidas disponibles en Business Messages.
- Si envías "card", invocarás una tarjeta enriquecida.
- Si envías "chips", invocarás chips de sugerencias.
- Si envías "carousel", invocarás un carrusel de tarjetas enriquecidas.
¡Felicitaciones! Esta es la conversación inaugural de tu 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 chips de conversación
Practiquemos con la Consola de Play Console y veamos cómo editar el mensaje de bienvenida del agente y aprovechar los chips de sugerencias para ayudar al usuario a comunicarse.
Ve 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 temas de conversación.
Actualiza el mensaje de bienvenida (el campo de entrada amarillo) para que diga lo siguiente:
Te damos la bienvenida al agente de inicio de Bonjour Meal. Puedo repetir tus mensajes y mostrarte algunas de las funciones enriquecidas que admite la plataforma. Prueba estas sugerencias.
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 sugerencia, carruseles y tarjetas. Los generadores de conversación que agregues necesitan un componente de texto y un componente de postbackData. El texto es lo que se muestra al usuario, mientras que los datos de postBack son los que se envían al webhook de tu agente. El webhook analiza los datos de la notificación de conversión y envía la respuesta adecuada al usuario. 
La información del agente en la consola se verá de la siguiente manera 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. ¿Observas cómo el mensaje de bienvenida refleja el texto que acabas de cambiar y los chips de sugerencias que se encuentran 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 de los usuarios que deseas admitir.
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 los Mensajes para Negocio. La caché se borra aproximadamente cada 2 horas, por lo que deberías poder probar esto mañana.
Mientras tanto, veamos cómo funciona todo en el interior.
4. Cómo analizar el código de partida
Una vista panorámica 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 en más detalle el código fuente para comprender cómo funciona. Luego, averiguaremos qué necesitaremos cambiar.
El código de partida es un proyecto de Django. Más adelante en esta serie de codelabs, usaremos Google Datastore para conservar datos, como los carritos de compras y las conversaciones asociadas. No te preocupes si nunca antes usaste Django. Es bastante sencillo y, al final de este codelab, aprenderás cómo funciona.
En términos generales, Django enrutará las URLs a las vistas, y la lógica de la vista producirá una plantilla que se renderizará 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 para que Django pueda ejecutar la lógica si se reconocen esas dos URLs. Dado que 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 proviene de bopis/views.py. Veamos qué sucede en este archivo. Para comenzar, primero comprendamos 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 este fragmento de lógica cuando recibe una solicitud web que apunta a la raíz del proyecto. No sucede nada demasiado sofisticado aquí: simplemente devolvemos una HTTPResponse que contiene un poco de HTML al navegador que realizó la solicitud. Por lo tanto, sí, puedes abrir la URL raíz del proyecto, pero no hay mucho que hacer allí, ya que te redirecciona a este codelab.
La otra URL se dirige a una función llamada callback, también en bopis/views.py. Veamos esa función.
bm-django-echo-bot/bopis/views.py [Lines 60-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.")
...
La lógica aquí analiza el cuerpo de la solicitud en busca de un message o una suggestionResponse y pasa esa información a una función llamada route_message. Luego, muestra una HttpResponse a la infraestructura de mensajes empresariales para confirmar la recepción del mensaje.
Esta es una función importante. Este fragmento de lógica es el webhook de tu aplicación web, que recibe mensajes de los usuarios que interactúan con tu agente. Puedes extender el webhook para enviar mensajes a una herramienta de automatización, como Dialogflow, para comprender lo que puede estar diciendo un usuario y generar una respuesta a partir de esa inferencia. También puedes reenviar el mensaje para que el usuario se comunique con un agente en vivo. Consulta el siguiente diagrama:
Los mensajes de la empresa envían el contenido del mensaje como una carga útil de JSON a tu webhook, donde se enruta a un agente en vivo o a alguna lógica para responder como un bot. Ese mecanismo de enrutamiento, en nuestro caso, es route_message. Veamos.
bm-django-echo-bot/bopis/views.py [Lines 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)
...
Este fragmento de lógica comienza a examinar el mensaje que recibió el usuario. Primero, se normaliza el mensaje cambiando todos los caracteres a minúsculas. Una vez que se normaliza, verifica si el mensaje es alguna de las constantes definidas en la parte superior del archivo.
bm-django-echo-bot/bopis/views.py [Lines 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 generadores 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, como puedes imaginar, repetiría los mensajes.
Cómo enviar mensajes
A estas alturas, deberías tener una idea de cómo la aplicación web recibe los mensajes. El webhook hace todo el trabajo.
Pero, ¿cómo envía la aplicación un mensaje saliente a un usuario con Business Messages?
Cuando tu infraestructura responde al usuario, envías 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 puedes realizar solicitudes directamente si tu infraestructura no está en un lenguaje para el que tenemos 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.
Para este codelab, nos enfocaremos en usar 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 que se ejecuta de forma local a través de ngrok.
Analicemos 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 [Lines 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 la instancia, el objeto se pasa a send_message junto con el ID de conversación.
bm-django-echo-bot/bopis/views.py [Lines 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 puedes enviar mensajes a esta conversación, crear una instancia de un cliente de Mensajes de Negocio y crear una solicitud para enviar el mensaje al conversation ID determinado.
Las funciones enriquecidas también usan esta 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 analizarlos de forma adecuada.
Ahora que vimos cómo enviar un mensaje, investiga cómo el ejemplo 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 este punto, deberíamos ver a nuestro hermoso agente.
Bueno, no es tan bonita, en realidad se ve un poco deslucida y no representa muy bien a nuestra empresa. Por suerte, tenemos conocimientos básicos del código que admite el agente y las herramientas que necesitamos para personalizarlo de la forma que deseemos.
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 podrá comprar artículos en línea
- Uso de chips de sugerencias de conversación para facilitar la conversación
Aprovecharemos Business Communications Console para actualizar el logotipo y el mensaje de bienvenida, pero siempre tienes la opción de usar las APIs de Business Communications directamente para hacer lo mismo. Luego, tendremos que actualizar el código fuente para enviar los mensajes adecuados que proporcionen información sobre el horario de atención y que Bonjour Meal pronto ofrecerá una función de compras en línea. Cuando terminemos, volveremos a la Consola de comunicaciones empresariales y crearemos chips de sugerencias de conversación para guiar la conversación hacia las experiencias de recorrido ideal que admite el agente digital.
Cómo incluir un logotipo
En la Business Communications Console, selecciona tu agente y ve a Información del agente. Queremos actualizar el Logotipo de la empresa, como se indica en amarillo a continuación.
Haz clic en Subir para seleccionar una imagen que quieras subir o importar desde una URL.
Consulta los lineamientos de diseño de logotipos en la documentación para conocer las prácticas recomendadas que sugerimos para usar tus propios logotipos.
Subamos el logotipo que se encuentra 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 al cuadro modal del navegador web. Se presentará una herramienta de edición ligera para manipular la calidad de la imagen y recortarla. Ajusta la resolución y el recorte de 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 en el círculo azul para confirmarla y, luego, en Seleccionar en la parte inferior del cuadro modal.
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. Este cambio tardará un tiempo en reflejarse en tu dispositivo, ya que la información del agente se almacena en caché en nuestros servidores y debería ser visible en un plazo de dos horas después del cambio.
Actualiza el mensaje de bienvenida
Ya actualizamos el mensaje de bienvenida antes 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 la Consola de Comunicaciones Empresariales, 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 puedes actualizar el mensaje.
Dado que agregaremos generadores de conversación, podemos hacer referencia a ellos en nuestro mensaje de bienvenida. En el campo de entrada, reemplázalo por el siguiente texto:
"Te damos la bienvenida a Bonjour Meal. Soy un asistente que puede ayudarte con las preguntas que tengas sobre Bonjour Meal. Prueba algunas de las siguientes opciones".
Por último, haz clic en Guardar en la parte superior derecha de la página Información del agente. Una vez más, este cambio tardará un tiempo en reflejarse debido a nuestro mecanismo de almacenamiento en caché para garantizar que todo funcione con rapidez.
Proporciona 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.
Es posible que 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 verificar si el mensaje normalizado coincide con alguno de los parámetros codificados. Para simplificar, agreguemos una condición adicional en la que verifiquemos si el mensaje normalizado es igual a una constante nueva que llamaremos CMD_BUSINESS_HOURS_INQUIRY y que contendrá el valor "business-hours-inquiry". 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. El primero es definir CMD_BUSINESS_HOURS_INQUIRY junto con las otras constantes. El segundo 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 constantes:
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'
...
Ahora, define send_message_with_business_hours. Puedes definir esta función en cualquier parte del archivo, siguiendo la sintaxis de Python adecuada. Como esta función solo envía un mensaje, al igual que echo_message, puedes usarla como plantilla para definirla.
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)
...
Con eso, nuestro bot debería poder responder con este horario de atención al usuario cuando envíe el siguiente mensaje: "business-hours-inquiry". Puedes esperar algo como lo siguiente:
Una vez que implementes el código fuente en GCP, los cambios se verán de inmediato. No almacenamos en caché la aplicación web en Google Cloud Platform de la misma manera que se almacena en caché la información del agente, por lo que podrás probar esta experiencia de inmediato.
Mientras tenemos un poco de impulso para realizar cambios en la fuente, hagamos una modificación más que permita que un usuario consulte sobre compras en línea. El agente digital te responderá que la función aún no está disponible, pero que vuelvas a consultar más tarde.
Informar al usuario que pronto se podrán realizar compras en línea
Haremos una modificación similar a la que hicimos para informar al usuario sobre el horario de atención. Esta vez, coloquemos 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 en "online-shopping-inquiry", que invoca a 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 copiemos 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 de resguardo se usa si el dispositivo no puede recibir una tarjeta enriquecida por algún motivo. A continuación, debemos actualizar BusinessMessagesRichCard para incluir un título, una descripción, sugerencias y un campo de contenido 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 los usuarios que consultan sobre compras en línea. Por ahora, nuestro agente digital aún no admite compras en línea, por lo que le enviamos un mensaje al usuario para informarle que la función estará disponible pronto. Así se ve nuestro agente digital cuando el usuario consulta sobre compras 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 usas ngrok o en cuanto implementes el código en App Engine de GCP.
En la siguiente parte, usaremos activadores de conversación y chips de sugerencia para guiar la conversación hacia la ruta de éxito.
Cómo usar chips para guiar la conversación
Realizamos algunos cambios en el código fuente y, además, implementamos el agente digital actualizado, pero nunca esperamos que los usuarios escriban "consulta-sobre-horario-de-atención" o "información-sobre-compras-en-línea" para consultar sobre la empresa. Actualicemos los generadores de conversación para que, cuando se abra la conversación, el usuario no solo reciba un mensaje de bienvenida agradable, sino que también se le presenten generadores de conversación.
Ve a la consola de Business Communications y accede a la página Información del agente de tu agente. Anteriormente, definimos los generadores de conversación para "chips", "tarjeta" y "carrusel". Si bien siguen funcionando, ya no son relevantes para nuestra función comercial. Puedes dejarlos para seguir mostrando estas funciones enriquecidas o quitarlos para que tu agente digital muestre generadores de conversación específicos para el negocio de Bonjour Meal.
Crearemos dos nuevos generadores de conversación. Para el primero, establece el texto en "¿Cuáles son tus horarios de atención?" y los datos de notificación de conversión en "business-hours-inquiry". Para el segundo activador de conversación, establece el texto en "¿Puedo realizar compras aquí?" y los datos de notificación de conversión en "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 la Consola de Comunicaciones Empresariales, esto tardará un tiempo en propagarse antes de que puedas ver los cambios producidos en tu dispositivo móvil.
Ahora que terminamos con los generadores de conversación, también querremos tener una forma de guiar al usuario a un camino ideal una vez que comience la conversación. Es posible usar chips contextualmente después de que se envía un mensaje para guiar al usuario a otras funciones que puede realizar el agente digital. Por lo tanto, lo que haremos es enviar un mensaje con una sugerencia para que el usuario haga algo más con el agente cada vez que pregunte 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 una BusinessMessagesSuggestion tiene un límite de 25 caracteres, como se describe en la documentación.
Con activadores 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, usaste Business Communications Console para modificar el agente y definiste la experiencia del usuario con un agente digital haciendo cambios en el código fuente.
Ahora conoces los pasos clave necesarios para crear una experiencia interactiva de Business Messages, y las posibilidades a partir de ahora son emocionantes. Tu agente se puede extender para admitir la búsqueda de inventario o incluir un carrito de compras para hacer un seguimiento de lo que podría interesarle al usuario. Puedes usar un carrusel para mostrar los elementos del menú y, con las sugerencias, permitir que el usuario seleccione los elementos que le interesan.
Este es un adelanto de cómo podría verse.
¿Cómo puedo crear una experiencia de conversación excelente?
Los mejores agentes proporcionan información contextual al usuario y, al mismo tiempo, le brindan funcionalidad a través de la conversación para que pueda interactuar con la empresa como lo haría normalmente por teléfono o incluso en persona. Piensa en cómo los siguientes temas podrían aplicarse a una conversación que quieras tener con una empresa con la que trabajas.
Proporciona contexto y establece expectativas
Proporcionar contexto puede ser cualquier cosa, desde indicar explícitamente cómo puedes ayudar al usuario hasta presentar al agente digital con un arquetipo con el que el usuario pueda relacionarse. Los agentes exitosos en los mensajes empresariales usan el avatar representativo para mostrarle al usuario con quién está hablando.
La configuración de expectativas depende de la experiencia del usuario que estés creando. Por ejemplo, si tu agente admite la búsqueda de inventario, primero infórmale al usuario que es posible que la disponibilidad sea baja antes de proporcionar la respuesta.
Proporcionar funcionalidad al usuario
Los consumidores se conectan con las empresas todo el tiempo. Desde consultas como verificar el estado de un pedido hasta comprobar si un artículo está en stock, los Mensajes para Negocio pueden admitir interacciones complejas de los usuarios. Muchos usuarios siguen llamando a las empresas por teléfono para que les respondan sus preguntas, incluso si las respuestas están disponibles en el sitio web de la empresa. Como resultado, las empresas deben invertir más recursos para manejar el volumen de llamadas, especialmente durante las festividades.
Mantén la participación del usuario
Proporciona puntos de contacto de conversación para mantener al usuario en la conversación. Entre mensajes, puedes invocar indicadores de escritura para informarle al usuario que estás procesando una respuesta.
Con funciones enriquecidas, como indicadores de escritura, chips de sugerencias, tarjetas enriquecidas y carruseles, puedes guiar al usuario a través de experiencias de usuario de recorrido ideal para ayudarlo a completar ciertas tareas, como hacer un pedido desde un menú de artículos. El objetivo es reducir el tráfico de llamadas a la línea telefónica de una empresa.
Es fundamental que una conversación le proporcione funcionalidad al usuario. Los usuarios que se conectan con una empresa a través de la 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 generar una mala experiencia del usuario. Afortunadamente, hay formas de evitar esto, como transferir la conversación a un agente en vivo, que abordaremos en un codelab futuro.
¿Qué sigue?
Cuando estés listo, consulta algunos de los siguientes temas para obtener más información sobre interacciones más complejas que puedes lograr en Business Messages
- Ciclo de vida de un agente: De la creación al 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