Fulfillment do Dialogflow Messenger

Ao criar um fulfillment de cartão personalizado, é possível gerar Respostas de texto e Payloads personalizados. As respostas de texto são usadas para respostas de texto simples e 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 do Dialogflow Messenger

A resposta de texto é compatível com texto simples e Markdown. Veja alguns exemplos de Markdown:

  • *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 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 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

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.

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

Exemplo:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

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 de vídeo renderiza um elemento de vídeo que pode ser um vídeo direto de URL, reproduzido diretamente no mensageiro 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 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 ser vinculado à página da Web do player. Isso só é implementado para um conjunto conhecido de players e oferece suporte a youtube.
source.thumbnail object Miniatura a ser exibida para anchor
source.thumbnail.rawUrl string O URL da miniatura
source.rawUrl string URL 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 por max-width\: 100%)
df-messenger-video-embed-height Opcional 315px Altura de um vídeo incorporado
df-messenger-video-border Opcional 1 px sólido #e0e0e0 Borda do vídeo
df-messenger-video-border-radius Opcional 8px Raio da borda do vídeo

Tipo de resposta do botão

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 Imagem do botão. Tem prioridade sobre icon.
image.rawUrl string URL público para imagem
mode string Opcional. Se definida como "bloqueio", a entrada do usuário será desativada até que o usuário clique no botão
text string Texto do botão
anchor object Âncora a ser seguida quando o elemento for clicado
anchor.href string URL da âncora
anchor.target string Destino da âncora, o padrão é _blank.
event object Evento do Dialogflow que é acionado quando o botão é clicado.

Exemplo:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "mode": "blocking",
        "text": "Button text",
        "anchor": {
          "href": "https://example.com"
        },
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

As seguintes variáveis CSS podem ser fornecidas:

Propriedades Política de entrada Valor padrão Descrição
df-messenger-button-border Opcional nenhum Borda de um botão
df-messenger-button-border-radius Opcional 8px Raio da borda de um botão
df-messenger-button-font-color Opcional #1f1f1f Cor do texto de um botão
df-messenger-button-font-family Opcional "Google Sans", "Helvetica Neue", Sans Serif Família de fontes de um botão
df-messenger-button-font-size Opcional 14px Tamanho da fonte de um botão
df-messenger-button-padding Opcional 12px Padding de um botão
df-messenger-button-icon-spacing Opcional 12px Espaço entre o texto e o ícone 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.

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 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": ""
        }
      }
    ]
  ]
}

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

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 ícone 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, opção de imagem
options[].image.rawUrl string URL público da opção para imagem
options[].anchor object Opcional, Âncora para seguir 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 í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
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 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
df-messenger-chips-font-family Opcional "Google Sans", "Helvetica Neue", Sans Serif Família de fontes de um ícone
df-messenger-chips-font-size Opcional 14px Tamanho do texto de um ícone
df-messenger-chips-font-weight Opcional normal Espessura da fonte de um ícone
df-messenger-chips-font-weight-hover Opcional normal Espessura da fonte de um ícone ao passar o cursor
df-messenger-chips-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0,24) Sombra da caixa de um ícone

Tipo de resposta das citações

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

O tipo de resposta "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 (ignorado atualmente)
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 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, recomenda-se o uso de row (horizontal com quebras de linha) ou column (vertical)
df-messenger-citations-border-color Opcional #1a73e8 Cor da borda de uma citação
df-messeenger-citations-border-color-hover Opcional #1a73e8 Cor da borda de uma citação ao passar o cursor
df-messenger-citations-border-radius Opcional 4px Raio da borda de uma citação
df-messenger-citations-padding Opcional 8px Padding de uma citação
df-messenger-citations-background Opcional branco Plano de fundo de uma citação
df-messenger-citations-background-hover Opcional rgba(68; 71; 70; 0,08) Plano de fundo de uma citação ao passar o cursor
df-messenger-citations-font-color Opcional #1a73e8 Cor do texto de uma citação
df-messenger-citations-font-family Opcional "Google Sans", "Helvetica Neue", Sans Serif Família de fontes de uma citação
df-messenger-citations-font-size Opcional 11px Tamanho do texto de uma citação
df-messenger-citations-icon-font-size Opcional 14px Tamanho do texto do ícone de uma citação
df-messenger-citations-font-weight Opcional normal Espessura da fonte de uma citação
df-messenger-citations-font-weight-hover Opcional normal Espessura da fonte de uma citação ao passar o cursor
df-messenger-citations-icon-spacing Opcional 4px Espaço entre o ícone e o texto de uma citação
df-messenger-citations-box-shadow Opcional nenhum Sombra da caixa de uma citação

Tipo de resposta HTML

Captura de tela do tipo html do Dialogflow Messenger

O tipo de resposta HTML fornece uma mensagem HTML ao usuário final.

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 o texto em negrito).
  • i: elemento em itálico (usado para texto em itálico)
  • u: elemento sublinhado (usado para sublinhado o 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 subsubcabeçalhos)
  • p: elemento de parágrafo (usado para criar parágrafos de texto)
  • br: elemento de quebra de linha (usado para criar quebras de linha em um parágrafo)
  • table: elemento de tabela usado para criar tabelas
  • tr: elemento de linha da tabela (usado para criar linhas dentro de uma tabela)
  • thead: elemento de cabeçalho da tabela (usado para criar um cabeçalho dentro de uma tabela)
  • th: dados do cabeçalho da tabela ou elemento da célula (usado para criar células dentro de uma linha de cabeçalho de tabela)
  • tbody: elemento do corpo da tabela (usado para criar um corpo dentro de uma tabela)
  • td: dados da tabela ou elemento da 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 de item da lista (usado para criar itens dentro de uma lista).
  • img: elemento de imagem (usado para mostrar uma imagem. Consulte também url-allowlist Personalização de HTML)
  • div: elemento do 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>"
      }
    ]
  ]
}

Como definir o estilo do HTML e Markdown

Para elementos fixos (elemento HTML a e link Markdown), as seguintes variáveis CSS podem ser fornecidas:

Propriedades Política de entrada Valor padrão Descrição
df-messenger-link-decoration Opcional sublinhado Decoração de um elemento do link
df-messenger-link-font-color Opcional #0b57d0 Cor da fonte de um elemento do link não visitado
df-messenger-link-visited-font-color Opcional #0b57d0 Cor da fonte de um elemento do link visitado
df-messenger-link-hover-font-color Opcional #0b57d0 Cor da fonte ao passar o cursor sobre um elemento do link
df-messenger-link-background Opcional transparent Segundo plano de um elemento do link
df-messenger-link-padding Opcional 0 Padding de um elemento do link
df-messenger-link-border Opcional nenhum Borda de um elemento do link
df-messenger-link-border-radius Opcional 0 Raio da borda de um elemento do link

Para elementos de tabela (elemento HTML table e tabelas Markdown), 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 do texto em uma célula da tabela
df-messenger-table-padding Opcional 0 Padding em uma célula da tabela
df-messenger-table-border-collapse Opcional separações Modo de recolhimento de borda 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 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 em uma linha da tabela
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 em uma linha da tabela
df-messenger-table-background Opcional transparent Plano de fundo de uma linha de tabela
df-messenger-table-even-background Opcional transparent Plano de fundo de linhas de tabela numeradas pares
df-messenger-table-odd-background Opcional transparent Plano de fundo de linhas de tabela com numeração ímpar
df-messenger-table-header-font-size Opcional 14px Tamanho do texto em um elemento de cabeçalho da tabela
df-messenger-table-header-font-weight Opcional negrito Espessura da fonte em um elemento de cabeçalho da tabela
df-messenger-table-header-font-color Opcional #1f1f1f Cor do texto em um elemento de cabeçalho da tabela
df-messenger-table-header-align Opcional à esquerda Alinhamento do texto em uma célula de cabeçalho da 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 do cabeçalho da tabela
df-messenger-table-header-border-bottom Opcional nenhum Borda inferior da linha do cabeçalho da tabela
df-messenger-table-header-border-left Opcional nenhum Borda esquerda de uma célula na linha do cabeçalho da tabela
df-messenger-table-header-border-left-first Opcional nenhum Borda esquerda da primeira célula na linha do cabeçalho da tabela
df-messenger-table-header-border-right Opcional nenhum Borda direita de uma célula na linha do cabeçalho da tabela
df-messenger-table-header-border-right-last Opcional nenhum Borda direita da última célula em uma linha de cabeçalho de tabela
df-messenger-table-header-background Opcional transparent Plano de fundo da linha do cabeçalho da tabela

Tipo de resposta de 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 cartão 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 para transmitir 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 no 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, veja 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 Messenger podem ser usados para criar um cartão personalizado que atenda às suas necessidades.

Aqui está 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 cartão personalizado
df-messenger-card-padding Opcional 16 px 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 O raio da borda de um cartão personalizado
df-messenger-card-border-top-left-radius Opcional 8px Raio da borda superior esquerda de um cartão personalizado
df-messenger-card-border-top-right-radius Opcional 8px Raio da borda superior direita de um cartão personalizado
df-messenger-card-border-bottom-left-radius Opcional 8px Raio da borda inferior esquerda de um cartão 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 da borda superior esquerda para cards personalizados consecutivos substitui o raio superior esquerdo
df-messenger-card-stack-border-top-right-radius Opcional 8px O raio da borda superior direita 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 da borda inferior direita para cards personalizados consecutivos substitui o raio inferior direito
df-messenger-card-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0,24) Sombra da caixa de um cartão personalizado