Quando cria um cartão personalizado de preenchimento, pode criar respostas de texto e conteúdos úteis personalizados. As respostas de texto são usadas para texto simples e respostas de agentes em Markdown, e os payloads personalizados são usados para respostas avançadas. O formato do payload personalizado para todos os tipos de respostas tem a seguinte estrutura básica:
{
"richContent": [
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
],
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
]
]
}
Tenha em atenção que o valor richContent permite um conjunto exterior e vários conjuntos interiores.
As respostas numa matriz interna estão associadas num único cartão visual.
Quando a matriz exterior contém várias matrizes interiores, são apresentados vários cartões, um para cada matriz interior.
As subsecções restantes descrevem os vários tipos de respostas que pode configurar para um payload personalizado.
Resposta de texto
A resposta de texto suporta texto simples e Markdown. Seguem-se alguns exemplos de Markdown:
*Italic***Bold**# Title[Link text](Link URL)Tabelas:
Header 1 | Header 2 -------- | -------- Cell 1 | Cell 2
Tipo de resposta de informações
O tipo de resposta de informações é um cartão de título simples no qual os utilizadores podem clicar ou tocar.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "info" |
title |
string |
Título do cartão |
subtitle |
string |
Subtítulo do cartão |
image |
object |
Imagem |
image.rawUrl |
string |
URL público da imagem |
anchor |
object |
Âncora a seguir quando o elemento é clicado |
anchor.href |
string |
URL da âncora |
anchor.target |
string |
Alvo da âncora, predefinido como _blank |
Por exemplo:
{
"richContent": [
[
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com"
}
}
]
]
}
Tipo de resposta de descrição
O tipo de resposta de descrição é um cartão informativo que pode ter várias linhas de texto.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "description" |
title |
string |
Título do cartão |
text |
array<string> |
Matriz de strings, em que cada string é renderizada numa nova linha |
Por exemplo:
{
"richContent": [
[
{
"type": "description",
"title": "Description title",
"text": [
"This is text line 1.",
"This is text line 2."
]
}
]
]
}
Tipo de resposta de imagem
O tipo de resposta de imagem é um cartão de imagem no qual os utilizadores podem clicar ou tocar. O tipo de resposta suporta um chip de referência que permite adicionar a origem da imagem como um link de âncora juntamente com um texto descritivo curto e um ícone.
A tabela seguinte 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 |
reference.text |
string |
Texto a apresentar no chip de referência |
reference.anchor.href |
string |
URL do chip de referência |
reference.anchor.target |
string |
Alvo da âncora no chip de referência, predefinido como _blank |
reference.image.rawUrl |
string |
Imagem a apresentar no chip de referência |
Por exemplo:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Example logo",
"reference": {
"text": "Logo",
"anchor": {
"href": "https://example.com/images/logo.png"
},
"image": {
"rawUrl": "https://example.com/images/logo_small.png"
}
}
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-image-border-radius |
Opcional | 8px | Raio do limite da imagem |
Tipo de resposta em vídeo
O tipo de resposta de vídeo renderiza um elemento de vídeo que pode ser um vídeo direto do URL, reproduzido diretamente no Messenger, ou um link para um vídeo.
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "video" |
title |
string |
Título do vídeo opcional |
source |
object |
A origem do vídeo |
source.type |
string |
Um tipo de origem de vídeo, link ou raw |
source.anchor |
object |
Âncora a seguir quando o elemento é clicado |
source.embeddedPlayer |
string |
Um vídeo do tipo link pode ser incorporado em vez de ter um link para a página Web do leitor. Isto só é implementado para um conjunto conhecido de leitores e é compatível com youtube. |
source.thumbnail |
object |
Miniatura a apresentar para o vídeo anchor |
source.thumbnail.rawUrl |
string |
O URL da miniatura |
source.rawUrl |
string |
URL de um vídeo do tipo raw |
Por exemplo:
{
"richContent": [
[
{
"type": "video",
"source": {
"type": "link",
"anchor": {
"href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
}
}
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-video-width |
Opcional | automático | Largura de um vídeo (limitada por max-width\: 100%) |
df-messenger-video-height |
Opcional | automático | Altura de um vídeo |
df-messenger-video-embed-width |
Opcional | 560px | Largura de um vídeo incorporado (limitada por max-width\: 100%) |
df-messenger-video-embed-height |
Opcional | 315px | Altura de um vídeo incorporado |
df-messenger-video-border |
Opcional | 1px solid #e0e0e0 | Limite do vídeo |
df-messenger-video-border-radius |
Opcional | 8px | Raio do limite do vídeo |
Tipo de resposta do botão
O tipo de resposta de botão é um pequeno botão com um ícone que os utilizadores podem clicar ou tocar.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "button" |
icon |
object |
Ícone do botão |
icon.type |
string |
Ícone da biblioteca de ícones Material. O ícone predefinido é uma seta |
icon.color |
string |
Código hexadecimal da cor |
image |
object |
Imagem do botão, tem prioridade sobre icon |
image.rawUrl |
string |
URL público da imagem |
mode |
string |
Opcional. Se estiver definido como "bloqueio", a introdução do utilizador é desativada até o utilizador clicar no botão |
text |
string |
Texto do botão |
anchor |
object |
Âncora a seguir quando o elemento é clicado |
anchor.href |
string |
URL da âncora |
anchor.target |
string |
Alvo da âncora, predefinido como _blank |
event |
object |
Evento do Dialogflow acionado quando o utilizador clica no botão. |
Por exemplo:
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"mode": "blocking",
"text": "Button text",
"anchor": {
"href": "https://example.com"
},
"event": {
"event": ""
}
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-button-border |
Opcional | nenhum | Limite de um botão |
df-messenger-button-border-radius |
Opcional | 8px | Raio do limite de um botão |
df-messenger-button-font-color |
Opcional | #1f1f1f | Cor do texto de um botão |
df-messenger-button-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de tipos de letra de um botão |
df-messenger-button-font-size |
Opcional | 14px | Tamanho do tipo de letra de um botão |
df-messenger-button-padding |
Opcional | 12px | Espaçamento de um botão |
df-messenger-button-icon-spacing |
Opcional | 12px | Espaço entre o ícone do botão e o texto |
df-messenger-button-icon-font-size |
Opcional | 24px | Tamanho do ícone do botão |
df-messenger-button-image-size |
Opcional | 24px | Tamanho da imagem do botão |
df-messenger-button-image-offset |
Opcional | 0 | Desvio da imagem do botão, permite valores negativos para desviar o preenchimento |
df-messenger-button-text-align |
Opcional | centro | Alinhamento do texto de um botão |
df-messenger-button-text-wrap |
Opcional | normal | Use nowrap para não permitir botões com várias linhas |
Tipo de resposta da lista
O tipo de resposta de lista é um cartão com várias opções que os utilizadores podem selecionar.
A resposta contém uma matriz de tipos de respostas list e divider.
A tabela seguinte 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 |
object |
Evento do Dialogflow acionado quando a opção é clicada |
anchor |
object |
Âncora a seguir quando o elemento é clicado |
anchor.href |
string |
URL da âncora |
anchor.target |
string |
Alvo da âncora, predefinido como _blank |
image |
object |
Imagem |
image.rawUrl |
string |
URL público da imagem |
A tabela seguinte 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": {
"event": ""
}
},
{
"type": "list",
"title": "List item 2 title",
"subtitle": "List item 2 subtitle",
"event": {
"event": ""
}
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-list-padding |
Opcional | 16px | Preenchimento de um elemento de lista |
df-messenger-list-inset |
Opcional | 0 | "Inserção" horizontal adicional do elemento de lista (além do preenchimento), para controlar a expansão do limite entre elementos |
df-messenger-list-spacing |
Opcional | 10px | Espaço vertical entre elementos da lista |
df-messenger-list-border-bottom |
Opcional | 1px solid #e0e0e0 | Limite entre elementos da lista |
Tipo de resposta de acordeão
O tipo de resposta de acordeão é um pequeno cartão que um utilizador pode clicar ou tocar para expandir e revelar mais texto.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "acordeão" |
title |
string |
Título do acordeão |
subtitle |
string |
Subtítulo do acordeão |
image |
object |
Imagem |
image.rawUrl |
string |
URL público da imagem |
text |
string |
Texto do acordeão |
Por exemplo:
{
"richContent": [
[
{
"type": "accordion",
"title": "Accordion title",
"subtitle": "Accordion subtitle",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"text": "Accordion text"
}
]
]
}
Tipo de resposta do chip de sugestão
O tipo de resposta do chip de sugestão fornece ao utilizador final uma lista de chips de sugestão clicáveis.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "chips" |
options |
array<object> |
Matriz de objetos Option |
options[].mode |
string |
Opcional. Se estiver definido como "bloqueio", a introdução do utilizador é desativada até o utilizador clicar no chip |
options[].text |
string |
Texto da opção |
options[].image |
object |
Opcional, imagem da opção |
options[].image.rawUrl |
string |
URL público opcional para a imagem |
options[].anchor |
object |
Opcional, Âncora a seguir quando o elemento é clicado |
options[].anchor.href |
string |
URL da âncora |
options[].anchor.target |
string |
Alvo da âncora, predefinido como _blank |
Por exemplo:
{
"richContent": [
[
{
"type": "chips",
"options": [
{
"mode": "blocking",
"text": "Chip 1",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com"
}
},
{
"text": "Chip 2",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com"
}
}
]
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-chips-spacing |
Opcional | 10px | Espaço acima dos chips para a mensagem anterior |
df-messenger-chips-border-color |
Opcional | #e0e0e0 | Cor do limite de um chip |
df-messenger-chips-border-color-hover |
Opcional | #e0e0e0 | Cor do limite de um chip quando o rato passa por cima |
df-messenger-chips-border-radius |
Opcional | 999px | Raio do limite de um chip |
df-messenger-chips-background |
Opcional | branco | Fundo de um chip |
df-messenger-chips-background-hover |
Opcional | rgba(68, 71, 70, 0,08) | Fundo de um chip quando passa o cursor do rato sobre ele |
df-messenger-chips-padding |
Opcional | 6px 16px | Preenchimento de um chip |
df-messenger-chips-font-color |
Opcional | preto | Cor do texto de um chip |
df-messenger-chips-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de tipos de letra de um chip |
df-messenger-chips-font-size |
Opcional | 14px | Tamanho do texto de um chip |
df-messenger-chips-font-weight |
Opcional | normal | Espessura do tipo de letra de um chip |
df-messenger-chips-font-weight-hover |
Opcional | normal | Espessura do tipo de letra de um chip quando o cursor passa sobre ele |
df-messenger-chips-box-shadow |
Opcional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Sombra da caixa de um chip |
df-messenger-chips-content-align |
Opcional | flex-start | Alinhamento vertical do conteúdo (por exemplo, a imagem) num chip |
df-messenger-chips-text-wrap |
Opcional | nowrap | Use normal para permitir chips de várias linhas |
Tipo de resposta de citações
O tipo de resposta de citações fornece ao utilizador final uma lista de links de citações clicáveis.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "match_citations" |
citations |
array<object> |
Matriz de objetos Citation |
citations[].title |
string |
Título da citação |
citations[].subtitle |
string |
Subtítulo da citação (atualmente ignorado) |
citations[].anchor |
object |
Âncora a seguir quando o elemento é clicado |
citations[].anchor.href |
string |
URL da âncora |
citations[].anchor.target |
string |
Alvo da âncora, predefinido como _blank |
Por exemplo:
{
"richContent": [
[
{
"type": "match_citations",
"citations": [
{
"title": "Source 1",
"subtitle": "",
"anchor": {
"href": "https://example.com/1"
}
},
{
"title": "Source 2",
"subtitle": "",
"anchor": {
"href": "https://example.com/2"
}
}
]
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-citations-spacing |
Opcional | 10px | Espaço acima das citações da mensagem anterior |
df-messenger-citations-message-display |
Opcional | bloquear | Define a apresentação da nota acima das citações. Os valores permitidos são block ou none |
df-messenger-citations-message-font-color |
Opcional | #041e49 | Cor do texto da nota acima das citações |
df-messenger-citations-message-font-size |
Opcional | 12px | Tamanho do texto da nota acima das citações |
df-messenger-citations-flex-direction |
Opcional | linha | Propriedade de direção flexível das citações, recomendada para usar row (horizontal com quebras de linha) ou column (vertical) |
df-messenger-citations-border-color |
Opcional | #1a73e8 | Cor do limite de uma citação |
df-messeenger-citations-border-color-hover |
Opcional | #1a73e8 | Cor do limite de uma citação quando o cursor do rato passa sobre ela |
df-messenger-citations-border-radius |
Opcional | 4px | Raio do limite de uma citação |
df-messenger-citations-padding |
Opcional | 8px | Preenchimento de uma citação |
df-messenger-citations-background |
Opcional | branco | Contexto de uma citação |
df-messenger-citations-background-hover |
Opcional | rgba(68, 71, 70, 0,08) | Fundo de uma citação quando o cursor passa sobre ela |
df-messenger-citations-font-color |
Opcional | #1a73e8 | Cor do texto de uma citação |
df-messenger-citations-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de tipos de letra de uma citação |
df-messenger-citations-font-size |
Opcional | 11px | Tamanho do texto de uma citação |
df-messenger-citations-icon-font-size |
Opcional | 14px | Tamanho do texto do ícone de uma citação |
df-messenger-citations-font-weight |
Opcional | normal | Espessura do tipo de letra de uma citação |
df-messenger-citations-font-weight-hover |
Opcional | normal | Espessura do tipo de letra de uma citação quando o cursor passa sobre ela |
df-messenger-citations-icon-spacing |
Opcional | 4px | Espaço entre o ícone e o texto numa citação |
df-messenger-citations-box-shadow |
Opcional | nenhum | Sombra da caixa de uma citação |
Tipo de resposta de ficheiros
O tipo de resposta de ficheiros renderiza uma lista de elementos de ficheiros que contêm um link transferível.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "files" |
files |
array<object> |
Matriz de objetos File |
files[].name |
string |
Nome do ficheiro |
files[].image |
object |
Imagem do ficheiro |
files[].image.rawUrl |
string |
URL público do ficheiro da imagem |
files[].anchor |
object |
Ancorar para transferir o ficheiro |
files[].anchor.href |
string |
URL da âncora |
files[].anchor.target |
string |
Alvo da âncora, predefinido como _blank |
Por exemplo:
{
"richContent": [
[
{
"type": "files",
"files": [
{
"name": "instructions.pdf",
"image": {
"rawUrl":
"https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/cloud_download/default/24px.svg"
},
"anchor": {
"href": "https://example.com/instructions.pdf"
}
},
{
"name": "data.csv",
"image": {
"rawUrl":
"https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/csv/default/24px.svg"
},
"anchor": {
"href": "https://example.com/data.csv"
}
}
]
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-files-spacing |
Opcional | 10px | Espaço acima do ficheiro para a mensagem anterior |
df-messenger-files-distance |
Opcional | 8px | Distância entre ficheiros na lista |
df-messenger-files-flex-direction |
Opcional | linha | Propriedade de direção flexível dos ficheiros, recomendada para usar row (horizontal com quebras de linha) ou column (vertical) |
df-messenger-files-background |
Opcional | branco | Fundo de um ficheiro |
df-messenger-files-border |
Opcional | 1px solid #e0e0e0 | Limite de um ficheiro |
df-messenger-files-border-radius |
Opcional | 999px | Raio do limite de um ficheiro |
df-messenger-files-box-shadow |
Opcional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Sombra da caixa de um ficheiro |
df-messenger-files-padding |
Opcional | 6px 16px | Preenchimento de um ficheiro |
df-messenger-files-font-color |
Opcional | #1f1f1f | Cor do texto de um ficheiro |
df-messenger-files-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de tipos de letra de um ficheiro |
df-messenger-files-font-size |
Opcional | 14px | Tamanho do texto de um ficheiro |
df-messenger-files-font-weight |
Opcional | normal | Espessura do tipo de letra de um ficheiro |
df-messenger-files-background-hover |
Opcional | branco | Fundo de um ficheiro quando passa o cursor do rato sobre ele |
df-messenger-files-border-hover |
Opcional | 1px solid #e0e0e0 | Borda de um ficheiro quando passa o cursor do rato sobre ele |
df-messenger-files-font-weight-hover |
Opcional | normal | Espessura do tipo de letra de um ficheiro quando o cursor passa sobre ele |
df-messenger-files-image-offset |
Opcional | 0 0 0 -8px | Desvio da imagem à esquerda |
df-messenger-files-image-size |
Opcional | 18px | Tamanho da imagem à esquerda |
df-messenger-files-text-spacing |
Opcional | 8px | Distância entre a imagem e o texto à esquerda e o texto e o ícone à direita |
df-messenger-files-icon-offset |
Opcional | 0 -8px 0 0 | Desvio do ícone de transferência à direita |
df-messenger-files-icon-size |
Opcional | 18px | Tamanho do ícone de transferência à direita |
df-messenger-files-icon-font-color |
Opcional | #444746 | Cor do ícone de transferência à direita |
Tipo de resposta HTML
O tipo de resposta HTML fornece ao utilizador final uma mensagem HTML.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "html" |
html |
string |
Conteúdo de texto da mensagem, suporta HTML |
Etiquetas HTML suportadas:
a– Elemento de âncora (usado para criar hiperligações)b– Elemento em negrito (usado para colocar texto em negrito)i– Elemento em itálico (usado para colocar texto em itálico)u– Elemento de sublinhado (usado para sublinhar texto)h1– Elemento de título 1 (usado para o título principal de uma página)h2– Elemento de cabeçalho 2 (usado para subtítulos)h3– Elemento de título 3 (usado para subtítulos de nível inferior)p– Elemento de parágrafo (usado para criar parágrafos de texto)br– Elemento de quebra de linha (usado para criar quebras de linha num parágrafo)table- Elemento de tabela (usado para criar tabelas)tr– Elemento de linha da tabela (usado para criar linhas numa tabela)thead– Elemento de cabeçalho da tabela (usado para criar um cabeçalho numa tabela)th- Dados do cabeçalho da tabela ou elemento de célula (usado para criar células numa linha do cabeçalho da tabela)tbody: elemento do corpo da tabela (usado para criar um corpo numa tabela)td– Dados da tabela ou elemento de célula (usado para criar células numa linha de tabela)ul– Elemento de lista não ordenada (usado para criar listas com marcas)ol– Elemento de lista ordenada (usado para criar listas numeradas)li– Elemento de item de lista (usado para criar itens numa lista)img- Elemento de imagem (usado para mostrar uma imagem; consulte também aurl-allowlistpersonalização de HTML)div– Elemento do contentorspan- Elemento de contentor inline
Por exemplo:
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
Aplicar estilos a HTML e Markdown
Para elementos de âncora (elemento HTML a e link de Markdown), podem ser fornecidas as seguintes variáveis CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-link-decoration |
Opcional | sublinhado | Decoração de um elemento de link |
df-messenger-link-font-color |
Opcional | #0b57d0 | Cor do tipo de letra de um elemento de link não visitado |
df-messenger-link-visited-font-color |
Opcional | #0b57d0 | Cor do tipo de letra de um elemento de link visitado |
df-messenger-link-hover-font-color |
Opcional | #0b57d0 | Cor do tipo de letra quando passa o cursor do rato sobre um elemento de link |
df-messenger-link-background |
Opcional | transparente | Fundo de um elemento de link |
df-messenger-link-padding |
Opcional | 0 | Preenchimento de um elemento de link |
df-messenger-link-border |
Opcional | nenhum | Limite de um elemento de link |
df-messenger-link-border-radius |
Opcional | 0 | Raio do limite de um elemento de link |
Para elementos de tabela (elemento HTML table e tabelas Markdown), podem ser fornecidas as seguintes variáveis CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-table-font-size |
Opcional | 14px | Tamanho do texto num elemento de tabela |
df-messenger-table-font-color |
Opcional | #1f1f1f | Cor do texto num elemento de tabela |
df-messenger-table-align |
Opcional | esquerda | Alinhamento do texto numa célula de tabela |
df-messenger-table-padding |
Opcional | 0 | Preenchimento numa célula de tabela |
df-messenger-table-border-collapse |
Opcional | separar | Modo de união de limites de uma tabela, use separate para ativar border-radius |
df-messenger-table-border-radius |
Opcional | 0 | Raio do limite de uma tabela |
df-messenger-table-header-border-radius |
Opcional | 0 | Raio do limite do cabeçalho da tabela |
df-messenger-table-border-top |
Opcional | nenhum | Limite superior de uma linha da tabela |
df-messenger-table-border-top-first |
Opcional | nenhum | Limite superior da primeira linha da tabela |
df-messenger-table-border-bottom |
Opcional | nenhum | Limite inferior de uma linha da tabela |
df-messenger-table-border-bottom-last |
Opcional | nenhum | Limite inferior da última linha da tabela |
df-messenger-table-border-left |
Opcional | nenhum | Limite esquerdo de uma célula da tabela |
df-messenger-table-border-left-first |
Opcional | nenhum | Limite à esquerda da primeira célula da tabela numa linha |
df-messenger-table-border-right |
Opcional | nenhum | Limite direito de uma célula de tabela |
df-messenger-table-border-right-last |
Opcional | nenhum | Borda à direita da última célula da tabela numa linha |
df-messenger-table-background |
Opcional | transparente | Fundo de uma linha da tabela |
df-messenger-table-even-background |
Opcional | transparente | Fundo das linhas da tabela com número par |
df-messenger-table-odd-background |
Opcional | transparente | Fundo das linhas da tabela com números ímpares |
df-messenger-table-header-font-size |
Opcional | 14px | Tamanho do texto num elemento de cabeçalho de tabela |
df-messenger-table-header-font-weight |
Opcional | negrito | Espessura do tipo de letra num elemento de cabeçalho de tabela |
df-messenger-table-header-font-color |
Opcional | #1f1f1f | Cor do texto num elemento de cabeçalho de tabela |
df-messenger-table-header-align |
Opcional | esquerda | Alinhamento do texto numa célula de cabeçalho de tabela |
df-messenger-table-header-padding |
Opcional | 0 | Preenchimento numa célula do cabeçalho de uma tabela |
df-messenger-table-header-border-top |
Opcional | nenhum | Limite superior da linha do cabeçalho da tabela |
df-messenger-table-header-border-bottom |
Opcional | nenhum | Limite inferior da linha do cabeçalho da tabela |
df-messenger-table-header-border-left |
Opcional | nenhum | Limite à esquerda de uma célula na linha do cabeçalho da tabela |
df-messenger-table-header-border-left-first |
Opcional | nenhum | Limite à esquerda da primeira célula na linha do cabeçalho da tabela |
df-messenger-table-header-border-right |
Opcional | nenhum | Borda direita de uma célula na linha do cabeçalho da tabela |
df-messenger-table-header-border-right-last |
Opcional | nenhum | Borda à direita da última célula numa linha de cabeçalho de tabela |
df-messenger-table-header-background |
Opcional | transparente | Fundo da linha do cabeçalho da tabela |
Tipo de resposta de modelo personalizado
O tipo de resposta do modelo personalizado renderiza um elemento personalizado definido no Website do cliente. O elemento não está colocado no interior de um cartão e está sempre independente.
A tabela seguinte descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "custom_template" |
name |
string |
Nome do elemento personalizado |
payload |
Object |
Payload a transmitir ao elemento personalizado |
Por exemplo:
{
"richContent": [
[
{
"type": "custom_template",
"name": "custom-element-example",
"payload": {
"text": "Hello World"
}
}
]
]
}
No seu Website, o elemento personalizado tem de ser registado com o nome exato
do campo name da resposta. O campo payload é transmitido ao elemento personalizado como dfPayload após a construção (mas antes de connectedCallback). O campo pode conter JSON arbitrário. Além disso, dfResponseId é transmitido ao elemento.
Usando a resposta do exemplo, segue-se um exemplo de implementação de um elemento personalizado:
class CustomElementExample extends HTMLElement {
constructor() {
super();
// The `dfPayload` field will be provided before `connectedCallback` is
// being called.
this.dfPayload = null;
// The `dfResponseId` field will be provided before `connectedCallback` is
// being called.
this.dfResponseId = null;
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
// https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
this.renderRoot = this.attachShadow({mode: 'open'});
}
/** Web component Lifecycle method. */
connectedCallback() {
const div = document.createElement('div');
// The `.text` must match the payload's structure in `richContent.payload`.
div.innerText = this.dfPayload.text;
this.renderRoot.appendChild(div);
}
}
(function() {
// Registers the element. This name must match the name in
// `richContent.payload`.
customElements.define('custom-element-example', CustomElementExample);
})();
Combinar tipos de respostas
Os elementos de mensagens multimédia individuais do Dialogflow CX Messenger podem ser usados para criar um cartão personalizado de acordo com as suas necessidades.
Segue-se um exemplo de utilização de alguns dos elementos indicados na secção de processamento:
{
"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",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
},
{
"type": "chips",
"options": [
{
"text": "Case Studies",
"anchor": {
"href": "https://cloud.google.com/dialogflow/case-studies"
}
},
{
"text": "Docs",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
}
]
}
]
]
}
Podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-card-background |
Opcional | branco | Fundo de um cartão personalizado |
df-messenger-card-padding |
Opcional | 16px | Espaçamento dos elementos num cartão personalizado |
df-messenger-card-border |
Opcional | 1px solid #e0e0e0 | Limite de um cartão personalizado |
df-messenger-card-border-radius |
Opcional | 8px | Raio do limite de um cartão personalizado |
df-messenger-card-border-top-left-radius |
Opcional | 8px | Raio do canto superior esquerdo de um cartão personalizado |
df-messenger-card-border-top-right-radius |
Opcional | 8px | Raio do limite superior direito de um cartão personalizado |
df-messenger-card-border-bottom-left-radius |
Opcional | 8px | Raio do canto inferior esquerdo de um cartão personalizado |
df-messenger-card-border-bottom-right-radius |
Opcional | 8px | Raio do limite inferior direito de um cartão |
df-messenger-card-stack-border-top-left-radius |
Opcional | 8px | O raio do canto superior esquerdo do limite para cartões personalizados consecutivos substitui o raio do canto superior esquerdo |
df-messenger-card-stack-border-top-right-radius |
Opcional | 8px | O raio do canto superior direito do limite para cartões personalizados consecutivos substitui o raio do canto superior direito |
df-messenger-card-stack-border-bottom-left-radius |
Opcional | 8px | O raio do canto inferior esquerdo para cartões personalizados consecutivos substitui o raio do canto inferior esquerdo |
df-messenger-card-stack-border-bottom-right-radius |
Opcional | 8px | O raio inferior direito do limite para cartões personalizados consecutivos substitui o raio inferior direito |
df-messenger-card-box-shadow |
Opcional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Sombra da caixa de um cartão personalizado |
Conteúdo avançado de uma ferramenta de guias interativos
Pode usar as ferramentas do manual de vendas para enviar conteúdo avançado para o Dialogflow CX Messenger.
Passo 1: crie uma ferramenta addRichContent no seu agente
Crie uma ferramenta de função denominada addRichContent com os seguintes dados:
Entrada da ferramenta:
properties: {}
type: object
Saída da ferramenta:
properties:
status:
type: string
reason:
type: string
type: object
Passo 2: diga ao agente como usar esta ferramenta
Indique ao seu agente como usar a ferramenta em instruções e exemplos.
Por exemplo, adicione algo como o seguinte às suas instruções:
- Greet the user
- Ask the user what their favorite color is.
At the same time run ${TOOL: addRichContent} to display buttons
for blue, red, yellow, and green.
- Thank the user
Por exemplo, crie um exemplo como o seguinte:
Tenha em atenção que a sintaxe do conteúdo avançado é a mesma que usaria se devolvesse uma carga útil personalizada num agente virtual baseado em fluxo.
Passo 3: defina o JavaScript
No código da página que aloja df-messenger, tem de criar código JavaScript que defina uma função que diga ao df-messenger para renderizar o conteúdo multimédia.
Também tem de registar essa função no df-messenger,
para que saiba que tem de executar a função quando o agente virtual precisar dela.
Certifique-se de que a variável dfMessenger está declarada
e aponta para a sua instância de df-messenger.
Segue-se um exemplo de código que pode usar para este fim:
const dfMessenger = document.querySelector('df-messenger');
function addRichContent(customPayload) {
dfMessenger.renderCustomCard(customPayload.richContent);
// add error handling
return Promise.resolve({ status: "OK", reason: null });
}
// substitute your own tool id
const toolId = 'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId, addRichContent.name, addRichContent);