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)

  • 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

Captura de tela do tipo de botão do Dialogflow Messenger

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