Esta integração oferece uma caixa de diálogo de chat personalizável para o seu agente que pode ser incorporada no seu Website.
Configuração
Esta integração pode permitir o acesso a consultas de agentes de utilizadores finais autenticados ou não autenticados.
Configuração não autenticada
Para configurar o acesso não autenticado ao seu agente do Dialogflow CX Messenger:
- Aceda à consola Dialogflow CX.
- Escolha o seu projeto do Google Cloud.
- Selecione o seu agente.
- Selecione o separador Gerir.
- Clique em Integrações no menu da barra lateral esquerda.
- Clique em Associar no Dialogflow CX Messenger.
- É aberta uma caixa de diálogo de configuração.
- Se a integração tiver sido configurada anteriormente para este agente, é apresentado um código HTML incorporável. Independentemente de querer ou não o que foi autenticado ou não autenticado, clique no botão Desativar… na parte inferior da caixa de diálogo, para poder reconfigurar as definições no passo seguinte.
- Selecione um Ambiente.
- Selecione API não autenticada.
- Selecione um estilo.
- Restrinja opcionalmente 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 no seu Website. Copie este código.
- Clique em Concluído.
Configuração autenticada
Para configurar o acesso autenticado ao seu agente do Dialogflow CX Messenger:
- Aceda à consola Dialogflow CX.
- Escolha o seu projeto do Google Cloud.
- Selecione o seu agente.
- Selecione o separador Gerir.
- Clique em Integrações no menu da barra lateral esquerda.
- Clique em Associar no Dialogflow CX Messenger.
- É aberta uma caixa de diálogo de configuração.
- Se a integração tiver sido configurada anteriormente para este agente, é apresentado um código HTML incorporável. Independentemente de querer ou não o que foi autenticado ou não autenticado, clique no botão Desativar… na parte inferior da caixa de diálogo, para poder reconfigurar as definições no passo seguinte.
- Selecione um Ambiente.
- Selecione API autorizada.
- Selecione um estilo.
- Restrinja opcionalmente 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 no seu Website. Copie este código.
- Clique em Concluído.
- Configure o cliente OAuth:
- Crie um ecrã de consentimento OAuth
para a sua organização.
Adicione
https://www.googleapis.com/auth/cloud-platformcomo um âmbito obrigatório. - Crie um ID de cliente OAuth 2.0.
Em Origens JavaScript autorizadas,
especifique as origens HTTP autorizadas a alojar e consultar o seu agente.
Por exemplo,
https://your-company.com. - Conceda aos utilizadores finais autorização para consultar o seu agente. Adicione cada um dos seus utilizadores finais ou um grupo como principal com as funções Cliente da API Dialogflow e Consumidor de utilização de serviços.
- Crie um ecrã de consentimento OAuth
para a sua organização.
Adicione
Incorporar
Cole o código de incorporação que copiou acima numa página Web do seu Website.
Os elementos HTML <script> e <df-messenger> devem estar no elemento <body> da sua página.
Se estiver a usar uma integração autenticada,
defina o atributo oauth-client-id para <df-messenger>
com o ID de cliente OAuth. Se quiser usar as identidades dos utilizadores finais para a autenticação de ferramentas,
defina o atributo access-token-name com qualquer nome que quiser.
Em seguida, use o token de portador com o valor $session.params.ACCESS_TOKEN_NAME
para a autenticação da ferramenta.
Atualize quaisquer outros atributos que exijam atualização.
Para permitir esquemas responsivos,
adicione também o seguinte ao elemento <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalização
Existem muitas personalizações de HTML e personalizações de CSS que pode aplicar para afetar o aspeto e o comportamento da caixa de diálogo de chat.
JavaScript
Existem muitos eventos JavaScript e funções JavaScript que pode usar para interagir com a caixa de diálogo do chat.
Exemplo
O exemplo seguinte mostra a personalização de HTML, a personalização de CSS e o 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
Existem muitos tipos de respostas de processamento que pode usar para as respostas do agente.
Feedback sobre as respostas
Se o feedback de respostas estiver ativado, por predefinição, a caixa de diálogo do chat adiciona botões de gosto e não gosto à interface do utilizador. Durante a conversa, um utilizador final pode clicar nestes botões para enviar feedback sobre as respostas do agente. Se o utilizador selecionar Não gosto, pode, opcionalmente, indicar um motivo para o feedback negativo.
Componente de feedback personalizado
Para especificar um elemento de feedback personalizado, tem de definir um novo elemento personalizado no Website.
Para enviar o feedback, o elemento tem de emitir um evento df-custom-submit-feedback-clicked. O campo detail contido tem de 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 o seu agente com o Dialogflow CX Messenger localmente:
- Incorpore o elemento Dialogflow CX Messenger numa página, conforme descrito acima.
- Inicie um servidor HTTP local para essa página com uma porta específica.
- Aceda a essa página em
http://localhost:port_number.