Essa integração fornece uma caixa de diálogo de chat personalizável para seu agente que pode ser incorporada ao seu site.
Instalação
Essa integração pode permitir o acesso a consultas do agente de usuário final autenticado ou não autenticado.
Configuração não autenticada
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.
Configuração autenticada
Para configurar o acesso 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 autorizada.
- Selecione um estilo.
- Opcionalmente, restrinja o acesso ao domínio.
- Clique em Ativar a API autorizada.
- 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.
- Configure o cliente OAuth:
- Crie uma tela de permissão OAuth para sua organização.
Adicione
./auth/cloud-platformcomo um escopo obrigatório. - Crie um ID do cliente OAuth 2.0.
Em Origens JavaScript autorizadas,
especifique as origens HTTP que têm permissão para hospedar e consultar seu agente.
Por exemplo,
https://your-company.com. - Dê aos usuários finais permissão para consultar seu agente. Adicione cada um dos usuários finais ou um grupo como principal com o papel Cliente da API Dialogflow.
- Crie uma tela de permissão OAuth para sua organização.
Adicione
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">
Personalização
É possível aplicar muitas personalizações de HTML e CSS para afetar a aparência e o comportamento da caixa de diálogo de chat.
JavaScript
Há muitos eventos JavaScript e funções JavaScript que podem ser usadas para interagir com a caixa de diálogo do chat.
Exemplo
O exemplo a seguir mostra a personalização de HTML e de CSS e o gerenciamento de eventos em JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>My chat</title>
<style>
df-messenger {
/*
* Customize as required. df-messenger will fill the
* space that is provided.
*/
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
}
</style>
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
location="global" <!-- TODO: update agent location as needed -->
project-id="my-project-id" <!-- TODO: update project ID -->
agent-id="my-agent-id" <!-- TODO: update agent ID -->
language-code="en" <!-- TODO: update agent language as needed -->
>
<df-messenger-chat
chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
></df-messenger-chat>
</df-messenger>
<script>
// An example of handling events: Navigate to the first suggested URL.
document.addEventListener('df-url-suggested', (event) => {
if (Array.isArray(event.detail.suggestedUrls) &&
event.detail.suggestedUrls.length) {
window.location.href = event.detail.suggestedUrls[0];
}
});
</script>
</body>
</html>
Fulfillment
Há muitos tipos de resposta de fulfillment que podem ser usados para respostas do agente.
Responder feedback
Se o feedback de resposta estiver ativado, por padrão, a caixa de diálogo do chat vai adicionar os botões "Gostei" e "Não gostei" à interface do usuário. Durante a conversa, o usuário final pode clicar nesses botões para dar feedback sobre as respostas do agente. Se o usuário selecionar "Não gostei", poderá informar um motivo para o feedback negativo.
Componente de feedback personalizado
Para especificar um elemento de feedback personalizado, é preciso definir um novo elemento personalizado no site.
Para enviar o feedback, o elemento precisa emitir um evento df-custom-submit-feedback-clicked. O campo detail contido precisa ser uma string.
class CustomFeedbackElement extends HTMLElement {
constructor() {
super();
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
this.renderRoot = this.attachShadow({mode: 'open'});
}
// Web component Lifecycle method.
connectedCallback() {
const wrapper = document.createElement('div');
// Build the component as required.
const button = document.createElement('button');
button.innerText = 'Submit';
button.addEventListener('click', () => {
this._onSubmitClick();
});
wrapper.appendChild(button);
this.renderRoot.appendChild(wrapper);
}
// Called when Submit button is clicked.
_onSubmitClick() {
const event = new CustomEvent("df-custom-submit-feedback-clicked", {
// `detail` may be any string,
// this will be sent to the backend to be stored.
detail: JSON.stringify({
"usefulness": 2,
"accuracy": 3,
}),
// Required to propagate up the DOM tree
// https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
bubbles: true,
// Required to propagate across ShadowDOM
// https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
composed: true,
});
this.dispatchEvent(event);
}
}
(function() {
// Registers the element. This name must be "df-external-custom-feedback".
customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();
Depuração
Para testar seu agente com o Dialogflow Messenger localmente:
- Incorpore o elemento do Dialogflow Messenger em uma página conforme descrito acima.
- Inicie um servidor HTTP local para essa página com uma porta específica.
- Acesse essa página em
http://localhost:port_number.