Alguns produtos e recursos estão sendo renomeados. Os recursos generativos de fluxo e playbook também estão sendo migrados para um único console consolidado. Confira os detalhes.

Esta página foi traduzida pela API Cloud Translation.

Fulfillment do Dialogflow CX Messenger

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

Resposta de texto

Captura de tela de texto do Dialogflow Messenger

A resposta de texto é compatível com texto simples e Markdown. Aqui estão algumas marcações exemplos:

*Italic*
**Bold**
# Title
[Link text](Link URL)
![](Image URL)

Observação: para ativar imagens no Markdown, o atributo url-allowlist precisa ser especificado de forma adequada.

Tabelas:

Header 1 | Header 2
-------- | --------
Cell 1   | Cell 2

Tipo de resposta da informação

Captura de tela do tipo de informações do Dialogflow Messenger

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 for clicado
`anchor.href`	`string`	URL da âncora
`anchor.target`	`string`	Alvo da âncora, 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

Captura de tela do tipo de descrição do Dialogflow Messenger

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

Captura de tela do tipo de imagem do Dialogflow Messenger

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

Captura de tela do tipo de vídeo do Dialogflow Messenger

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 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 ser seguida quando o elemento for clicado
`source.embeddedPlayer`	`string`	Um vídeo do tipo `link` pode ser incorporado em vez de vincular à 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 mostrada 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 (limitado a `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 ele 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", sem serifa	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	O 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	Use `nowrap` para desativar botões de várias linhas

Tipo de resposta de lista

Captura de tela do tipo de lista do Dialogflow Messenger

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, 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	1px solid #e0e0e0	Borda entre elementos da lista

Tipo de resposta de acordeão

Captura de tela do tipo acordeão do Dialogflow Messenger

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

Captura de tela do tipo de ícone do Dialogflow Messenger

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 será desativada até que ele clique no ícone.
`options[].text`	`string`	Texto da opção
`options[].image`	`object`	Opção "Imagem" (opcional)
`options[].image.rawUrl`	`string`	URL público da opção para imagem
`options[].anchor`	`object`	Opcional, âncora a ser seguida quando o elemento for clicado
`options[].anchor.href`	`string`	URL da âncora
`options[].anchor.target`	`string`	Alvo da âncora, 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 para a 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 sobre ele
`df-messenger-chips-border-radius`	Opcional	999 px	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)	Plano de fundo de um ícone ao passar o cursor sobre ele
`df-messenger-chips-padding`	Opcional	6 px 16 px	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", sem serifa	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 quando o cursor passa por ele
`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	flex-start	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 de citações

Captura de tela do tipo de citação do Dialogflow Messenger

O tipo de resposta de citações fornece ao usuário final uma lista de links de citação clicáveis.

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 (atualmente ignorado)
`citations[].anchor`	`object`	Âncora a ser seguida quando o elemento for clicado
`citations[].anchor.href`	`string`	URL da âncora
`citations[].anchor.target`	`string`	Alvo da âncora, 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 sobre ela
`df-messenger-citations-border-radius`	Opcional	4px	Raio da borda de uma citação
`df-messenger-citations-padding`	Opcional	8px	Adição de espaço em 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 quando o cursor passa por cima
`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

Captura de tela do tipo de arquivos do Dialogflow Messenger

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 a imagem
`files[].anchor`	`object`	Âncora para fazer o download do arquivo.
`files[].anchor.href`	`string`	URL da âncora
`files[].anchor.target`	`string`	Alvo da âncora, 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 seguintes variáveis CSS podem ser fornecidas

Propriedades	Política de entrada	Valor padrão	Descrição
`df-messenger-files-spacing`	Opcional	10px	Espaço acima do arquivo para a 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	1px solid #e0e0e0	Borda de um arquivo
`df-messenger-files-border-radius`	Opcional	999 px	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	6 px 16 px	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	1px solid #e0e0e0	Borda de um arquivo quando o cursor passa por cima
`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

Captura de tela do tipo HTML do Dialogflow Messenger

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 aplicar negrito ao texto)
i: elemento itálico (usado para texto em itálico)
u: elemento sublinhado (usado para sublinhar texto)
h1: elemento de título 1 (usado para o título principal de uma página)
h2: elemento do título 2 (usado para subtítulos)
h3: elemento de título 3 (usado para subtítulos secundários)
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 de cabeçalho de tabela (usado para criar um cabeçalho em 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 ordenada (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ém url-allowlist personalização HTML
div: elemento contêiner
span: elemento de contêiner inline

Exemplo:

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
      }
    ]
  ]
}

Estilos 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 de link
`df-messenger-link-font-color`	Opcional	#0b57d0	Cor da fonte de um elemento de link não visitado
`df-messenger-link-visited-font-color`	Opcional	#0b57d0	Cor da fonte de um elemento de link visitado
`df-messenger-link-hover-font-color`	Opcional	#0b57d0	Cor da fonte ao passar o cursor sobre um elemento de link
`df-messenger-link-background`	Opcional	transparente	Plano de fundo de um elemento de link
`df-messenger-link-padding`	Opcional	0	Padding de um elemento do link
`df-messenger-link-border`	Opcional	nenhum	Borda de um elemento de link
`df-messenger-link-border-radius`	Opcional	0	Raio da borda de um elemento de link

Para elementos de tabela (elemento table HTML e tabelas Markdown), as seguintes variáveis CSS 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 de texto em uma célula de tabela
`df-messenger-table-padding`	Opcional	0	Padding em uma célula da tabela
`df-messenger-table-border-collapse`	Opcional	separado	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	Plano de fundo das linhas de tabela com números pares
`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 de 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 de texto em uma célula de cabeçalho de tabela
`df-messenger-table-header-padding`	Opcional	0	Padding na célula de cabeçalho de uma tabela
`df-messenger-table-header-border-top`	Opcional	nenhum	Borda superior da linha de cabeçalho da tabela
`df-messenger-table-header-border-bottom`	Opcional	nenhum	Borda inferior da linha de 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 de 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

Captura de tela do tipo de modelo personalizado do Dialogflow Messenger

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 com o nome exato do 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

Captura de tela do cartão personalizado do Dialogflow Messenger

Os elementos de mensagens avançadas individuais do Dialogflow CX Messenger podem ser usados para criar um cartão personalizado que atenda às suas necessidades.

Confira um exemplo usando 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 card personalizado
`df-messenger-card-padding`	Opcional	16px	Padding de elementos em um card 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 card 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 de borda no canto inferior direito de um card
`df-messenger-card-stack-border-top-left-radius`	Opcional	8px	O raio da borda no canto superior esquerdo para cards personalizados consecutivos substitui o raio da borda no 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 no canto inferior esquerdo para cards personalizados consecutivos substitui o raio da borda no canto 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 card personalizado