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 permite que você forneça acesso autenticado ou não autenticado à consulta do user agent do usuário final.
Configuração não autenticada
Para configurar o acesso não autenticado ao 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, você vai encontrar um código HTML incorporável. Independentemente de você querer o que é autenticado ou não, clique no botão Desativar… na parte de baixo da caixa de diálogo para redefinir 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 vai mostrar o código HTML que pode ser incorporado ao seu site. Copie esse código.
- Clique em Concluído.
Configuração autenticada
Para configurar o acesso autenticado ao 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, você vai encontrar um código HTML incorporável. Independentemente de você querer o que é autenticado ou não, clique no botão Desativar… na parte de baixo da caixa de diálogo para redefinir 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 vai mostrar o código HTML 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 usuários finais ou um grupo como principal com os papéis de 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 você quiser usar as identidades dos usuários finais para a autenticação de ferramentas, defina o atributo access-token-name com o nome que preferir.
Em seguida, use o token do portador com o valor $session.params.ACCESS_TOKEN_NAME
para autenticação da ferramenta.
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 várias personalizações de HTML e personalizações de CSS para afetar a aparência e o comportamento da caixa de diálogo do 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 a personalização de HTML, 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
É possível usar vários tipos de resposta de fulfillment para respostas do agente.
Feedback sobre a resposta
Se o feedback de resposta estiver ativado, por padrão, a caixa de diálogo do chat adicionará os botões de gostei e não gostei à interface do usuário. Durante a conversa, clique nesses botões para enviar feedback sobre as respostas do agente. Se você clicar em "Não gostei", poderá fornecer um motivo para o feedback negativo.
Componente de feedback personalizado
Para especificar um elemento de feedback personalizado, defina 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 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.
- Abra essa página em
http://localhost:port_number.