Aplicativo de mensagens do Dialogflow

Essa integração fornece uma caixa de diálogo de chat personalizável para seu agente. que podem ser incorporados ao seu site.

Captura de tela do Dialogflow Messenger

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:

  1. Acesse o Console do Dialogflow CX.
  2. Escolha seu projeto do Google Cloud.
  3. Selecione seu agente.
  4. Selecione a guia Manage.
  5. Clique em Integrations no menu da barra lateral à esquerda.
  6. Clique em Conectar no Dialogflow Messenger.
  7. Uma caixa de diálogo de configuração é aberta.
  8. 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.
  9. Selecione um Ambiente.
  10. Selecione API não autenticada.
  11. Selecione um estilo.
  12. É possível restringir o acesso ao domínio.
  13. Clique em Ativar a API não autenticada.
  14. A caixa de diálogo vai mostrar o código HTML incorporável que podem ser incorporados ao seu site. Copie esse código.
  15. Clique em Concluído.

Configuração autenticada

Para configurar o acesso autenticado ao seu agente do Dialogflow Messenger:

  1. Acesse o Console do Dialogflow CX.
  2. Escolha seu projeto do Google Cloud.
  3. Selecione seu agente.
  4. Selecione a guia Manage.
  5. Clique em Integrations no menu da barra lateral à esquerda.
  6. Clique em Conectar no Dialogflow Messenger.
  7. Uma caixa de diálogo de configuração é aberta.
  8. 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.
  9. Selecione um Ambiente.
  10. Selecione API autorizada.
  11. Selecione um estilo.
  12. É possível restringir o acesso ao domínio.
  13. Clique em Ativar a API autorizada.
  14. A caixa de diálogo vai mostrar o código HTML incorporável que podem ser incorporados ao seu site. Copie esse código.
  15. Clique em Concluído.
  16. Configure o cliente OAuth:
    1. Criar uma tela de permissão OAuth na sua organização. Adicione ./auth/cloud-platform como um escopo obrigatório.
    2. 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.
    3. 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.
.

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.