1. Introdução
Última atualização:11/05/2022
Este é o Business Messages!
Este codelab é uma introdução à integração com o Business Messages, que permite que os clientes se conectem às empresas que você gerencia pela Pesquisa Google e pelo Maps. Talvez você tenha uma empresa que queira fazer a integração direta com o Business Messages, trabalhe em um fornecedor de software independente que cria soluções para as empresas com que trabalha, ou talvez acabou de se deparar com o Business Messages e queira experimentar a plataforma.
Independentemente do que trouxe você aqui, este codelab é uma maneira fantástica de começar. No final, você terá seu primeiro agente digital com que os usuários poderão interagir. Quando estiver tudo pronto para lançar no Business Messages depois de alguns ajustes, você poderá alcançar milhões de clientes.
O que caracteriza um bom agente digital?
O Business Messages é uma plataforma de conversação que oferece uma experiência semelhante a um app em dispositivos móveis, permitindo que os consumidores se conectem às empresas sem instalar outro app. Um agente digital é a lógica com que seus clientes interagem. A lógica é gerenciada por um aplicativo da Web implantado na nuvem ou na sua infraestrutura. Depende de você como você responde ao usuário. Os melhores agentes fornecem contexto para definir expectativas, manter os clientes engajados e fornecer funcionalidade para atender às necessidades dos usuários.
O que você vai criar
Neste codelab, você vai criar um agente digital em Business Messages para uma empresa fictícia chamada Bonjour Meal. Esse agente digital responde a algumas perguntas simples, como "A que horas você fecha?" ou "Posso comprar on-line?".
Neste codelab, seus usuários poderão comprar itens usando o agente digital, direcionar o usuário a um processador de pagamentos para coletar dinheiro e, em seguida, agendar a retirada de itens fictícios na loja.
Neste codelab, seu app vai:
- Responder a perguntas usando um ícone de sugestão
- Oriente o usuário a fazer perguntas que seu agente digital possa responder.
- Fornecer recursos de conversação avançados para manter o usuário envolvido na conversa
O que você vai aprender
- Como implantar um aplicativo da Web no App Engine no Google Cloud Platform. Como alternativa, é possível usar o ngrok para testar seu aplicativo local publicamente.
- Como configurar sua conta do Business Messages com um webhook de aplicativo da Web para receber mensagens dos usuários
- Como enviar recursos avançados, como cards, carrosséis e sugestões de conversa, com a API Business Messages
- Como o Business Messages envia suas mensagens
O foco deste codelab é criar seu primeiro agente digital.
O que é necessário
- Registrar uma conta de desenvolvedor sem custo financeiro de comunicações comerciais
- Confira nosso site para desenvolvedores para ver instruções sobre como fazer isso
- Um dispositivo Android com a versão 5 ou mais recente OU um dispositivo iOS com o app Google Maps
- Experiência com programação de aplicativos da Web
- Uma conexão com a Internet
2. Etapas da configuração
Ativar as APIs
Neste codelab, como trabalharemos com um aplicativo Django, usaremos a API Cloud Build para implantar o aplicativo no App Engine. Como alternativa, se você estiver usando o ngrok, não será necessário ativar a API Cloud Build.
Para ativar a API Cloud Build:
- Abra a API Cloud Build no console do Google Cloud.
- Selecione Ativar.
Criar uma conta de serviço
Você precisa criar uma conta de serviço para acessar as APIs Business Communications e Business Messages. Siga as etapas da documentação para criar uma conta de serviço no Console para desenvolvedores do Business Communications.
Implantar o código inicial do Django Python EchoBot
Em um terminal, clone a Amostra de bot do Django Echo no diretório de trabalho do seu projeto com o seguinte comando:
$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code
Copie o arquivo de credenciais JSON criado para a conta de serviço na pasta de recursos de amostra e renomeie as credenciais para "bm-agent-service-account-credentials.json".
bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json
Em um terminal, navegue até o diretório step-1 do exemplo.
Execute os seguintes comandos em um terminal para implantar o exemplo:
$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
- PROJECT_ID é o ID do projeto que você usou para se registrar nas APIs.
Observe o URL do aplicativo implantado na saída do último comando:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
O código inicial que você acabou de implantar contém um aplicativo da Web com um webhook para receber mensagens do Business Messages. O aplicativo retorna mensagens ao usuário e pode mostrar alguns dos recursos avançados disponíveis na superfície de conversa.
Configurar seu webook
Agora que o serviço foi implantado, use o URL do aplicativo para definir o URL do webhook na página Configurações da conta no Console para desenvolvedores de comunicações empresariais.
O URL do webhook será o URL do aplicativo + "/callback/". Por exemplo, pode ser algo como: https://PROJECT_ID.appspot.com/callback/
Acesse a página de configurações da conta do Business Communications Console. No canto superior direito, abaixo da barra de navegação, você verá o nome do seu projeto do GCP. Se você vir um menu suspenso, selecione seu projeto do GCP.
Preencha os detalhes do Ponto de contato técnico e atualize o Webhook com o URL do webhook do aplicativo implantado.
Clique em Salvar ao lado da referência do seu projeto do GCP.
3. Como criar seu primeiro agente
Como usar o Play Console do Business Communications
No Console do Business Communications, clique no logotipo no canto superior esquerdo para voltar ao painel do console e clique em Create agent. Você cria uma marca ao mesmo tempo que cria o agente. Selecione Business Messages em Agent type e verifique se as Partner information estão corretas.
Em Marca, digite o nome da marca que você está criando.Ela é a empresa com que você está trabalhando, e os consumidores podem interagir com o agente. Em Nome do agente, especifique o que você quer que os usuários vejam na conversa do Business Messages. No caso da fictícia Bonjour Meal, a Bonjour Rail é a companhia ferroviária que administra os restaurantes Bonjour Meal. Então, vou especificar Bonjour Rail como a marca e Bonjour Meal como o agente.
O agente é a entidade conversacional que representa a marca.
Clique em Create agent e deixe o console fazer a mágica. Essa solicitação leva alguns segundos para fazer várias solicitações à API Business Communications para criar a marca e o agente. É possível usar a API Business Communications diretamente para criar um agente e uma marca. Confira a documentação para saber como uma solicitação curl faria as mesmas coisas que o console está fazendo.
Como iniciar sua primeira conversa
Abra o agente que você acabou de criar. Você verá uma página de Visão geral que permite começar a revisar os detalhes do agente. Confira os URLs de teste de agente. Esses URLs são usados para invocar a plataforma de conversa no seu dispositivo.
É possível copiar o URL de teste clicando em qualquer um dos ícones. E, claro, copie o URL do teste para o dispositivo que você tem à disposição. Envie esta mensagem copiada para seu dispositivo da maneira que quiser.
No dispositivo móvel, tocar no link invoca a tela de início do agente do Business Messages, com o URL de teste do agente pré-preenchido.
Toque em Iniciar para invocar a superfície de conversa do seu agente.
Interaja com o agente e tenha uma ideia do que ele é capaz de fazer. Na maioria das vezes, você vai descobrir que a superfície conversacional só ecoará suas mensagens. Envie algo como "Hello, World!" e você verá que o agente vai enviar a mesma mensagem de volta para você.
O aplicativo implantado também contém uma lógica para mostrar os recursos avançados disponíveis no Business Messages.
- Se você enviar "card", invocará um rich card
- Se você enviar "chips", eles serão invocados.
- Se você enviar "carrossel", o carrossel de rich cards será invocado
Parabéns! Esta é a primeira conversa do seu agente com você!
Cada um dos recursos avançados pode ser usado para oferecer um contexto melhor à pessoa que está se comunicando com o agente. Envie recursos gráficos em rich cards para comunicar melhor ideias ou use ícones de sugestão para orientar a conversa.
Como atualizar a mensagem de boas-vindas e usar os ícones de conversa
Vamos praticar um pouco com o Play Console, aprender a editar a mensagem de recepção do agente e usar os ícones de sugestão para ajudar o usuário a se comunicar.
Acesse a página Overview do agente e selecione Agent information. Role para baixo até a seção "Mensagem de recepção e sugestões de conversa".
Atualize a mensagem de recepção (campo de entrada amarelo) para ler:
Este é o agente inicial da Bonjour Meal. Posso transmitir suas mensagens e mostrar alguns dos recursos avançados disponíveis na plataforma. Teste estas sugestões!
Clique em + Adicionar sugestão de conversa, conforme mencionado na caixa roxa na imagem acima, para adicionar opções de ativação de conversa e invocar ícones de sugestão, carrossel e card. As entradas de conversa que você adiciona precisam de um componente de texto e de um componente postbackData. O texto é o que é exibido ao usuário, enquanto os dados de postBack são enviados para o webhook do agente. O webhook analisa os dados de postback e envia a resposta adequada ao usuário. 
As informações do agente no console ficarão assim após a modificação:
No lado direito do console, você vê uma prévia da aparência do agente. Viu como a mensagem de boas-vindas reflete a mudança e os ícones de sugestão abaixo dela?
Essa é uma ótima ferramenta para ter uma ideia de como será a experiência do usuário. Você pode usá-lo enquanto cria seu agente e planeja as jornadas dos usuários que pretende oferecer.
Infelizmente, essas mudanças não vão aparecer na conversa imediatamente, já que os dados anteriores são armazenados em cache na infraestrutura do Business Messages. O cache é apagado aproximadamente a cada duas horas. Tente fazer um novo teste amanhã.
Enquanto isso, vamos dar uma olhada em como tudo funciona nos bastidores.
4. Como analisar o código inicial
Uma visão geral do código-fonte
O código inicial que você implantou ecoa mensagens de volta aos usuários e pode apresentar um rich card, um carrossel ou chips de sugestão. Vamos nos aprofundar no código-fonte para entender como isso funciona. Depois, descobriremos o que precisamos alterar.
O código inicial é um projeto Django. Em uma parte posterior desta série de codelab, usaremos o Google Datastore para armazenar dados como carrinhos de compras e conversas associadas. Não se preocupe se você nunca usou o Django antes, porque é bastante simples e, ao final deste codelab, você vai saber como ele funciona.
Em um nível alto, o Django roteará URLs para visualizações e a lógica de visualização produz um modelo que é renderizado no navegador. Vamos dar uma olhada no urls.py do projeto.
bm-django-echo-bot/bmcodelab/urls.py [linhas 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),
]
Duas rotas são definidas aqui e, portanto, o Django poderá executar a lógica se esses dois URLs forem reconhecidos. Considerando que o URL do projeto é https://PROJECT_ID.appspot.com/, as rotas que o projeto reconhece são:
- https://PROJECT_ID.appspot.com/
- https://PROJECT_ID.appspot.com/callback/
As duas rotas de URL se referem a bopis_views, que é de bopis/views.py. Vamos dar uma olhada no que está acontecendo neste arquivo. Para começar, primeiro vamos entender bopis_views.landing_placeholder.
bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [linhas 302 a 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>.")
...
Essa lógica é executada pelo servidor da Web quando ele recebe uma solicitação que aponta para a raiz do projeto. Nada muito sofisticado acontece aqui: nós simplesmente retornamos uma HTTPResponse contendo um HTML de volta ao navegador que fez a solicitação. Sim, é possível abrir o URL raiz do projeto, mas não há muito o que fazer porque isso o leva de volta a este codelab.
Os outros URLs encaminham para uma função com o nome callback, também em bopis/views.py. Vamos conferir essa função.
bm-django-echo-bot/bopis/views.py [Linhas 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.")
...
A lógica analisa o corpo da solicitação de uma mensagem ou uma suggestionResponse e transmite essas informações para uma função chamada route_message. Em seguida, retorna um HttpResponse de volta para a infraestrutura de Business Messages para confirmar o recebimento da mensagem.
Esta é uma função importante. Essa lógica é o webhook do aplicativo da Web, que recebe mensagens de usuários interagindo com o agente. É possível estender o webhook para enviar mensagens a uma ferramenta de automação como o Dialogflow para entender o que um usuário diz e produzir uma resposta a partir dessa inferência. Também é possível encaminhar a mensagem para que o usuário possa se conectar a um atendente. Veja o diagrama a seguir:
O Business Messages envia o conteúdo da mensagem como um payload JSON para seu webhook, que é encaminhado a um agente ativo ou a uma lógica para responder como um bot. Esse mecanismo de roteamento, no nosso caso, é o route_message. Vamos conferir.
bm-django-echo-bot/bopis/views.py [Linhas 105 a 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)
...
Essa lógica começa a examinar a mensagem recebida pelo usuário. Primeiro, a mensagem é normalizada com a diminuição de todos os caracteres. Depois de normalizada, ela verifica se a mensagem é uma das constantes definidas na parte de cima do arquivo.
bm-django-echo-bot/bopis/views.py [Linhas 40 a 42]
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...
Ou seja, o bot analisa mensagens que contenham especificamente qualquer uma das strings que colocamos no postback_data das ativações de conversa da etapa anterior deste codelab. Se nenhuma dessas strings aparecer, ela simplesmente transmitirá a mensagem para uma função chamada echo_message, que você pode imaginar... ecoaria mensagens.
Enviar mensagens
Agora, você já deve ter uma ideia de como as mensagens são recebidas pelo aplicativo da Web. Tudo é feito pelo webhook.
Mas como o aplicativo envia uma mensagem de saída para um usuário usando o recurso Business Messages?
Quando sua infraestrutura responde ao usuário, você envia a resposta para a API Business Messages, que entrega a mensagem.
A API Business Messages tem bibliotecas em Python, Node.js e Java. Também temos uma API REST para a qual é possível fazer solicitações diretamente, caso sua infraestrutura não esteja em uma linguagem para a qual tenhamos uma biblioteca. Consulte Como enviar mensagens para ver como o cURL é usado para enviar uma mensagem a um ID de conversa específico.
Para os fins deste codelab, vamos nos concentrar em usar a biblioteca de cliente do Python que já está integrada ao código inicial do Bonjour Meal que foi implantado no App Engine no seu projeto do GCP ou executado localmente por meio do ngrok.
Vamos conferir a função echo_message e como interagimos com a API para enviar a mensagem ao Business Messages.
bm-django-echo-bot/bopis/views.py [Linhas 199 a 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)
...
Nessa função, uma BusinessMessagesMessage é instanciada com a variável message transmitida para a função echo_message. Depois de instanciado, o objeto é transmitido para send_message com o ID da conversa.
bm-django-echo-bot/bopis/views.py [Linhas 214 a 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)
...
Tudo o que a função send_message faz é usar as credenciais da sua conta de serviço para verificar se você pode enviar mensagens para essa conversa, instanciar um cliente do Business Messages e criar uma solicitação para enviar a mensagem ao conversation ID especificado.
Os recursos avançados também usam essa função send_message, mas as mensagens criadas são específicas para rich cards, carrosséis e ícones de sugestão. Rich cards e carrosséis podem incluir recursos gráficos, enquanto os ícones de sugestão têm postback_data para que a lógica de callback possa analisá-los corretamente.
Agora que vimos como enviar uma mensagem, investigue como o exemplo envia rich cards, carrosséis e ícones de sugestão. Na seção a seguir, modificaremos o código-fonte para enviar mensagens com alguns desses recursos avançados.
Quando estiver tudo pronto, vamos personalizar o agente do Bonjour Meal.
5. Como personalizar seu agente
Se você acompanhou o codelab até agora, vamos encontrar nosso belo agente.
Certo, não é tão bonito. Na verdade, está um pouco vazio e não representa muito bem nossa empresa. Felizmente, temos um conhecimento básico do código que auxilia o agente e temos as ferramentas necessárias para personalizar nosso agente da maneira que quisermos.
No restante deste codelab, estenderemos o agente da seguinte forma:
- Inclua um logotipo real
- Mensagem de recepção aprimorada
- Dar informações sobre o horário de funcionamento
- Informe ao usuário que a compra de itens on-line vai estar disponível em breve
- Uso de ícones de sugestão de conversa para facilitar a conversa
Vamos usar o Business Communications Console para nos ajudar a atualizar o logotipo, a mensagem de recepção, mas você sempre tem a opção de usar as APIs Business Communications diretamente para fazer o mesmo. Depois, será necessário atualizar o código-fonte para enviar as mensagens apropriadas com o objetivo de fornecer informações sobre o horário de funcionamento. A Bonjour Meal logo oferecerá um recurso de compras on-line. Depois disso, vamos voltar ao Business Communications Console e criar ícones de sugestão para orientar a conversa em busca de experiências de caminho positivas com as quais o agente digital oferece suporte.
Inclua um logotipo
No Business Communications Console, selecione o agente e acesse Informações do agente. Queremos atualizar o logotipo da empresa, conforme mencionado em amarelo abaixo.
Clique em Fazer upload e selecione uma imagem para enviar ou importar de um URL.
Confira as diretrizes de criação de logotipos na documentação e saiba quais são as práticas recomendadas para o uso dos seus logotipos.
Vamos fazer upload do logotipo que está localizado no código-fonte clonado no início deste codelab. Ele fica no diretório ./assets/ do repositório com o nome "bonjour_meal-logo.png". Você pode arrastar o arquivo para o modal no navegador da Web. Uma ferramenta de edição leve será apresentada para manipular a qualidade da imagem e o corte. Ajuste a resolução da imagem e corte para que ela fique menor ou igual à restrição de 50 KB. Quando estiver contente com a imagem, clique na marca de seleção no círculo azul para confirmar e depois em Selecionar na parte de baixo do modal.
Por fim, clique em Save no canto superior direito da página Agent information. Essa é uma alteração que levará algum tempo para ser refletida em seu dispositivo, já que as informações do agente são armazenadas em cache em nossos servidores e devem ficar visíveis em até duas horas após a alteração.
Atualizar a mensagem de recepção
A atualização da mensagem de boas-vindas é algo que já fizemos anteriormente neste codelab. Vamos fazer isso novamente, mas, desta vez, configure uma mensagem de boas-vindas mais aplicável à jornada do usuário da Bonjour Meal.
No Console do Business Communications, selecione seu agente e acesse Agent Information. Role para baixo até ver o campo de entrada Mensagem de recepção, onde você pode atualizar a mensagem.
Como vamos adicionar sugestões de conversa, podemos mencionar na mensagem de recepção. No campo de entrada, vamos substituí-lo pelo seguinte texto:
"Bem-vindo ao Bonjour Meal. Sou um assistente que pode ajudar você com suas dúvidas sobre a Bonjour Meal. Teste algumas das opções a seguir."
Por fim, clique em Save no canto superior direito da página Agent information. Novamente, essa alteração levará algum tempo para ser refletida devido ao nosso mecanismo de armazenamento em cache para garantir que tudo seja ágil!
Fornecer informações sobre o horário de funcionamento
Para fornecer essas informações aos usuários, vamos enviar uma mensagem personalizada a eles usando a API Business Messages.
Talvez você se lembre de que as mensagens são analisadas na função route_message de views.py. Primeiro, a função normaliza a string e depois começa a verificar se a mensagem normalizada corresponde a algum dos parâmetros codificados. Para simplificar, vamos adicionar outra condição em que verificamos se a mensagem normalizada é igual a uma nova constante, que chamaremos CMD_BUSINESS_HOURS_INQUIRY e vai conter o valor "business-hours-consulta" (consulta em horário de funcionamento). Se a condição for avaliada como verdadeira, invocaremos uma função chamada send_message_with_business_hours.
A função route_message agora terá esta aparência:
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 o código funcione, precisaremos fazer mais duas mudanças. A primeira é definir CMD_BUSINESS_HOURS_INQUIRY com as outras constantes. A segunda é definir a função send_message_with_business_hours e enviar uma mensagem usando a API Business Messages.
Primeiro, vamos definir a constante na parte de cima do arquivo com as outras declarações 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'
...
Agora, defina send_message_with_business_hours. Você pode definir essa função em qualquer lugar do arquivo, seguindo a sintaxe apropriada do Python. Como essa função é simplesmente o envio de uma mensagem, como a echo_message, é possível usá-la como um modelo para definir a função.
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)
...
Com isso, nosso bot poderá responder com esse horário de funcionamento ao usuário quando ele enviar a seguinte mensagem: "consulta no horário de funcionamento". Você verá algo assim:
Depois de implantar o código-fonte no GCP, as alterações ficarão visíveis imediatamente. Não armazenamos o aplicativo da Web em cache no Google Cloud Platform da mesma forma que as informações do agente são armazenadas em cache. Por isso, você pode testar essa experiência imediatamente.
Embora seja importante fazer mudanças de fonte, vamos fazer mais uma modificação que vai permitir que um usuário pergunte sobre como comprar on-line. Seu agente digital vai responder informando que o recurso ainda não está disponível. Volte mais tarde para conferir.
Informar ao usuário que as compras on-line serão lançadas em breve
Vamos fazer uma modificação semelhante à que fizemos para informar o usuário sobre o horário de funcionamento. Desta vez, vamos colocar as informações em um rich card com uma imagem envolvente.
Analise a mensagem normalizada e verifique uma condição de uma constante chamada CMD_ONLINE_SHOPPING_INQUIRY com o valor definido como "online-shopping-inquiry" que invoca send_online_shopping_info_message se a condição for verdadeira.
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)
...
Agora, para definir send_online_shopping_info_message. Queremos que essa mensagem seja enviada em um rich card com uma imagem, então vamos copiar a função send_rich_card para usar como modelo e definir send_online_shopping_info_message.
Primeiro, precisamos atualizar o texto substituto para ter uma mensagem adequada. O texto substituto é usado se o dispositivo não puder receber um rich card por algum motivo. Em seguida, precisamos atualizar a BusinessMessagesRichCard para incluir um título, uma descrição, sugestões e um campo de mídia relevantes. Nossa função vai ficar assim:
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)
...
Uhuuu! Nosso agente digital agora pode responder a usuários que perguntem sobre compras on-line. Por enquanto, nosso agente digital ainda não oferece suporte para compras on-line. Por isso, enviamos uma mensagem ao usuário informando que o recurso vai ser lançado em breve. Essa é a aparência do nosso agente digital quando o usuário pergunta sobre como fazer compras on-line.
Assim como a alteração anterior que fizemos para permitir que um usuário pergunte sobre o horário de funcionamento, essa alteração poderá ser vista imediatamente se você estiver usando o ngrok ou assim que implantar o código no App Engine do GCP.
Na próxima parte, vamos usar sugestões e ativações de conversa para guiar a conversa pelo caminho da felicidade.
Uso de ícones para orientar a conversa
Fizemos algumas alterações no código-fonte e implantamos o agente digital atualizado, mas não é esperado que os usuários digitem "consulta-horário de funcionamento" ou "informações-compras-online" para perguntar sobre a empresa. Vamos atualizar as sugestões para que, quando a conversa for aberta, o usuário não seja apenas recebido com uma boa mensagem de recepção, mas também com sugestões.
Acesse o Console de comunicações de negócios e acesse a página Informações do agente do seu agente. Definimos anteriormente os elementos de início de conversa como "fichas", "cartão" e "carrossel". Embora eles ainda funcionem, não são mais relevantes para nossa função empresarial. Você pode deixá-los disponíveis para continuar exibindo esses recursos avançados ou removê-los para que seu agente digital exiba sugestões de conversa especificamente para a empresa Bonjour Meal.
Vamos criar duas novas ativações de conversa. Para a primeira, defina o texto como "Qual é seu horário de funcionamento?" e defina os Dados de postback como "consulta no horário de funcionamento". Para a segunda sugestão de conversa, defina o texto como "Posso fazer compras aqui?" e defina os Dados de postback como "online-shopping-info".
O resultado será a configuração mostrada na captura de tela abaixo:
Assim como acontece com outras alterações feitas no Business Communications Console, levará algum tempo para que você veja as alterações feitas no seu dispositivo móvel.
Agora que terminamos com as perguntas para puxar conversa, também vamos querer uma maneira de conduzir o usuário para um caminho feliz assim que a conversa tiver começado. É possível usar ícones contextualmente depois que uma mensagem é enviada para guiar o usuário para outros recursos com os quais o agente digital é compatível. Vamos enviar uma mensagem com uma sugestão para fazer outra coisa com o agente sempre que o usuário perguntar sobre o horário de funcionamento ou compras on-line.
No final da função, adicione o seguinte:
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)
...
O campo de texto em uma BusinessMessagesSuggestion é de um limite de 25 caracteres, conforme descrito na documentação.
Com novas dicas no início das conversas e o uso estratégico dos ícones de sugestão, veja algumas capturas de tela da experiência esperada do usuário.
6. Parabéns
Parabéns! Você criou seu primeiro agente digital do Business Messages.
Você implantou um aplicativo da Web para dar suporte ao seu agente digital no Business Messages, usou o Business Communications Console para modificar o agente e formou a experiência do usuário com um agente digital fazendo mudanças no código-fonte.
Agora você sabe as principais etapas necessárias para criar uma experiência interativa com o Business Messages, e as possibilidades daqui em diante são incríveis. Seu agente pode ser estendido para oferecer suporte à pesquisa de inventário ou introduzir um carrinho de compras para rastrear os interesses do usuário. Você pode usar um carrossel para mostrar os itens do cardápio e, com as sugestões, permitir que o usuário selecione os itens em que tem interesse.
Aqui está um teaser de como isso poderia ficar.
Como criar uma ótima experiência de conversa?
Os melhores agentes fornecem informações contextuais ao usuário, oferecendo funcionalidades durante a conversa para que ele possa se envolver e interagir com a empresa, como fariam normalmente por telefone ou mesmo pessoalmente. Pense em como os tópicos a seguir podem se aplicar a uma conversa que você gostaria de ter com uma empresa com a qual trabalha.
Fornecer contexto e definir expectativas
Fornecer contexto pode ser qualquer coisa, desde declarar explicitamente como você pode ajudar o usuário a apresentar o agente digital com uma persona com que o usuário possa se identificar. Agentes bem-sucedidos no Business Messages usam o avatar representativo para mostrar aos usuários com quem eles estão conversando.
Definir as expectativas depende da experiência do usuário que você está criando. Por exemplo, se o agente oferecer suporte à pesquisa de inventário, primeiro informe ao usuário que a disponibilidade pode estar baixa antes de responder.
Oferecer funcionalidade ao usuário
Os consumidores se conectam com as empresas o tempo todo. As interações complexas do usuário podem ajudar com interações complexas do usuário com o Business Messages, por exemplo, para consultas, como conferir o status de um pedido ou se um item está em estoque. Muitos usuários continuam ligando para as empresas para ter suas dúvidas respondidas, mesmo que as respostas estejam disponíveis no site da empresa. Como resultado, as empresas precisam investir mais recursos para lidar com o volume de chamadas, especialmente durante os feriados.
Manter o usuário engajado
Forneça pontos de contato para manter o usuário envolvido na conversa. Entre as mensagens, você pode invocar indicadores de digitação para informar ao usuário que você está processando uma resposta para ele.
Com recursos avançados, como indicadores de digitação, ícones de sugestão, rich cards e carrosséis, você pode guiar o usuário por uma experiência agradável para concluir determinadas tarefas, como fazer pedidos em um menu de itens. O objetivo é reduzir o tráfego de chamadas para a linha telefônica de uma empresa.
É essencial que a conversa ofereça funcionalidade ao usuário. Os usuários que se conectam com uma empresa por mensagem esperam ter suas dúvidas respondidas rapidamente. Em uma situação não ideal, o agente digital não pode mediar a conversa, o que pode levar a uma experiência ruim para o usuário. Felizmente, há maneiras de lidar com isso, como transferir a conversa para um atendente, que vamos abordar em um próximo codelab.
Qual é a próxima etapa?
Quando estiver tudo pronto, confira alguns dos tópicos a seguir para saber mais sobre as interações mais complexas que você pode fazer no Business Messages.
- O ciclo de um agente: criação até o lançamento
- Requisitos e diretrizes
- Diretrizes de logotipo
- Todos os guias
Documentos de referência
- SuggestedReply
- Documento de referência de mensagens do Business Messages
- Definição do JSON para RichCard