Com uma integração, as interações do usuário final são processadas para você. Você só precisa criar um agente, implementar um webhook, opcionalmente, e configurar a integração.
Neste guia, mostramos como usar a integração do Dialogflow Messenger para fornecer uma interface de usuário de chat de texto simples para seu agente.
Antes de começar
Se você não planeja usar uma integração, pule este guia de início rápido.
Faça o seguinte antes de ler este guia:
- Leia os Princípios básicos do Dialogflow CX.
- Execute as etapas de configuração.
- Realize as etapas no guia de início rápido Criar um agente. As etapas abaixo continuam funcionando no mesmo agente. Se você não tiver mais esse agente, faça o download dele e restaure-o.
Instalação
Para configurar o acesso não autenticado ao agente do Dialogflow Messenger:
- Acesse o Console do Dialogflow CX.
- Escolha seu projeto do Google Cloud.
- Selecione seu agente.
- Selecione a guia Manage.
- Clique em Integrations no menu da barra lateral à esquerda.
- Clique em Conectar no Dialogflow Messenger.
- Uma caixa de diálogo de configuração é aberta.
- Se a integração já tiver sido configurada para esse agente, você verá o código HTML incorporável. Independente de o que você quer autenticar ou não, clique no botão Desativar... na parte de baixo da caixa de diálogo para reconfigurar as configurações na próxima etapa.
- Selecione um Ambiente.
- Selecione API não autenticada.
- Selecione um estilo.
- Opcionalmente, restrinja o acesso ao domínio.
- Clique em Ativar a API não autenticada.
- A caixa de diálogo mostra o código HTML incorporável que pode ser incorporado ao site. Copie esse código.
- Clique em Concluído.
Embed
Cole o código de incorporação que você copiou em uma página da Web do seu site.
Os elementos HTML <script> e <df-messenger>
devem estar no elemento <body> da sua página.
Se você estiver usando uma integração autenticada, defina o atributo oauth-client-id de <df-messenger> como seu ID do cliente Oauth.
Atualize todos os outros atributos que precisam ser atualizados.
Para permitir layouts responsivos,
adicione também o seguinte ao elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Depois de incorporado, é possível interagir com o agente na página da Web clicando no ícone de chat no canto inferior direito.
Personalizar
É possível personalizar a aparência e o comportamento dessa interface do usuário de várias maneiras. Consulte a documentação do Dialogflow Messenger para mais informações.