Aplicativo de mensagens do Dialogflow

A integração do Dialogflow Messenger oferece uma caixa de diálogo de chat personalizável para o agente que pode ser incorporada ao seu site. A caixa de diálogo do chat é implementada como uma janela de diálogo que pode ser aberta e fechada pelo usuário final. Quando aberta, a caixa de diálogo de chat aparece acima do seu conteúdo, no canto inferior direito da tela.

Captura de tela do Messenger

Limitações

Configurar e testar

Para configurar e ativar o Dialogflow Messenger:

  1. Acesse o Console do Dialogflow ES.
  2. Clique em Integrations no menu da barra lateral à esquerda.
  3. Clique em Dialogflow Messenger.
  4. Uma caixa de diálogo de configuração é aberta.
  5. Escolha um ambiente.
  6. Clique em Ativar.
  7. Copie o código de incorporação para colar no seu site.
  8. Clique em Testar agora para testar seu agente.
  9. No canto inferior direito da janela, um botão aparece com o logotipo do Dialogflow. Clique nesse botão.
  10. Abre-se uma caixa de diálogo de chat com a qual você pode interagir.
  11. Feche a caixa de diálogo quando terminar o teste.
  12. Clique em Fechar na caixa de diálogo de configuração.

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. Para permitir layouts responsivos, adicione também os seguintes itens à sua página:

<meta name="viewport" content="width=device-width, initial-scale=1">

Personalizações de HTML

Você pode personalizar vários aspectos para definir como a caixa de diálogo de chat aparece e se comporta. O elemento HTML df-messenger tem os seguintes atributos:

Atributo Política de entrada Valor
agent-id Obrigatório Código do agente associado ao agente do Dialogflow. Ele é preenchido automaticamente com o ID do agente.
chat-icon Opcional Ícone usado para o botão de abertura da caixa de diálogo de chat. O ícone do Dialogflow é o padrão. Este campo deve ser um URL público. O tamanho do ícone deve ser de 36 x 36 pixels.
chat-title Obrigatório Título exibido na parte superior da caixa de diálogo do chat. Isso é preenchido antecipadamente com o nome do seu agente.
expand Opcional Atributo booleano que define a abertura da caixa de diálogo de chat quando a página for carregada. Por padrão, a caixa de diálogo de chat é fechada quando a página é carregada.
intent Opcional Evento usado para acionar a primeira intent quando a caixa de diálogo de chat é aberta. Esse valor é preenchido antecipadamente com o evento WELCOME.
language-code Obrigatório O código de idioma padrão para a primeira intent. Ele é preenchido automaticamente com o idioma padrão do agente.
session-id Opcional Um código da sessão. Se isso não for fornecido, a integração gerará um código exclusivo para cada caixa de diálogo de chat.
user-id Opcional Pode ser usado para rastrear um usuário em várias sessões. Você pode transmitir o valor ao Dialogflow pelo campo queryParams.payload.userId em uma solicitação de detecção de intent.
wait-open Opcional Atributo booleano que atrasa o evento de boas-vindas até que a caixa de diálogo seja realmente aberta.

Personalizações de CSS

Você pode personalizar o estilo da caixa de diálogo de chat definindo variáveis CSS.

As seguintes variáveis CSS podem ser fornecidas:

Variável CSS Propriedade afetada
df-messenger-bot-message Cor de segundo plano do balão para mensagens do agente.
df-messenger-button-titlebar-color Cor do botão flutuante e da barra de título da caixa de diálogo do chat.
df-messenger-button-titlebar-font-color Cor da fonte do título na barra de título.
df-messenger-chat-background-color Cor do segundo plano da caixa de diálogo de chat.
df-messenger-font-color Cor da fonte para mensagens.
df-messenger-input-box-color Cor do segundo plano da caixa de entrada de texto.
df-messenger-input-font-color Cor da fonte da caixa de entrada de texto.
df-messenger-input-placeholder-font-color Cor da fonte do texto do marcador na caixa de entrada de texto.
df-messenger-minimized-chat-close-icon-color Cor do ícone de fechamento na visualização de chat fechada.
df-messenger-send-icon Cor do ícone de envio na caixa de entrada de texto.
df-messenger-user-message Cor do segundo plano do balão para mensagens do usuário.

Código de exemplo:

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

As configurações acima resultarão em:

Captura de tela do Messenger

Eventos JavaScript

O Dialogflow Messenger aciona uma variedade de eventos para os quais você pode criar listeners de eventos.

O meta do evento para esses eventos é o elemento df-messenger.

Para adicionar um listener de eventos ao elemento df-messenger, adicione o seguinte código JavaScript, em que event-type é um dos nomes de eventos descritos abaixo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

Os seguintes tipos de evento são compatíveis:

df-accordion-clicked

Esse evento ocorre quando um usuário clica em um elemento acordeão. A estrutura do evento é semelhante a esta:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

df-button-clicked

Esse evento ocorre quando um usuário clica em um elemento de botão. A estrutura do evento é semelhante a esta:

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

df-chip-clicked

Esse evento ocorre quando um usuário seleciona um chip de sugestão. A estrutura do evento é semelhante a esta:

query: string // Text of the suggestion chip that was selected.

df-info-card-clicked

Esse evento ocorre quando o usuário final clica no item de informação na barra de título. A estrutura do evento é semelhante a esta:

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

df-list-element-clicked

Esse evento ocorre quando um usuário clica em um item em uma lista. A estrutura do evento é semelhante a esta:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string,
    parameters: {},
    languageCode: string
  },
  payload: {}
}

df-messenger-error

Esse evento ocorre quando a API do Dialogflow envia um código de status de erro. A estrutura do evento é semelhante a esta:

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

df-messenger-loaded

Este evento é acionado quando o elemento df-messenger é totalmente carregado e inicializado.

df-request-sent

Esse evento ocorre quando uma solicitação é feita à API do Dialogflow. Esse evento, junto com df-response-received, pode ser usado para monitorar a latência da solicitação. A estrutura do evento é semelhante a esta:

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

df-response-received

Esse evento ocorre quando uma resposta é recebida da API Dialogflow. A estrutura do evento é semelhante a esta:

response: detectIntentResponse

df-user-input-entered

Esse evento ocorre quando o usuário final insere uma consulta. A estrutura do evento é semelhante a esta:

input: string // Text entered by user

Funções JavaScript

O elemento df-messenger fornece funções que você pode chamar para afetar o comportamento dele.

renderCustomText

Essa função renderiza uma mensagem de texto simples, como se ela viesse do Dialogflow na forma de uma simples resposta de texto.

Exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');

renderCustomCard

Essa função renderiza um cartão personalizado, como se ele viesse do Dialogflow na forma de uma mensagem de resposta avançada. O formato da resposta do payload personalizado é definido na seção Mensagens de resposta avançada.

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
dfMessenger.renderCustomCard(payload);

showMinChat

Essa função mostra uma versão mínima das listas de mensagens.

Por exemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();

Mensagens de resposta avançadas

Ao criar mensagens de resposta avançadas, você pode criar Respostas de texto e Payloads personalizados na guia de resposta Padrão da intent. As respostas de texto são usadas para respostas básicas do agente. Já os payloads personalizados são usados para respostas avançadas. O formato de payload personalizado para todos os tipos de resposta tem a seguinte estrutura básica:

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

Observe que o valor richContent permite uma matriz externa e várias internas. As respostas dentro de uma matriz interna são unidas em um único cartão visual. Quando a matriz externa contém várias internas, diversos cartões são exibidos, um para cada matriz interna.

As subseções restantes descrevem os vários tipos de respostas que você pode configurar para um payload personalizado.

Tipo de resposta da informação

O tipo de resposta de informações é um cartão de título simples onde os usuários podem clicar ou tocar.

Captura de tela do Messenger

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "info"
title string Título do cartão
subtitle string Legenda do cartão
image objeto Imagem
image.src objeto Origem da imagem
image.src.rawUrl string URL público para imagem
actionLink string URL a ser seguido quando o cartão é clicado

Por exemplo:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "actionLink": "https://example.com"
      }
    ]
  ]
}

Tipo de resposta da descrição

O tipo de resposta de descrição é um cartão informativo que pode ter várias linhas de texto.

Captura de tela do Messenger

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "description"
title string Título do cartão
text matriz<string> Matriz de strings, em que cada string é renderizada em uma nova linha

Por exemplo:

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

Tipo de resposta da imagem

O tipo de resposta de imagem é um cartão de imagem onde os usuários podem clicar ou tocar.

Captura de tela do Messenger

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "image"
rawUrl string URL público para imagem
accessibilityText string Texto alternativo para imagem

Por exemplo:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

Tipo de resposta do botão

O tipo de resposta do botão é um botão pequeno com um ícone onde os usuários podem clicar ou tocar.

Captura de tela do Messenger

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "button"
icon objeto Ícone do botão
icon.type string Ícone da Biblioteca de ícones de materiais. O ícone padrão é uma seta.
icon.color string Código de cor hexadecimal
text string Texto do botão
link string URL a ser seguido quando o botão for clicado
event objeto Evento do Dialogflow acionado quando o botão recebe um clique, consulte a referência REST EventInput

Por exemplo:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

Tipo de resposta de lista

O tipo de resposta de lista é um cartão com várias opções que os usuários podem selecionar.

Captura de tela do Messenger

A resposta contém uma matriz de tipos de resposta list e divider. A tabela a seguir descreve o tipo list:

Nome Tipo Descrição
type string Tipo de resposta: "list"
title string Título da opção
subtitle string Subtítulo da opção
event objeto Evento do Dialogflow acionado quando a opção é clicada, consulte a referência REST EventInput

A tabela a seguir descreve o tipo divider:

Nome Tipo Descrição
type string Tipo de resposta: "divider"

Por exemplo:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

Tipo de resposta de acordeão

O tipo de resposta de acordeão é um pequeno cartão onde um usuário pode clicar ou tocar para expandir e revelar mais texto.

Captura de tela do Messenger

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "accordion"
title string Título do acordeão
subtitle string Legenda do acordeão
image objeto Imagem
image.src objeto Origem da imagem
image.src.rawUrl string URL público para imagem
text string Texto de acordeão

Por exemplo:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Tipo de resposta do ícone de sugestão

O tipo de resposta do ícone de sugestão fornece ao usuário final uma lista de ícones de sugestão clicáveis.

Captura de tela do Messenger

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "chips"
options matriz<object> Matriz de objetos de opção
options[].text string Texto da opção
options[].image objeto Imagem da opção
options[].image.src objeto Origem da imagem da opção
options[].image.src.rawUrl string URL público da opção para imagem
options[].link string Link da opção

Por exemplo:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "text": "Chip 1",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          },
          {
            "text": "Chip 2",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          }
        ]
      }
    ]
  ]
}

Combinação de tipos de resposta

Os elementos de mensagens avançadas individuais do Dialogflow Messenger podem ser usados para criar um cartão personalizado que atenda às suas necessidades. Veja um exemplo usando alguns dos elementos listados acima:

Captura de tela do Messenger

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "subtitle": "Build natural and rich conversational experiences",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

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.