A integração legada do Dialogflow Messenger oferece uma caixa de diálogo de chat personalizável para seu agente que podem ser incorporados 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.
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. Recomendamos que todos os usuários da versão legada migrar para a nova versão.
Se você ativou a integração do Dialogflow Messenger antes de 29 de agosto de 2023, talvez você ainda esteja usando a versão legada. Para saber se você está usando a versão legada, examinar o código HTML do messenger incorporado em seu site. Se o script a seguir aparecer, 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:
- Exclua todo o código HTML, CSS e JavaScript do messenger de seu site.
- Siga as instruções do 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:
Eventos JavaScript
O Dialogflow Messenger aciona vários eventos que podem ser criados listeners de eventos pelas quais
A
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
},
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.
Por 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.
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();
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.
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.
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.
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.
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.
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" |
Por 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.
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.
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:
{
"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
.