Ao criar um cartão personalizado atendimento de pedido, crie Respostas de texto e Payloads personalizados. As respostas de texto são usadas para texto simples e respostas do agente Markdown e os payloads personalizados são usados para respostas avançadas. O formato de payload personalizado para todos os tipos de resposta tem as seguintes estrutura:
{
"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.
Resposta de texto
A resposta de texto aceita texto simples e Markdown. Aqui estão algumas marcações exemplos:
*Italic***Bold**# Title[Link text](Link URL)Tabelas:
Header 1 | Header 2 -------- | -------- Cell 1 | Cell 2
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 |
object |
Imagem |
image.rawUrl |
string |
URL público para imagem |
anchor |
object |
Âncora a ser seguida quando o elemento é clicado |
anchor.href |
string |
URL da âncora |
anchor.target |
string |
Alvo da âncora, o padrão é _blank |
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 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 |
array<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. O o tipo de resposta tem suporte a um ícone de referência que permite adicionar a origem da imagem como um link âncora, junto com um texto descritivo curto e um ícone.
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 |
reference.text |
string |
Texto a ser exibido no ícone de referência |
reference.anchor.href |
string |
URL do ícone de referência |
reference.anchor.target |
string |
Alvo da âncora no ícone de referência. O padrão é _blank. |
reference.image.rawUrl |
string |
Imagem a ser exibida no ícone de referência |
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"
}
}
}
]
]
}
As seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-image-border-radius |
Opcional | 8px | Raio da borda da imagem |
Tipo de resposta ao vídeo
O tipo de resposta ao vídeo renderiza um elemento de vídeo que pode ser uma resposta vídeo a partir de um URL, reproduzido diretamente no aplicativo de mensagens ou um link para um vídeo.
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "video" |
title |
string |
Título opcional do vídeo |
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 ser seguida 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 da Web do player. Isso é implementado apenas para um conjunto conhecido de players e oferece suporte a youtube. |
source.thumbnail |
object |
Miniatura a ser exibida para anchor |
source.thumbnail.rawUrl |
string |
O URL da miniatura |
source.rawUrl |
string |
URL para um vídeo do tipo raw |
Exemplo:
{
"richContent": [
[
{
"type": "video",
"source": {
"type": "link",
"anchor": {
"href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
}
}
}
]
]
}
As seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | 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 | 1 px sólido #e0e0e0 | Borda do vídeo |
df-messenger-video-border-radius |
Opcional | 8px | Raio da borda do vídeo |
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 |
object |
Í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 |
image |
object |
A imagem do botão tem prioridade sobre icon |
image.rawUrl |
string |
URL público para imagem |
mode |
string |
Opcional, se definido como "bloqueio", a entrada do usuário é desativada até que o usuário clique no botão. |
text |
string |
Texto do botão |
anchor |
object |
Âncora a ser seguida quando o elemento é clicado |
anchor.href |
string |
URL da âncora |
anchor.target |
string |
Alvo da âncora, o padrão é _blank |
event |
object |
Evento do Dialogflow que é acionado quando o botão é clicado. |
Exemplo:
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"mode": "blocking",
"text": "Button text",
"anchor": {
"href": "https://example.com"
},
"event": {
"event": ""
}
}
]
]
}
As seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-button-border |
Opcional | nenhum | Borda de um botão |
df-messenger-button-border-radius |
Opcional | 8px | Raio da borda 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 fontes de um botão |
df-messenger-button-font-size |
Opcional | 14px | Tamanho da fonte de um botão |
df-messenger-button-padding |
Opcional | 12px | Padding de um botão |
df-messenger-button-icon-spacing |
Opcional | 12px | Espaço entre o ícone e o texto do botão |
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 | Deslocamento da imagem do botão, permite que valores negativos compensem o padding |
df-messenger-button-text-align |
Opcional | centro | Alinhamento de texto de um botão |
df-messenger-button-text-wrap |
Opcional | normal | Usar nowrap para proibir botões com várias linhas |
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 |
object |
Evento do Dialogflow que é acionado quando a opção é clicada |
anchor |
object |
Âncora a ser seguida quando o elemento é clicado |
anchor.href |
string |
URL da âncora |
anchor.target |
string |
Alvo da âncora, o padrão é _blank |
image |
object |
Imagem |
image.rawUrl |
string |
URL público para imagem |
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": {
"event": ""
}
},
{
"type": "list",
"title": "List item 2 title",
"subtitle": "List item 2 subtitle",
"event": {
"event": ""
}
}
]
]
}
As seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-list-padding |
Opcional | 16px | Padding de um elemento de lista |
df-messenger-list-inset |
Opcional | 0 | "Encarte" horizontal adicional do elemento de lista (além do preenchimento), para controlar a expansão da borda entre os elementos |
df-messenger-list-spacing |
Opcional | 10px | Espaço vertical entre elementos da lista |
df-messenger-list-border-bottom |
Opcional | 1 px sólido #e0e0e0 | Borda entre elementos da lista |
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 |
object |
Imagem |
image.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": {
"rawUrl": "https://example.com/images/logo.png"
},
"text": "Accordion text"
}
]
]
}
Tipo de resposta do chip 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 |
array<object> |
Matriz de objetos de opção |
options[].mode |
string |
Opcional, se definido como "bloqueio", a entrada do usuário é desativada até que o usuário clique no ícone. |
options[].text |
string |
Texto da opção |
options[].image |
object |
Opcional, opção Imagem |
options[].image.rawUrl |
string |
URL público da opção para imagem |
options[].anchor |
object |
Opcional, Âncora para seguir quando o elemento é clicado |
options[].anchor.href |
string |
URL da âncora |
options[].anchor.target |
string |
Alvo da âncora, o padrão é _blank |
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"
}
}
]
}
]
]
}
As seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-chips-spacing |
Opcional | 10px | Espaço acima dos ícones da mensagem anterior |
df-messenger-chips-border-color |
Opcional | #e0e0e0 | Cor da borda de um ícone |
df-messenger-chips-border-color-hover |
Opcional | #e0e0e0 | Cor da borda de um ícone ao passar o cursor |
df-messenger-chips-border-radius |
Opcional | 999px | Raio da borda de um ícone |
df-messenger-chips-background |
Opcional | branco | Segundo plano de um ícone |
df-messenger-chips-background-hover |
Opcional | RGBA(68, 71, 70, 0,08) | Segundo plano de um ícone ao passar o cursor sobre ele |
df-messenger-chips-padding |
Opcional | 6px 16px | Padding de um ícone |
df-messenger-chips-font-color |
Opcional | preto | Cor do texto de um ícone |
df-messenger-chips-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes de um ícone |
df-messenger-chips-font-size |
Opcional | 14px | Tamanho do texto de um ícone |
df-messenger-chips-font-weight |
Opcional | normal | Espessura da fonte de um ícone |
df-messenger-chips-font-weight-hover |
Opcional | normal | Espessura da fonte de um ícone ao passar o cursor |
df-messenger-chips-box-shadow |
Opcional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Sombra da caixa de um ícone |
df-messenger-chips-content-align |
Opcional | início flexível | Alinhamento vertical do conteúdo (por exemplo, a imagem) em um ícone |
df-messenger-chips-text-wrap |
Opcional | nowrap | Usar normal para permitir ícones de várias linhas |
Tipo de resposta às citações
O tipo de resposta de citações fornece ao usuário final uma lista de itens clicáveis links de citação.
A tabela a seguir 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 (ignorado atualmente) |
citations[].anchor |
object |
Âncora a ser seguida quando o elemento é clicado |
citations[].anchor.href |
string |
URL da âncora |
citations[].anchor.target |
string |
Alvo da âncora, o padrão é _blank |
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"
}
}
]
}
]
]
}
As seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-citations-spacing |
Opcional | 10px | Espaço acima das citações da mensagem anterior |
df-messenger-citations-message-display |
Opcional | block | Define a exibiçã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 o uso de row (horizontal com quebras de linha) ou column (vertical). |
df-messenger-citations-border-color |
Opcional | #1a73e8 | Cor da borda de uma citação |
df-messeenger-citations-border-color-hover |
Opcional | #1a73e8 | Cor da borda de uma citação ao passar o cursor |
df-messenger-citations-border-radius |
Opcional | 4px | Raio da borda de uma citação |
df-messenger-citations-padding |
Opcional | 8px | Padding 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) | Plano de fundo de uma citação ao passar o cursor |
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 fontes 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 da fonte de uma citação |
df-messenger-citations-font-weight-hover |
Opcional | normal | Espessura da fonte de uma citação ao passar o cursor |
df-messenger-citations-icon-spacing |
Opcional | 4px | Espaço entre o ícone e o texto em uma citação |
df-messenger-citations-box-shadow |
Opcional | nenhum | Sombra da caixa de uma citação |
Tipo de resposta dos arquivos
O tipo de resposta de arquivos renderiza uma lista de elementos de arquivo que contêm uma link para download.
A tabela a seguir descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "files" |
files |
array<object> |
Matriz de objetos de arquivo |
files[].name |
string |
Nome do arquivo |
files[].image |
object |
Imagem do arquivo |
files[].image.rawUrl |
string |
URL público do arquivo para imagem |
files[].anchor |
object |
Fixo para fazer o download do arquivo |
files[].anchor.href |
string |
URL da âncora |
files[].anchor.target |
string |
Alvo da âncora, o padrão é _blank |
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'
}
}
]
}
]
]
}
As variáveis CSS a seguir podem ser fornecidas
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-files-spacing |
Opcional | 10px | Espaço acima do arquivo em relação à mensagem anterior |
df-messenger-files-distance |
Opcional | 8px | Distância entre os arquivos na lista |
df-messenger-files-flex-direction |
Opcional | linha | Propriedade de direção flexível dos arquivos, recomendada o uso de row (horizontal com quebras de linha) ou column (vertical). |
df-messenger-files-background |
Opcional | branco | Segundo plano de um arquivo |
df-messenger-files-border |
Opcional | 1 px sólido #e0e0e0 | Borda de um arquivo |
df-messenger-files-border-radius |
Opcional | 999px | Raio da borda de um arquivo |
df-messenger-files-box-shadow |
Opcional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Sombra da caixa de um arquivo |
df-messenger-files-padding |
Opcional | 6px 16px | Padding de um arquivo |
df-messenger-files-font-color |
Opcional | #1f1f1f | Cor do texto de um arquivo |
df-messenger-files-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes de um arquivo |
df-messenger-files-font-size |
Opcional | 14px | Tamanho do texto de um arquivo |
df-messenger-files-font-weight |
Opcional | normal | Espessura da fonte de um arquivo |
df-messenger-files-background-hover |
Opcional | branco | Plano de fundo de um arquivo ao passar o cursor |
df-messenger-files-border-hover |
Opcional | 1 px sólido #e0e0e0 | Borda de um arquivo ao passar o cursor |
df-messenger-files-font-weight-hover |
Opcional | normal | Espessura da fonte de um arquivo ao passar o cursor |
df-messenger-files-image-offset |
Opcional | 0 0 0 -8px | Deslocamento da imagem à esquerda |
df-messenger-files-image-size |
Opcional | 18 px | Tamanho da imagem à esquerda |
df-messenger-files-text-spacing |
Opcional | 8px | Distância entre o texto da imagem à esquerda e o ícone de texto à direita. |
df-messenger-files-icon-offset |
Opcional | 0 -8px 0 0 | Deslocamento do ícone de download à direita |
df-messenger-files-icon-size |
Opcional | 18 px | Tamanho do ícone de download à direita. |
df-messenger-files-icon-font-color |
Opcional | #444746 | Cor do ícone de download à direita |
Tipo de resposta HTML
O tipo de resposta HTML fornece ao usuário final uma mensagem HTML.
A tabela a seguir descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "html" |
html |
string |
Conteúdo de texto da mensagem, compatível com HTML |
Tags HTML compatíveis:
a: elemento âncora (usado para criar hiperlinks)b: elemento em negrito (usado para texto em negrito)i: elemento itálico (usado para texto em itálico)u: elemento sublinhado (usado para sublinhar texto)h1: elemento 1 do título (usado para o título principal de uma página)h2: elemento do título 2 (usado para subtítulos)h3: elemento do título 3 (usado para subcabeçalhos)p: elemento de parágrafo (usado para criar parágrafos de texto)br: elemento de quebra de linha (usado para criar quebras de linha em um parágrafo)table: elemento de tabela (usado para criar tabelas)tr: elemento de linha da tabela (usado para criar linhas dentro de uma tabela)thead: elemento do cabeçalho da tabela (usado para criar um cabeçalho dentro de uma tabela)th: dados do cabeçalho da tabela ou elemento de célula (usado para criar células na linha de cabeçalho de uma tabela)tbody: elemento do corpo da tabela (usado para criar um corpo dentro de uma tabela)td: dados da tabela ou elemento de célula (usado para criar células dentro de uma linha da tabela)ul: elemento de lista não ordenado (usado para criar listas com marcadores)ol: elemento de lista ordenada (usado para criar listas numeradas)li: elemento do item de lista (usado para criar itens em uma lista)img: elemento de imagem usado para mostrar uma imagem. Veja tambémurl-allowlistpersonalização HTMLdiv: elemento contêinerspan: elemento de contêiner inline
Exemplo:
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
Como definir o estilo de HTML e Markdown
Para elementos de âncora (elemento HTML a e link Markdown), as seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-link-decoration |
Opcional | sublinhado | Decoração de um elemento do link |
df-messenger-link-font-color |
Opcional | #0b57d0 | Cor da fonte de um elemento do link não visitado |
df-messenger-link-visited-font-color |
Opcional | #0b57d0 | Cor da fonte de um elemento do link visitado |
df-messenger-link-hover-font-color |
Opcional | #0b57d0 | Cor da fonte ao passar o cursor sobre um elemento do link |
df-messenger-link-background |
Opcional | transparente | Plano de fundo de um elemento do link |
df-messenger-link-padding |
Opcional | 0 | Padding de um elemento do link |
df-messenger-link-border |
Opcional | nenhum | Borda de um elemento do link |
df-messenger-link-border-radius |
Opcional | 0 | Raio da borda de um elemento do link |
Para elementos de tabela (elemento HTML table e tabelas Markdown), o CSS a seguir
variáveis podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-table-font-size |
Opcional | 14px | Tamanho do texto em um elemento da tabela |
df-messenger-table-font-color |
Opcional | #1f1f1f | Cor do texto em um elemento da tabela |
df-messenger-table-align |
Opcional | esquerda | Alinhamento do texto em uma célula da tabela |
df-messenger-table-padding |
Opcional | 0 | Padding em uma célula da tabela |
df-messenger-table-border-collapse |
Opcional | separar | Modo de recolhimento da borda de uma tabela. Use separate para ativar o parâmetro border-radius. |
df-messenger-table-border-radius |
Opcional | 0 | Raio da borda de uma tabela |
df-messenger-table-header-border-radius |
Opcional | 0 | Raio da borda do cabeçalho da tabela |
df-messenger-table-border-top |
Opcional | nenhum | Borda superior de uma linha da tabela |
df-messenger-table-border-top-first |
Opcional | nenhum | Borda superior da primeira linha da tabela |
df-messenger-table-border-bottom |
Opcional | nenhum | Borda inferior de uma linha da tabela |
df-messenger-table-border-bottom-last |
Opcional | nenhum | Borda inferior da última linha da tabela |
df-messenger-table-border-left |
Opcional | nenhum | Borda esquerda de uma célula da tabela |
df-messenger-table-border-left-first |
Opcional | nenhum | Borda esquerda da primeira célula da tabela em uma linha |
df-messenger-table-border-right |
Opcional | nenhum | Borda direita de uma célula da tabela |
df-messenger-table-border-right-last |
Opcional | nenhum | Borda direita da última célula da tabela em uma linha |
df-messenger-table-background |
Opcional | transparente | Segundo plano de uma linha da tabela |
df-messenger-table-even-background |
Opcional | transparente | Segundo plano de linhas da tabela par numerada |
df-messenger-table-odd-background |
Opcional | transparente | Plano de fundo das linhas da tabela de numeração ímpar |
df-messenger-table-header-font-size |
Opcional | 14px | Tamanho do texto em um elemento de cabeçalho da tabela |
df-messenger-table-header-font-weight |
Opcional | negrito | Espessura da fonte em um elemento do cabeçalho da tabela |
df-messenger-table-header-font-color |
Opcional | #1f1f1f | Cor do texto em um elemento do cabeçalho da tabela |
df-messenger-table-header-align |
Opcional | esquerda | Alinhamento do texto em uma célula de cabeçalho de tabela |
df-messenger-table-header-padding |
Opcional | 0 | Padding na célula de cabeçalho da tabela |
df-messenger-table-header-border-top |
Opcional | nenhum | Borda superior da linha do cabeçalho da tabela |
df-messenger-table-header-border-bottom |
Opcional | nenhum | Borda inferior da linha do cabeçalho da tabela |
df-messenger-table-header-border-left |
Opcional | nenhum | Borda esquerda de uma célula na linha do cabeçalho da tabela |
df-messenger-table-header-border-left-first |
Opcional | nenhum | Borda 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 na linha de cabeçalho de uma tabela. |
df-messenger-table-header-background |
Opcional | transparente | Segundo plano da linha do cabeçalho da tabela |
Tipo de resposta do modelo personalizado
O tipo de resposta do modelo personalizado renderiza um elemento personalizado definido no site do cliente. O elemento não é colocado dentro de um cartão e sempre permanece sozinho.
A tabela a seguir descreve os campos:
| Nome | Tipo | Descrição |
|---|---|---|
type |
string |
Tipo de resposta: "custom_template" |
name |
string |
Nome do elemento personalizado |
payload |
Object |
Payload a ser transmitido para o elemento personalizado |
Exemplo:
{
"richContent": [
[
{
"type": "custom_template",
"name": "custom-element-example",
"payload": {
"text": "Hello World"
}
}
]
]
}
No seu site, o elemento personalizado precisa ser registrado sob o nome exato
no campo name da resposta. O campo payload é transmitido para
o elemento personalizado como dfPayload após a construção (mas antes de connectedCallback). O campo pode conter JSON arbitrário. Além disso, dfResponseId é
passados para o elemento.
Usando a resposta do exemplo, aqui está 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);
})();
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 com alguns dos elementos listados na seção de fulfillment:
{
"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"
}
}
]
}
]
]
}
As seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-card-background |
Opcional | branco | Plano de fundo de um cartão personalizado |
df-messenger-card-padding |
Opcional | 16px | Padding de elementos em um cartão personalizado |
df-messenger-card-border |
Opcional | 1 px sólido #e0e0e0 | Borda de um cartão personalizado |
df-messenger-card-border-radius |
Opcional | 8px | Raio da borda de um cartão personalizado |
df-messenger-card-border-top-left-radius |
Opcional | 8px | Raio da borda no canto superior esquerdo de um cartão personalizado |
df-messenger-card-border-top-right-radius |
Opcional | 8px | Raio da borda no canto superior direito de um cartão personalizado |
df-messenger-card-border-bottom-left-radius |
Opcional | 8px | Raio da borda da parte inferior esquerda de um card personalizado |
df-messenger-card-border-bottom-right-radius |
Opcional | 8px | Raio da borda da parte inferior direita de um card |
df-messenger-card-stack-border-top-left-radius |
Opcional | 8px | O raio da borda da parte superior esquerda de cards personalizados consecutivos substitui o raio do canto superior esquerdo |
df-messenger-card-stack-border-top-right-radius |
Opcional | 8px | O raio da borda superior direita de cards personalizados consecutivos substitui o raio superior direito |
df-messenger-card-stack-border-bottom-left-radius |
Opcional | 8px | O raio da borda inferior esquerda de cards personalizados consecutivos substitui o raio inferior esquerdo |
df-messenger-card-stack-border-bottom-right-radius |
Opcional | 8px | O raio da borda inferior direita para cards 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 |