Dialogflow Messenger legado

A integração legada do Dialogflow Messenger oferece uma caixa de diálogo de chat personalizável para o agente que pode ser incorporada ao 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.

Como migrar para o novo Dialogflow Messenger

A nova versão do Dialogflow Messenger fornece autenticação para controlar o acesso a consultas do agente e mais opções de configuração da interface do usuário. É recomendável que todos os usuários da versão legada migrem para a nova versão.

Se você ativou a integração do Dialogflow Messenger antes de 29 de agosto de 2023, talvez ainda esteja usando a versão legada. Para determinar se você está usando a versão legada, examine o código HTML do app de mensagens incorporado ao seu site. Se o script a seguir aparecer, significa que você está usando a versão legada:

https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1

Para migrar para a nova versão:

  1. Exclua todo o código HTML, CSS e JavaScript do messenger de seu site.
  2. Siga as instruções para a nova integração do Dialogflow Messenger.

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.
df-cx Obrigatório Indica que a interação é com um agente CX. Use "true" como valor.
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 Um evento personalizado que é invocado quando a caixa de diálogo de chat é aberta. Use um manipulador de eventos que será chamado para esse evento e produzirá a primeira mensagem do agente.
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.
location Obrigatório A regiã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. É possível transmitir o valor para o Dialogflow pelo campo queryParams.payload.userId em uma solicitação de detecção de intent, e o Dialogflow fornece esse valor por meio do campo WebhookRequest.payload.userId.
wait-open Opcional Atributo booleano que atrasa o evento personalizado definido no atributo intent 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 destino do evento é 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
  },
  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 fulfillment do Dialogflow. O formato da resposta de payload personalizado é definido na seção Fulfillment.

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.

Exemplo:

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

Fulfillment

Ao criar o fulfillment, crie Respostas de texto e Payloads personalizados . 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

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

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

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 que é acionado quando o botão é clicado.

Exemplo:

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

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 que é acionado quando a opção é clicada

A tabela a seguir descreve o tipo divider:

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

Exemplo:

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

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

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 array<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

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.