Dialogflow CX Messenger legado

A integração legada do Dialogflow CX Messenger oferece uma caixa de diálogo de chat personalizável para seu agente que pode ser incorporada ao seu site. Os usuários podem abrir e fechar a caixa de diálogo do chat como uma janela. Quando um usuário abre a caixa de diálogo do chat, ela aparece acima do seu conteúdo no canto inferior direito da tela.

Migrar para o Dialogflow CX Messenger mais recente

A versão mais recente do Dialogflow CX Messenger oferece autenticação para controlar o acesso a consultas do agente e mais opções de configuração da interface do usuário. Recomendamos que você migre da versão legada para a nova.

Se você ativou a integração do Dialogflow CX Messenger antes de 29 de agosto de 2023, talvez esteja usando a versão legada. Para determinar se você está usando a versão legada, examine o código HTML do Messenger incorporado no seu site. Se você encontrar o script a seguir, significa que 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, siga estas etapas:

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

Personalizações de HTML

É possível personalizar vários aspectos da aparência e do comportamento da caixa de diálogo do chat.

O elemento HTML df-messenger tem os seguintes atributos:

Atributo Política de entrada Valor
agent-id Obrigatório ID do agente associado ao agente. 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 CX é 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 de 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 do chat é aberta. É possível usar um manipulador de eventos que é chamado para esse evento e produz 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 vai gerar um ID exclusivo para cada caixa de diálogo de chat.
user-id Opcional Permite rastrear um usuário em várias sessões. É possível transmitir o valor para o Dialogflow CX pelo campo queryParams.payload.userId em uma solicitação de detecção de intent, e o Dialogflow CX fornece esse valor pelo 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 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 de preenchimento na caixa de entrada de texto.
df-messenger-minimized-chat-close-icon-color Cor do ícone "Fechar" na visualização de chat fechado.
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.

Exemplo de código:

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

Essas configurações vão resultar em:

Uma caixa de diálogo de chat

Eventos JavaScript

O Dialogflow Messenger aciona vários eventos para os quais você pode criar listeners de eventos.

O destino 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
  },
  payload: {}
}

df-messenger-error

Esse evento ocorre quando a API 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 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

É possível chamar funções fornecidas pelo elemento df-messenger para afetar o comportamento dele.

renderCustomText

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

Exemplo:

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

renderCustomCard

Essa função renderiza um card personalizado, como se viesse do fulfillment do Dialogflow CX. O formato da resposta do 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, é possível criar respostas de texto e payloads personalizados. As respostas de texto são usadas para respostas básicas do agente, e os payloads personalizados são usados para respostas ricas. 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",
        ...
      }
    ]
  ]
}

O valor richContent permite uma matriz externa e várias matrizes internas. As respostas em uma matriz interna são vinculadas em um único card visual. Quando a matriz externa contém várias matrizes internas, vários cartões são mostrados, 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 card de título que pode ser tocado ou clicado.

Um card de item de informação

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "info".
title string Título do card.
subtitle string Subtítulo do card.
image objeto Imagem.
image.src objeto Origem da imagem.
image.src.rawUrl string URL público da imagem.
actionLink string URL a ser seguido quando o card é 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 card informativo que pode ter várias linhas de texto.

Um card de descrição

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "description".
title string Título do card.
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.

Um card de imagem

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "image".
rawUrl string URL público da imagem.
accessibilityText string Texto alternativo da 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 de botão é um botão pequeno com um ícone e um rótulo de texto em que você pode clicar ou tocar.

Um botão pequeno

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 do Material Design. O ícone padrão é uma seta.
icon.color string Código hexadecimal da cor.
text string Texto do botão.
link string URL a ser seguido quando o botão é clicado.
event objeto Evento do Dialogflow CX 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.

Um card de item da lista

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 CX 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 em acordeão é um pequeno card que pode ser clicado ou tocado para expandir e revelar mais texto.

Um card de acordeão

A tabela a seguir descreve os campos:

Nome Tipo Descrição
type string Tipo de resposta: "accordion".
title string Título do accordion.
subtitle string Subtítulo do accordion.
image objeto Imagem.
image.src objeto Origem da imagem.
image.src.rawUrl string URL público da imagem.
text string Texto para o 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 chip de sugestão

O tipo de resposta de chip de sugestão de resposta fornece ao usuário final uma lista de chips de sugestão de resposta clicáveis.

Um card de chip de sugestão de resposta

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 opcional para a imagem.
options[].link string URL do 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

É possível usar os elementos individuais de mensagem avançada do Dialogflow CX Messenger para criar um card personalizado que atenda às suas necessidades.

Confira um exemplo que usa alguns dos elementos listados anteriormente:

Um card personalizado

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "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 o agente localmente com o Dialogflow CX Messenger:

  • Incorpore o elemento do Dialogflow CX Messenger em uma página, conforme descrito na seção Personalizações de HTML.
  • Inicie um servidor HTTP local para essa página com uma porta específica.
  • Acesse http://localhost:port_number para abrir essa página.