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.
Limitações
- Apenas o idioma padrão do agente. é compatível com essa integração.
Configurar e testar
Para configurar e ativar o Dialogflow Messenger:
- Acesse o Console do Dialogflow ES.
- Clique em Integrations no menu da barra lateral à esquerda.
- Clique em Dialogflow Messenger.
- Uma caixa de diálogo de configuração é aberta.
- Escolha um ambiente.
- Clique em Ativar.
- Copie o código de incorporação para colar no seu site.
- Clique em Testar agora para testar seu agente.
- No canto inferior direito da janela, um botão aparece com o logotipo do Dialogflow. Clique nesse botão.
- Abre-se uma caixa de diálogo de chat com a qual você pode interagir.
- Feche a caixa de diálogo quando terminar o teste.
- 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:
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.
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 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.
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.
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.