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 com as empresas que você gerencia na Pesquisa Google e no Maps. Talvez você seja uma empresa que quer se integrar diretamente ao Business Messages, ou talvez você trabalhe em um fornecedor independente de software criando soluções de mensagens para as empresas com que trabalha, ou talvez você tenha encontrado o Business Messages e queira testar a plataforma.
Seja qual for o motivo, este codelab é uma ótima maneira de começar. Ao final, você terá seu primeiro agente digital para os usuários interagirem. Quando você estiver pronto para lançar no Business Messages depois de um pouco mais de refinamento, terá o potencial de alcançar milhões de clientes.
O que faz 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. Assim, os consumidores podem se conectar com empresas sem instalar um app adicional. Um agente digital é a parte da lógica com que seus clientes interagem. A lógica é gerenciada por um aplicativo da Web implantado na nuvem ou na sua infraestrutura. A forma como você responde ao usuário depende totalmente de você. Os melhores agentes fornecem contexto para definir expectativas, manter os clientes engajados e oferecer funcionalidades que atendam às necessidades dos usuários.
O que você vai criar
Neste codelab, você vai criar um agente digital no Business Messages para uma empresa fictícia chamada Bonjour Meal. Esse agente digital vai responder a algumas perguntas simples, como "Qual é o horário de fechamento?" ou "Posso comprar on-line?".
Neste codelab, os usuários poderão comprar itens pelo agente digital, direcionar o usuário a um processador de pagamentos para coletar dinheiro e agendar a retirada dos itens fictícios na loja.
Neste codelab, seu app vai:
- Responder a perguntas usando um chip de sugestão
- Oriente o usuário a fazer perguntas que seu agente digital pode responder
- Oferecer recursos de conversa avançados para manter o usuário engajado
O que você vai aprender
- Como implantar um aplicativo da Web no App Engine no Google Cloud Platform. Como alternativa, use 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
Este codelab é focado na criação do seu primeiro agente digital.
O que é necessário
- Inscrever-se para uma conta de desenvolvedor sem custo financeiro do Business Communications
- 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 vamos trabalhar com um aplicativo Django, vamos usar 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.
- Clique em Ativar.
Criar uma conta de serviço
É necessário criar uma conta de serviço para acessar as APIs Business Communications e Business Messages. Siga as etapas na documentação para criar uma conta de serviço no Play Console 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, acesse o diretório da etapa 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 ecoa mensagens de volta para o usuário e pode mostrar alguns dos recursos avançados disponíveis na superfície de conversa.
Configurar seu webhook
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 do Play Console do Business Communications.
O URL do webhook será o URL do aplicativo + "/callback/". Por exemplo, pode ser algo assim: 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ê vai encontrar o nome do seu projeto do GCP. Se um menu suspenso aparecer, 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 console para desenvolvedores do Business Communications
No console Business Communications, clique no logotipo no canto superior esquerdo para voltar ao painel do console e clique em Criar agente. Você cria uma marca ao mesmo tempo que cria seu agente. Selecione Mensagens comerciais em Tipo de agente e verifique se as Informações do parceiro estão corretas.
Em Marca, digite o nome da marca que você está criando.A marca é a empresa com que você está trabalhando, e os consumidores podem interagir por conversa 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 Bonjour Meal fictícia, a Bonjour Rail é a empresa ferroviária que gerencia os restaurantes da 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 Criar agente e deixe o console fazer um pouco de mágica. Essa solicitação leva alguns segundos para fazer várias solicitações à API Business Communications e criar a marca e o agente. Você pode usar a API Business Communications diretamente para criar um agente e uma marca. Confira a documentação para saber como seria uma solicitação curl para fazer as mesmas coisas que o console está fazendo.
Ter sua primeira conversa
Abra o agente que você acabou de criar. Uma página Visão geral vai aparecer para que você comece a analisar os detalhes do agente. Confira os URLs de teste do agente. Eles são usados para invocar a plataforma de conversa no seu dispositivo.
Clique em um dos ícones para copiar o URL de teste. Copie o URL de teste do dispositivo que você tem em mãos para fazer o teste. Envie a mensagem copiada para seu dispositivo da maneira que preferir.
Depois de acessar o link no dispositivo móvel, toque nele para invocar o iniciador de agentes do Business Messages com o URL de teste do agente preenchido.
Toque em Iniciar para invocar a superfície de conversa do agente.
Interaja com o agente e descubra o que ele pode fazer. Na maior parte do tempo, a plataforma de conversa só vai repetir suas mensagens. Envie algo como "Olá, mundo!" e você vai perceber que o agente vai enviar a mesma mensagem de volta.
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", vai invocar um Rich Card
- Se você enviar "chips", vai invocar ícones de sugestão.
- Se você enviar "carrossel", vai invocar um carrossel de Rich Cards.
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 seu agente. Envie recursos gráficos em rich cards para comunicar melhor as ideias ou use chips de sugestão para guiar a conversa.
Atualizar a mensagem de boas-vindas e usar ícones de conversa
Vamos praticar um pouco com o Play Console, ver como editar a mensagem de boas-vindas do agente e usar chips de sugestão para ajudar o usuário a se comunicar.
Acesse a página Visão geral do agente e selecione Informações do agente. Role a tela para baixo até a seção de mensagens de boas-vindas e de início de conversa.
Atualize a mensagem de boas-vindas (o campo de entrada amarelo) para:
Bem-vindo ao agente inicial do Bonjour Meal. Posso repetir suas mensagens e mostrar alguns dos recursos avançados compatíveis com a plataforma. Teste estas sugestões!
Clique em + Adicionar sugestão de conversa, conforme indicado na caixa roxa na imagem acima, para adicionar sugestões de conversa e invocar chips de sugestão, carrossel e card. As opções de início de conversa que você adiciona precisam de um componente de texto e um componente postbackData. O texto é o que aparece para o usuário, enquanto os dados de postBack são enviados para o webhook do seu agente. O webhook analisa os dados de postback e envia a resposta adequada ao usuário. 
As informações do agente no console ficam assim após a modificação:
No lado direito do console, você vê uma prévia de como o agente vai aparecer. Percebeu como a mensagem de boas-vindas reflete o que você acabou de mudar 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 usar esse recurso enquanto cria seu agente e planeja as jornadas do usuário que quer oferecer suporte.
Infelizmente, não será possível ver essas mudanças refletidas na conversa imediatamente, já que os dados anteriores são armazenados em cache na infraestrutura do Business Messages. O cache é limpo aproximadamente a cada duas horas. Então, você pode tentar isso amanhã.
Enquanto isso, vamos conferir como tudo funciona.
4. Analisar o código inicial
Uma visão geral do código-fonte
O código inicial implantado ecoa mensagens para os usuários e pode apresentar um card avançado, um carrossel ou ícones de sugestão. Vamos analisar o código-fonte para entender como isso funciona. Depois, vamos descobrir o que precisa ser mudado.
O código inicial é um projeto do Django. Em uma parte posterior desta série de codelabs, vamos usar o Google Datastore para manter dados como carrinhos de compras e conversas associadas. Não se preocupe se você nunca usou o Django antes. Ele é bem simples, e ao final deste codelab, você vai aprender como ele funciona.
Em um nível alto, o Django vai encaminhar 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 o Django pode 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 conhece 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 analisar o que está acontecendo nesse arquivo. Para começar, vamos entender o que é 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 parte da lógica é executada pelo servidor da Web quando ele recebe uma solicitação da Web apontando para a raiz do projeto. Não há nada muito sofisticado aqui: simplesmente retornamos um HTTPResponse contendo algum HTML para o navegador que fez a solicitação. Então, sim, você pode abrir o URL raiz do projeto, mas não há muito o que fazer lá, já que ele leva de volta a este codelab.
O outro URL direciona para uma função chamada callback, também em bopis/views.py. Vamos analisar 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 aqui analisa o corpo da solicitação em busca de uma mensagem ou uma suggestionResponse e transmite essas informações para uma função chamada route_message. Em seguida, retorna um HttpResponse para a infraestrutura do Business Messages para confirmar o recebimento da mensagem.
Essa é uma função importante. Essa parte da lógica é o webhook do seu aplicativo da Web, que recebe mensagens de usuários que interagem com seu agente. Você pode estender o webhook para enviar mensagens a uma ferramenta de automação como o Dialogflow para entender o que um usuário pode estar dizendo e produzir uma resposta com base nessa inferência. Você também pode encaminhar a mensagem para que o usuário possa entrar em contato com um agente em tempo real. Confira o diagrama a seguir:
O Business Messages envia o conteúdo da mensagem como um payload JSON para o webhook, que o encaminha para um atendente humano ou para alguma lógica que responda como um bot. Nesse caso, o mecanismo de roteamento é 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 parte da lógica começa a examinar a mensagem recebida pelo usuário. Primeiro, a mensagem é normalizada com a conversão de todos os caracteres para minúsculas. 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 as mensagens que contêm especificamente qualquer uma das strings que colocamos no postback_data dos iniciadores de conversa da etapa anterior deste codelab. Se nenhuma dessas strings aparecer, a mensagem será transmitida para uma função chamada echo_message, que, como você pode imaginar, repetiria as mensagens.
Envio de mensagens
Então, agora você já tem uma ideia de como as mensagens são recebidas pelo aplicativo da Web. Tudo é feito pelo webhook.
Mas como o aplicativo envia uma mensagem para um usuário usando o Business Messages?
Quando sua infraestrutura responde ao usuário, você envia a resposta para a API Business Messages, que entrega a mensagem ao usuário.
A API Business Messages tem bibliotecas em Python, Node.js e Java. Também temos uma API REST que pode ser usada diretamente se a infraestrutura não estiver em uma linguagem para a qual temos uma biblioteca. Consulte Envio de mensagens para saber como o cURL é usado para enviar uma mensagem a um ID de conversa específico.
Para este codelab, vamos nos concentrar no uso da biblioteca de cliente Python, que já está integrada ao código inicial do Bonjour Meal implantado no App Engine no seu projeto do GCP ou executado localmente pelo ngrok.
Vamos analisar a função echo_message e ver 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, um BusinessMessagesMessage é instanciado com a variável de mensagem transmitida para a função echo_message. Depois de instanciado, o objeto é transmitido para send_message junto 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)
...
A função send_message usa suas credenciais de conta de serviço para verificar se você pode enviar mensagens para essa conversa, instanciando um cliente do Business Messages e criando 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 chips de sugestão. Os Rich Cards e carrosséis podem incluir recursos gráficos, enquanto os chips de sugestão têm postback_data para que a lógica de callback possa analisá-lo adequadamente.
Agora que já vimos como enviar uma mensagem, investigue como a amostra envia rich cards, carrosséis e chips de sugestão. Na seção a seguir, vamos modificar o código-fonte para enviar mensagens com alguns desses recursos avançados.
Quando estiver tudo pronto, vamos personalizar o agente Bonjour Meal.
5. personalizar seu agente
Se você acompanhou o codelab até agora, o agente vai aparecer.
Ok, não tão bonito assim. Na verdade, ele está um pouco vazio e não representa muito bem nossa empresa. Felizmente, temos um conhecimento básico do código que oferece suporte ao agente e as ferramentas necessárias para personalizá-lo da maneira que quisermos.
No restante deste codelab, vamos estender o agente com o seguinte:
- Inclua um logotipo real
- Mensagem de boas-vindas aprimorada
- Fornecer informações sobre o horário de funcionamento
- Informe ao usuário que a compra de itens on-line estará disponível em breve
- Uso de chips de sugestão de conversa para facilitar a conversa
Vamos usar o Business Communications Console para atualizar o logotipo e a mensagem de boas-vindas, mas você sempre pode usar as APIs Business Communications diretamente para fazer o mesmo. Em seguida, vamos atualizar o código-fonte para enviar mensagens adequadas sobre o horário de funcionamento e informar que o Bonjour Meal vai oferecer um recurso de compras on-line em breve. Depois disso, vamos voltar ao console do Business Communications e criar chips de sugestão de conversa para ajudar a direcionar a conversa para as experiências de caminho feliz que o agente digital oferece.
Incluir um logotipo
No console Business Communications, selecione seu agente e acesse Informações do agente. Vamos atualizar o Logotipo da empresa, conforme referenciado em amarelo abaixo.
Clique em Fazer upload para selecionar uma imagem ou importar de um URL.
Confira as diretrizes de design de logotipo na documentação para saber mais sobre as práticas recomendadas para usar seus próprios logotipos.
Vamos fazer upload do logotipo localizado no código-fonte clonado no início deste codelab. Ele está no diretório ./assets/ do repositório e se chama "bonjour_meal-logo.png". Você pode arrastar o arquivo para o modal no navegador da Web. Uma ferramenta de edição simples será apresentada para manipular a qualidade da imagem e o corte. Ajuste a resolução e o corte da imagem para que ela tenha menos de 50 KB. Quando a imagem estiver do seu agrado, clique na marca de seleção no círculo azul para confirmar e clique em Selecionar na parte de baixo da caixa de diálogo.
Por fim, clique em Salvar no canto superior direito da página Informações do agente. Essa mudança vai levar algum tempo para ser refletida no seu dispositivo, já que as informações do agente são armazenadas em cache nos nossos servidores e ficam visíveis em até duas horas após a mudança.
Atualizar a mensagem de boas-vindas
Atualizar a mensagem de boas-vindas é algo que já fizemos neste codelab. Vamos fazer isso de novo, mas desta vez vamos configurar uma mensagem de boas-vindas mais adequada à jornada do usuário do Bonjour Meal.
No console do Business Communications, selecione seu agente e acesse Informações do agente. Role a tela para baixo até encontrar o campo de entrada Mensagem de boas-vindas, onde você pode atualizar a mensagem.
Sabendo que vamos adicionar iniciadores de conversa, podemos fazer referência a eles na mensagem de boas-vindas. No campo de entrada, substitua o texto pelo seguinte:
"Bem-vindo ao Bonjour Meal. Sou um assistente que pode ajudar você com dúvidas sobre o Bonjour Meal. Tente algumas das opções a seguir."
Por fim, clique em Salvar no canto superior direito da página Informações do agente. Essa mudança vai levar algum tempo para ser refletida devido ao nosso mecanismo de armazenamento em cache, que garante que tudo funcione rapidamente.
Fornecer informações sobre o horário de funcionamento
Para fornecer essas informações aos usuários, vamos enviar uma mensagem personalizada usando a API Business Messages.
Você deve se lembrar 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 uma condição extra em que verificamos se a mensagem normalizada é igual a uma nova constante, que chamaremos de CMD_BUSINESS_HOURS_INQUIRY e que vai conter o valor "business-hours-inquiry". Se a condição for avaliada como verdadeira, vamos invocar uma função chamada send_message_with_business_hours.
A função route_message agora vai ficar assim:
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, vamos precisar 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 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'
...
Agora, para definir send_message_with_business_hours. Você pode definir essa função em qualquer lugar do arquivo, seguindo a sintaxe adequada do Python. Como essa função está apenas enviando uma mensagem, assim como echo_message, você pode usá-la como um modelo para definir essa 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)
...
Assim, nosso bot poderá responder com esse horário de funcionamento ao usuário quando ele enviar a seguinte mensagem: "business-hours-inquiry". Você vai receber algo parecido com isto:
Depois que você implanta o código-fonte no GCP, as mudanças ficam visíveis imediatamente. Não armazenamos em cache o aplicativo da Web no Google Cloud Platform da mesma forma que as informações do agente. Portanto, você poderá testar essa experiência imediatamente.
Já que estamos fazendo mudanças na fonte, vamos fazer mais uma modificação que vai permitir que um usuário pergunte sobre compras on-line. Seu agente digital vai responder que o recurso ainda não está disponível, mas que você pode voltar e verificar mais tarde.
Avisar o usuário que as compras on-line estarão disponíveis 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 interessante.
Analise a mensagem normalizada e verifique uma condição para 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 vamos definir send_online_shopping_info_message. Queremos que essa mensagem seja enviada em um card avançado com uma imagem. Por isso, vamos copiar a função send_rich_card para usar como modelo e definir send_online_shopping_info_message.
Primeiro, atualize o texto alternativo para ter uma mensagem adequada. O texto alternativo é usado se o dispositivo não puder receber um card avançado por algum motivo. Em seguida, atualize 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 perguntam sobre compras on-line. Por enquanto, nosso agente digital ainda não oferece suporte a compras on-line. Por isso, mostramos uma mensagem ao usuário informando que o recurso estará disponível em breve. É assim que nosso agente digital aparece quando o usuário pergunta sobre compras on-line.
Assim como a mudança anterior que fizemos para permitir que um usuário perguntasse sobre o horário de funcionamento, essa mudança pode 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 de conversas e chips de sugestão para orientar a conversa até o caminho feliz.
Usar ícones para guiar a conversa
Fizemos algumas mudanças no código-fonte e implantamos o agente digital atualizado, mas nunca esperaríamos que os usuários digitassem "business-hours-inquiry" ou "online-shopping-info" para perguntar sobre a empresa. Vamos atualizar as sugestões de conversa para que, quando a conversa for aberta, o usuário não receba apenas uma mensagem de boas-vindas, mas também sugestões de conversa.
Acesse o Console do Business Communications e a página Informações do agente. Antes, definimos iniciadores de conversa para "chips", "card" e "carousel". Embora ainda funcionem, eles não são mais relevantes para nossa função comercial. Você pode deixar esses recursos ativados para continuar mostrando os recursos avançados ou removê-los para que o agente digital mostre iniciadores de conversa especificamente para a empresa Bonjour Meal.
Vamos criar duas novas opções para iniciar conversas. Para a primeira, defina o texto como "Qual é o horário de funcionamento?" e os dados de postback como "business-hours-inquiry". Para a segunda opção, defina o texto como "Posso fazer compras aqui?" e os dados de postback como "online-shopping-info".
O resultado será a configuração mostrada na captura de tela a seguir:
Assim como outras mudanças feitas no console do Business Communications, isso leva algum tempo para ser propagado antes que você possa ver as mudanças produzidas no seu dispositivo móvel.
Agora que terminamos os iniciadores de conversa, também vamos querer uma maneira de guiar o usuário para um caminho feliz depois que a conversa começar. É possível usar chips contextualmente depois que uma mensagem é enviada para orientar o usuário a outros recursos que o agente digital pode oferecer. Então, 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 um BusinessMessagesSuggestion é limitado a 25 caracteres, conforme descrito na documentação.
Com iniciadores de conversa atualizados e uso estratégico de chips de sugestão, confira algumas capturas de tela da experiência do usuário esperada.
6. Parabéns
Parabéns! Você criou seu primeiro agente digital do Business Messages.
Você implantou um aplicativo da Web para oferecer suporte ao seu agente digital no Business Messages, usou o Business Communications Console para modificar o agente e moldou a experiência do usuário com um agente digital fazendo mudanças no código-fonte.
Agora você conhece as principais etapas necessárias para criar uma experiência interativa do Business Messages, e as possibilidades daqui para frente são incríveis. Seu agente pode ser estendido para oferecer suporte à pesquisa de inventário ou apresentar um carrinho de compras para acompanhar o que pode interessar ao usuário. Você pode usar um carrossel para mostrar itens no menu e, usando sugestões, permitir que o usuário selecione os itens de interesse.
Confira um exemplo de como isso pode ser.
Como criar uma ótima experiência de conversa?
Os melhores agentes fornecem informações contextuais ao usuário e oferecem funcionalidades durante a conversa para que ele possa se envolver e interagir com a empresa como faria normalmente por telefone ou até 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 que trabalha.
Forneça contexto e defina expectativas
Fornecer contexto pode ser qualquer coisa, desde declarar explicitamente como você pode ajudar o usuário até apresentar o agente digital com uma personalidade com que o usuário possa se identificar. Os agentes de sucesso no Business Messages usam o avatar representacional para mostrar ao usuário com quem ele está conversando.
Definir expectativas depende da experiência do usuário que você está criando. Por exemplo, se o agente oferecer suporte à pesquisa de inventário, informe ao usuário que a disponibilidade pode ser baixa antes de dar a resposta.
Oferecer funcionalidade ao usuário
Os consumidores se conectam com empresas o tempo todo. Desde consultas como verificar o status de um pedido até verificar se um item está em estoque, o Business Messages pode oferecer suporte a interações complexas do usuário. Muitos usuários ainda ligam para as empresas para tirar dúvidas, mesmo que as respostas estejam disponíveis no site. Como resultado, as empresas precisam investir mais recursos para lidar com o volume de chamadas, principalmente durante os feriados.
Mantenha o usuário engajado
Ofereça pontos de contato de conversa para manter o usuário engajado. Entre as mensagens, você pode invocar indicadores de digitação para informar ao usuário que está processando uma resposta.
Com recursos avançados, como indicadores de digitação, ícones de sugestão, cards avançados e carrosséis, você pode guiar o usuário por experiências positivas para ajudá-lo a concluir determinadas tarefas, como fazer um pedido em um menu de itens. A meta é reduzir o tráfego de ligações para a linha telefônica de uma empresa.
É fundamental que uma conversa ofereça funcionalidade ao usuário. Os usuários que se conectam com uma empresa por mensagens esperam ter suas dúvidas respondidas rapidamente. Em uma situação não ideal, o agente digital não consegue facilitar a conversa, o que pode levar a uma experiência ruim para o usuário. Felizmente, há maneiras de contornar isso, como transferir a conversa para um atendente humano, o que vamos abordar em um futuro codelab.
Qual é a próxima etapa?
Quando tudo estiver pronto, confira alguns dos seguintes tópicos para saber mais sobre as interações mais complexas que você pode realizar no Business Messages:
- Ciclo de vida de um agente: da criação ao lançamento
- Requisitos e diretrizes
- Diretrizes de logotipo
- Todos os guias
Documentos de referência
- Resposta sugerida
- Documento de referência de mensagens do Business Messages
- Definição do JSON para RichCard