Alguns produtos e recursos estão sendo renomeados. Os recursos de playbook generativo e de fluxo 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 fulfillment de cartão personalizado, é possível criar Respostas de texto e Payloads personalizados. As respostas de texto são usadas para respostas de texto simples e de agentes 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 aceita texto simples e Markdown. Confira alguns exemplos de Markdown:

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

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

Tabelas:

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

Tipo de resposta da informação

Captura de tela do tipo de informação 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 tipo de resposta oferece suporte a um ícone de referência que permite adicionar a origem da imagem como um link de âncora 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 mostrado no ícone de referência
`reference.anchor.href`	`string`	URL do ícone de referência
`reference.anchor.target`	`string`	Alvo da âncora no chip de referência, 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 em vídeo

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

O tipo de resposta em 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 fonte 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, com suporte para `youtube`.
`source.thumbnail`	`object`	Miniatura a ser mostrada para `anchor`
`source.thumbnail.rawUrl`	`string`	O URL da miniatura
`source.rawUrl`	`string`	URL de 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	1px solid #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 será desativada até que ele clique no botão.
`text`	`string`	Texto do botão
`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`
`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 for 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	"Inset" horizontal adicional do elemento de lista (além do padding), para controlar a expansão da borda entre os elementos
`df-messenger-list-spacing`	Opcional	10px	Espaço vertical entre os 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 ícones 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`	Opcional, imagem da opção
`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 círculo
`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	Plano de fundo de um ícone
`df-messenger-chips-background-hover`	Opcional	rgba(68, 71, 70, 0.08)	Plano de fundo de um ícone quando o cursor passa por ele
`df-messenger-chips-padding`	Opcional	6px 16px	Espaçamento de um chip
`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 de citação
`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 das citações. Recomendamos 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", sem serifa	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 quando o cursor passa por cima
`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 de arquivos

Captura de tela do tipo de arquivo do Dialogflow Messenger

O tipo de resposta de arquivos renderiza uma lista de elementos de arquivo que contêm um 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 dos arquivos, é recomendável usar `row` (horizontal com quebras de linha) ou `column` (vertical)
`df-messenger-files-background`	Opcional	branco	Fundo de um arquivo
`df-messenger-files-border`	Opcional	1px solid #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", sem serifa	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 quando o cursor passa por cima
`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 quando o cursor passa por cima
`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 italizar texto)
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 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 de tabela (usado para criar linhas em 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 em uma linha de cabeçalho da tabela).
tbody: elemento de corpo da tabela (usado para criar um corpo em uma tabela)
td: dados da tabela ou elemento de célula (usado para criar células em uma linha de 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 de item de lista (usado para criar itens em uma lista)
img: elemento de imagem (usado para mostrar uma imagem. Consulte também url-allowlist personalização de HTML).
div: elemento de 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 de 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 de tabela
`df-messenger-table-font-color`	Opcional	#1f1f1f	Cor do texto em um elemento de tabela
`df-messenger-table-align`	Opcional	esquerda	Alinhamento de texto em uma célula de tabela
`df-messenger-table-padding`	Opcional	0	Preenchimento em uma célula de tabela
`df-messenger-table-border-collapse`	Opcional	separado	Modo de fusão de bordas de uma tabela, use `separate` para ativar `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	Plano de fundo de uma linha de 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 de linhas de tabela com números ímpares
`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 de cabeçalho de tabela
`df-messenger-table-header-font-color`	Opcional	#1f1f1f	Cor do texto em um elemento de cabeçalho de 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 em uma célula de cabeçalho de 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 de cabeçalho da tabela
`df-messenger-table-header-border-right-last`	Opcional	nenhum	Borda à direita da última célula em uma linha de cabeçalho de tabela
`df-messenger-table-header-background`	Opcional	transparente	Plano de fundo da linha de 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 de modelo personalizado renderiza um elemento personalizado definido no site do cliente. O elemento não é colocado dentro de um card e sempre fica por conta própria.

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 ao 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 é transmitido 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	1px solid #e0e0e0	Borda de um card personalizado
`df-messenger-card-border-radius`	Opcional	8px	Raio da borda de um card 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 card personalizado
`df-messenger-card-border-bottom-left-radius`	Opcional	8px	Raio da borda no canto inferior esquerdo de um card personalizado
`df-messenger-card-border-bottom-right-radius`	Opcional	8px	Raio do contorno 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 no canto superior direito para cards personalizados consecutivos substitui o raio do canto 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 do canto inferior direito para cards personalizados consecutivos substitui o raio do canto 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

Conteúdo avançado de uma ferramenta de manual de práticas

Você pode usar as ferramentas de playbook para enviar conteúdo avançado ao Dialogflow CX Messenger.

Etapa 1: criar uma ferramenta addRichContent no seu agente

Crie uma ferramenta de função chamada addRichContent com os seguintes dados:

Entrada de ferramenta:

properties: {}
type: object

Saída da ferramenta:

properties:
  status:
    type: string
  reason:
    type: string
type: object

Etapa 2: informar ao agente como usar essa ferramenta

Informe ao 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 este:

Captura de tela de exemplo

A sintaxe do conteúdo avançado é a mesma que você usaria para retornar um payload personalizado em um agente virtual baseado em fluxo.

Etapa 3: definir o JavaScript

No código da página que hospeda df-messenger, é necessário criar um código JavaScript que defina uma função que diga a df-messenger para renderizar o conteúdo rico. Você também precisa registrar essa função com df-messenger, para que ela saiba executar a função quando o agente virtual precisar.

Verifique se a variável dfMessenger está declarada e aponta para a instância de df-messenger.

Confira alguns exemplos de código que podem ser usados para esse propósito:

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);