Essa integração oferece uma caixa de diálogo de chat personalizável para seu agente que pode ser incorporada ao seu site.
Configuração
Essa integração pode permitir o acesso autenticado ou não autenticado a consultas de agentes do usuário final.
Configuração não autenticada
Para configurar o acesso não autenticado ao seu agente do Dialogflow CX 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 CX Messenger.
- Uma caixa de diálogo de configuração é aberta.
- Se a integração já tiver sido configurada para esse agente, um código HTML incorporável vai aparecer. Independente de você querer o que foi autenticado ou não autenticado, 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.
- Se quiser, restrinja o acesso ao domínio.
- Clique em Ativar a API não autenticada.
- A caixa de diálogo vai mostrar o código HTML incorporável que pode ser incorporado ao seu site. Copie esse código.
- Clique em Concluído.
Configuração autenticada
Para configurar o acesso autenticado ao seu agente do Dialogflow CX 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 CX Messenger.
- Uma caixa de diálogo de configuração é aberta.
- Se a integração já tiver sido configurada para esse agente, um código HTML incorporável vai aparecer. Independente de você querer o que foi autenticado ou não autenticado, 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.
- Se quiser, restrinja o acesso ao domínio.
- Clique em Ativar a API autorizada.
- A caixa de diálogo vai mostrar o código HTML incorporável que pode ser incorporado ao seu 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
https://www.googleapis.com/auth/cloud-platformcomo um escopo obrigatório. - Crie um ID do cliente OAuth 2.0.
Em Origens JavaScript autorizadas, especifique as origens HTTP que podem hospedar e consultar seu agente.
Por exemplo,
https://your-company.com. - Conceda aos usuários finais permissão para consultar seu agente. Adicione cada um dos seus usuários finais ou um grupo como um principal com os papéis Cliente da API Dialogflow e Consumidor do Service Usage.
- Crie uma tela de permissão OAuth
para sua organização.
Adicione
Incorporar
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 para <df-messenger>
como seu ID do cliente OAuth. Se quiser usar as identidades dos usuários finais para autenticação de
ferramentas,
defina o atributo access-token-name com qualquer nome que quiser.
Em seguida, use o token do portador com o valor $session.params.ACCESS_TOKEN_NAME
para autenticação da ferramenta.
Atualize outros atributos que precisem de atualização.
Para permitir layouts responsivos,
adicione também o seguinte ao elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalização
Há muitas personalizações de HTML e CSS que podem ser aplicadas para afetar a aparência e o comportamento da caixa de diálogo de chat.
JavaScript
Há muitos eventos e funções do JavaScript que podem ser usados para interagir com a caixa de diálogo do chat.
Exemplo
O exemplo a seguir mostra personalização de HTML, personalização de CSS e processamento de eventos 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 atendimento que você pode usar para respostas do agente.
Feedback sobre a resposta
Se o feedback de resposta estiver ativado, por padrão, a caixa de diálogo de chat vai adicionar botões de polegar para cima e para baixo à interface do usuário. Durante a conversa, um usuário final pode clicar nesses botões para dar feedback sobre as respostas do agente. Se o usuário selecionar "Não gostei", ele poderá informar o motivo do feedback negativo.
Componente de feedback personalizado
Para especificar um elemento de feedback personalizado, um novo elemento personalizado precisa ser definido 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 CX Messenger localmente:
- Incorpore o elemento do Dialogflow CX 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.