Dialogflow CX Messenger

Essa integração oferece uma caixa de diálogo de chat personalizável para seu agente, que pode ser incorporada ao seu site.

Captura de tela do Dialogflow Messenger

Configuração

Essa integração pode permitir autenticação de usuários de acesso de usuário final a consultas do agente de usuário final.

Configuração não autenticada

Para configurar o acesso não autenticado ao agente do Dialogflow CX 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 CX Messenger.
  7. Uma caixa de diálogo de configuração é aberta.
  8. Se a integração tiver sido configurada anteriormente para esse agente, você vai encontrar 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 este código.
  15. Clique em Concluído.

Configuração autenticada

Para configurar o acesso autenticado ao seu agente do Dialogflow CX 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 CX Messenger.
  7. Uma caixa de diálogo de configuração é aberta.
  8. Se a integração tiver sido configurada anteriormente para esse agente, você vai encontrar 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 este código.
  15. Clique em Concluído.
  16. Configure o cliente OAuth:
    1. Crie uma tela de consentimento OAuth para 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. Conceda 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 de <df-messenger> para o 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

Há muitas personalizações de HTML e personalizações de CSS que podem ser aplicadas 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.

Feedback sobre a resposta

Se o feedback de resposta estiver ativado, por padrão, a caixa de diálogo do chat vai adicionar "Gostei" 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, é necessário definir 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.
  • Acesse essa página em http://localhost:port_number.