Essa integração fornece uma caixa de diálogo de chat personalizável para seu agente. que podem ser incorporados ao seu site.
Configuração
Essa integração pode permitir autenticação de usuários acesso a consultas do agente de usuário final.
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. Independentemente de você querer autenticação 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.
- É possível restringir 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 podem ser incorporados ao seu site. Copie esse código.
- Clique em Concluído.
Configuração autenticada
Para configurar o acesso autenticado ao seu 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. Independentemente de você querer autenticação 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.
- É possível restringir 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 podem ser incorporados ao seu site. Copie esse código.
- Clique em Concluído.
- Configure o cliente OAuth:
- Criar uma tela de permissão OAuth
na sua organização.
Adicione
./auth/cloud-platform
como um escopo obrigatório. - Crie um ID do cliente OAuth 2.0.
Em Origens JavaScript autorizadas, faça o seguinte:
especificar as origens HTTP que têm permissão para hospedar e consultar o agente.
Por exemplo,
https://your-company.com
. - Forneça aos usuários finais permissão para consultar seu agente. Adicione cada um dos seus usuários finais ou um grupo como principal com o cliente da API Dialogflow e Consumidor do Service Usage papéis de segurança na nuvem.
- Criar uma tela de permissão OAuth
na 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>
ao seu ID do cliente OAuth.
Atualize todos os outros atributos que precisam de atualização.
Para permitir layouts responsivos,
Adicione também o seguinte ao seu elemento <head>
:
<meta name="viewport" content="width=device-width, initial-scale=1">
Personalização
Existem várias Personalizações de HTML e Personalizações de CSS que podem ser aplicados para afetar a aparência e o comportamento da caixa de diálogo de chat.
JavaScript
Existem várias Eventos do JavaScript e Funções JavaScript que você pode usar para interagir com a caixa de diálogo do chat.
Exemplo
O exemplo a seguir mostra Personalização 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
Existem várias tipos de resposta de fulfillment que pode ser usado para respostas do agente.
Responder feedback
Se o feedback de resposta estiver ativado, a caixa de diálogo do chat vai adicionar "Gostei" por padrão. 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", ela pode informar um motivo para o 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 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
.