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 card personalizado, crie Respostas de texto e Payloads personalizados. As respostas de texto são usadas para texto simples e respostas do agente em Markdown. Já os payloads personalizados são usados para respostas avançadas. O formato de payload personalizado para todos os tipos de resposta tem a seguinte estrutura básica:

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

Observe que o valor richContent permite uma matriz externa e várias internas. As respostas dentro de uma matriz interna são unidas em um único cartão visual. Quando a matriz externa contém várias internas, diversos cartões são exibidos, um para cada matriz interna.

As subseções restantes descrevem os vários tipos de respostas que você pode configurar para um payload personalizado.

Resposta de texto

Captura de tela do texto do Dialogflow CX 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 em Markdown, o atributo url-allowlist precisa ser especificado de acordo.

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 CX 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`	Destino 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

Captura de tela do tipo de descrição do Dialogflow CX 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 CX Messenger

O tipo de resposta de imagem é um cartão de imagem onde os usuários podem clicar ou tocar. O tipo de resposta é compatível com um ícone de referência que permite adicionar a fonte 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 mostrado no ícone de referência
`reference.anchor.href`	`string`	URL do ícone de referência
`reference.anchor.target`	`string`	Destino da âncora no chip 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 em vídeo

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

O tipo de resposta de vídeo renderiza um elemento de vídeo que pode ser um vídeo direto do URL, reproduzido diretamente no messenger ou um link para um vídeo.

Nome	Tipo	Descrição
`type`	`string`	Tipo de resposta: "video"
`title`	`string`	Título opcional do vídeo
`source`	`object`	A fonte 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 ter um link para a página da Web do player. Isso só é implementado para um conjunto conhecido de players e é compatível com `youtube`.
`source.thumbnail`	`object`	Miniatura a ser mostrada para o `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	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`	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`	Destino da âncora, o padrão é `_blank`
`event`	`object`	Evento do Dialogflow CX 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 valores negativos para compensar o padding.
`df-messenger-button-text-align`	Opcional	centro	Alinhamento do texto de um botão
`df-messenger-button-text-wrap`	Opcional	normal	Usar `nowrap` para não permitir botões de várias linhas

Tipo de resposta de lista

Captura de tela do tipo de lista do Dialogflow CX 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 CX 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`	Destino 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	"Encaixe" horizontal adicional do elemento da 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 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 CX 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 chips do Dialogflow CX 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 "blocking", 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`	Destino 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 chips até 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
`df-messenger-chips-border-radius`	Opcional	999px	Raio da borda de um ícone de ação
`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
`df-messenger-chips-padding`	Opcional	6px 16px	Padding de um ícone
`df-messenger-chips-font-color`	Opcional	preto	Cor do texto de um ícone de ação
`df-messenger-chips-font-family`	Opcional	"Google Sans", "Helvetica Neue", sans-serif	Família de fontes de um ícone de opção
`df-messenger-chips-font-size`	Opcional	14px	Tamanho do texto de um ícone de ação
`df-messenger-chips-font-weight`	Opcional	normal	Espessura da fonte de um ícone de opção
`df-messenger-chips-font-weight-hover`	Opcional	normal	Peso da fonte de um ícone ao passar o cursor sobre ele.
`df-messenger-chips-box-shadow`	Opcional	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Sombra da caixa de um chip
`df-messenger-chips-content-align`	Opcional	flex-start	Alinhamento vertical do conteúdo (por exemplo, a imagem) em um ícone
`df-messenger-chips-text-wrap`	Opcional	nowrap	Use `normal` para permitir chips de várias linhas

Tipo de resposta de citações

Captura de tela do tipo de citações do Dialogflow CX 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`	Destino 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	bloquear	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 observação 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. Recomendamos usar `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)	Segundo plano 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 sobre ela.
`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 arquivos do Dialogflow CX Messenger

O tipo de resposta "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 imagem
`files[].anchor`	`object`	Âncora para fazer o download do arquivo
`files[].anchor.href`	`string`	URL da âncora
`files[].anchor.target`	`string`	Destino 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 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 até 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. Recomendamos usar `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	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	Segundo plano de um arquivo ao passar o cursor
`df-messenger-files-border-hover`	Opcional	1px solid #e0e0e0	Borda de um arquivo ao passar o cursor sobre ele
`df-messenger-files-font-weight-hover`	Opcional	normal	Espessura da fonte de um arquivo ao passar o cursor sobre ele
`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 imagem-texto à esquerda e texto-ícone à 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 CX 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 de negrito (usado para colocar texto em negrito)
i: elemento itálico (usado para colocar texto em itálico)
u: elemento de sublinhado (usado para sublinhar texto).
h1: elemento de cabeçalho 1 (usado para o cabeçalho principal de uma página)
h2: elemento de cabeçalho 2 (usado para subtítulos)
h3: elemento de título 3 (usado para subsubtítulos)
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 em uma tabela).
thead: elemento de cabeçalho da tabela (usado para criar um cabeçalho em uma tabela).
th: dados de 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 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 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 in-line

Exemplo:

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

Aplicar estilo a HTML e Markdown

Para elementos de âncora (elemento HTML a e link do 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	Segundo plano 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 HTML table 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 do 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	separar	Modo de junçã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 de uma 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 de uma 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 das linhas de tabela com número par
`df-messenger-table-odd-background`	Opcional	transparente	Plano de fundo das linhas de tabela com número í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 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 do 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 de 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 da 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 CX 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 card e sempre fica 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 mesmo nome do campo name da resposta. O campo payload é transmitido ao elemento personalizado como dfPayload após a construção (mas antes de connectedCallback). O campo pode conter JSON arbitrário. Além disso, dfResponseId é transmitido ao elemento.

Usando a resposta do exemplo, confira uma 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 de um card personalizado do Dialogflow CX 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 CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "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 superior esquerda de um card personalizado
`df-messenger-card-border-top-right-radius`	Opcional	8px	Raio da borda superior direita de um card personalizado
`df-messenger-card-border-bottom-left-radius`	Opcional	8px	Raio da borda inferior esquerda de um card personalizado
`df-messenger-card-border-bottom-right-radius`	Opcional	8px	Raio da borda inferior direita de um card
`df-messenger-card-stack-border-top-left-radius`	Opcional	8px	O raio superior esquerdo da borda para cards personalizados consecutivos substitui o raio superior esquerdo
`df-messenger-card-stack-border-top-right-radius`	Opcional	8px	O raio superior direito da borda para cards personalizados consecutivos substitui o raio superior direito
`df-messenger-card-stack-border-bottom-left-radius`	Opcional	8px	O raio da borda inferior esquerda para cards personalizados consecutivos substitui o raio inferior esquerdo
`df-messenger-card-stack-border-bottom-right-radius`	Opcional	8px	O raio inferior direito da borda 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

Conteúdo avançado de uma ferramenta de playbook

Você pode usar as ferramentas do 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 da ferramenta:

properties: {}
type: object

Resposta da ferramenta:

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

Etapa 2: diga ao agente como usar essa ferramenta

Diga ao seu agente como usar a ferramenta em instruções e exemplos.

Por exemplo, adicione algo como o seguinte às suas instruções:

-  Greet  the  user
-  Ask  the  user  what  their  favorite  color  is.
   At  the  same  time  run  ${TOOL:  addRichContent}  to  display  buttons
   for  blue,  red,  yellow,  and  green.
-  Thank  the  user

Por exemplo, crie um exemplo como este:

Exemplo de captura de tela

A sintaxe do conteúdo avançado é a mesma que você usaria se fosse 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 para informar ao df-messenger que ele precisa renderizar o conteúdo avançado. Você também precisa registrar essa função com df-messenger, para que ela saiba quando executar a função quando o agente virtual precisar dela.

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

Confira um exemplo de código que pode ser usado para essa finalidade:

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

Fulfillment do Dialogflow CX Messenger Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Resposta de texto

Tipo de resposta da informação

Tipo de resposta da descrição

Tipo de resposta da imagem

Tipo de resposta em vídeo

Tipo de resposta do botão

Tipo de resposta de lista

Tipo de resposta de acordeão

Tipo de resposta do chip de sugestão

Tipo de resposta de citações

Tipo de resposta de arquivos

Tipo de resposta HTML

Aplicar estilo a HTML e Markdown

Tipo de resposta do modelo personalizado

Combinação de tipos de resposta

Conteúdo avançado de uma ferramenta de playbook

Etapa 1: criar uma ferramenta addRichContent no seu agente

Etapa 2: diga ao agente como usar essa ferramenta

Etapa 3: definir o JavaScript

Fulfillment do Dialogflow CX Messenger