Entrega de Dialogflow Messenger

Cuando creas una entrega de tarjeta personalizada, puedes crear respuestas de texto y cargas útiles personalizadas. Las respuestas de texto se usan para texto sin formato y las respuestas del agente de Markdown, y las cargas útiles personalizadas se usan para respuestas enriquecidas. El formato de carga útil personalizado para todos los tipos de respuesta tiene la siguiente estructura básica:

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

Ten en cuenta que el valor richContent permite un arreglo externo y varios internos. Las respuestas dentro de un arreglo interno están unidas en una sola tarjeta visual. Cuando el arreglo externo contiene varios arreglos internos, se muestran varias tarjetas, una para cada arreglo interno.

En las subsecciones restantes, se describen los distintos tipos de respuestas que puedes configurar para una carga útil personalizada.

Respuesta de texto

Captura de pantalla de texto de Dialogflow Messenger

La respuesta de texto admite texto sin formato y Markdown. Estos son algunos ejemplos de Markdown:

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

  • Tablas:

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

Tipo de respuesta de información

Captura de pantalla del tipo de información de Dialogflow Messenger

El tipo de respuesta de información es una tarjeta de título simple que los usuarios pueden tocar o hacerles clic.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “información”
title string Título de la tarjeta
subtitle string Subtítulo de la tarjeta
image object Imagen
image.rawUrl string La URL pública de la imagen
anchor object Fijo que se sigue cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string Destino del ancla; el valor predeterminado es _blank

Por ejemplo:

{
  "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 respuesta de descripción

Captura de pantalla del tipo de descripción de Dialogflow Messenger

El tipo de respuesta de descripción es una tarjeta informativa que puede tener varias líneas de texto.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “descripción”
title string Título de la tarjeta
text array<string> Arreglo de strings, en el que cada string se procesa en una línea nueva

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

Tipo de respuesta de imagen

Captura de pantalla del tipo de imagen de Dialogflow Messenger

El tipo de respuesta de imagen es una tarjeta de imagen que los usuarios pueden tocar o hacerle clic.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “imagen”
rawUrl string La URL pública de la imagen
accessibilityText string Texto alternativo para la imagen

Por ejemplo:

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

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-image-border-radius Opcional 8 px Radio del borde de la imagen

Tipo de respuesta en video

Captura de pantalla del tipo de video de Dialogflow Messenger

El tipo de respuesta en video renderiza un elemento de video que puede ser un video directo desde una URL, reproducirse directamente en la plataforma de mensajería o un vínculo a un video.

Nombre Tipo Descripción
type string Tipo de respuesta: “video”
title string Título de video opcional
source object La fuente del video
source.type string Un tipo de fuente de video, ya sea link o raw
source.anchor object Fijo que se sigue cuando se hace clic en el elemento
source.embeddedPlayer string Se puede insertar un video de tipo link en lugar de un vínculo a la página web del reproductor. Solo se implementa para un conjunto conocido de reproductores y admite youtube.
source.thumbnail object Miniatura que se muestra para anchor
source.thumbnail.rawUrl string La URL de la miniatura
source.rawUrl string URL para un video de tipo raw

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "video",
        "source": {
          "type": "link",
          "anchor": {
            "href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
          }
        }
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-video-width Opcional automático Ancho de un video (limitado por max-width\: 100%)
df-messenger-video-height Opcional automático Altura de un video
df-messenger-video-embed-width Opcional 560px Ancho de un video incorporado (limitado por max-width\: 100%)
df-messenger-video-embed-height Opcional 315px Altura de un video incorporado
df-messenger-video-border Opcional 1 px sólido #e0e0e0 Borde del video
df-messenger-video-border-radius Opcional 8 px Radio del borde del video

Tipo de respuesta de botón

Captura de pantalla del tipo de botón de Dialogflow Messenger

El tipo de respuesta de botón es un botón pequeño con un ícono que los usuarios pueden tocar o hacerle clic.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “botón”
icon object El ícono del botón
icon.type string Ícono de la Biblioteca de íconos de material. El ícono predeterminado es una flecha
icon.color string Color de código hexadecimal
image object La imagen del botón tiene prioridad sobre icon.
image.rawUrl string La URL pública de la imagen
mode string Opcional, si se configura en "bloqueo", la entrada del usuario se inhabilita hasta que el usuario haga clic en el botón
text string Texto del botón
anchor object Fijo que se sigue cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string Destino del ancla; el valor predeterminado es _blank
event object Evento de Dialogflow que se activa cuando se hace clic en el botón

Por ejemplo:

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

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-button-border Opcional ninguno Borde de un botón
df-messenger-button-border-radius Opcional 8 px Radio del borde de un botón
df-messenger-button-font-color Opcional #1f1f1f Color del texto de un botón
df-messenger-button-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de un botón
df-messenger-button-font-size Opcional 14px Tamaño de fuente de un botón
df-messenger-button-padding Opcional 12 px Relleno de un botón
df-messenger-button-icon-spacing Opcional 12 px Espacio entre el ícono de botón y el texto
df-messenger-button-icon-font-size Opcional 24 px Tamaño del ícono del botón
df-messenger-button-image-size Opcional 24 px Tamaño de la imagen del botón
df-messenger-button-image-offset Opcional 0 Desplazamiento de la imagen del botón, permite que los valores negativos desplacen el relleno

Tipo de respuesta de lista

Captura de pantalla del tipo de lista de Dialogflow Messenger

El tipo de respuesta de lista es una tarjeta con varias opciones que los usuarios pueden seleccionar.

La respuesta contiene un arreglo de tipos de respuesta list y divider. En la siguiente tabla, se describe el tipo list:

Nombre Tipo Descripción
type string Tipo de respuesta: “lista”
title string Título de la opción
subtitle string Subtítulo de la opción
event object Evento de Dialogflow que se activa cuando se hace clic en la opción
anchor object Fijo que se sigue cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string Destino del ancla; el valor predeterminado es _blank
image object Imagen
image.rawUrl string La URL pública de la imagen

En la siguiente tabla, se describe el tipo divider:

Nombre Tipo Descripción
type string Tipo de respuesta: “divisor”

Por ejemplo:

{
  "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 respuesta de acordeón

Captura de pantalla del tipo de acordeón de Dialogflow Messenger

El tipo de respuesta de acordeón es una tarjeta pequeña que los usuarios pueden tocar o hacerle clic a fin de expandir y mostrar más texto.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “acordeón”
title string Título del acordeón
subtitle string Subtítulo del acordeón
image object Imagen
image.rawUrl string La URL pública de la imagen
text string Texto del acordeón

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Tipo de respuesta de chips de sugerencias

Captura de pantalla del tipo de chips de Dialogflow Messenger

El tipo de respuesta de chips de sugerencias le proporciona al usuario final una lista de chips de sugerencias en los que se puede hacer clic.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “chips”
options array<object> Arreglo de objetos de opciones
options[].mode string Opcional, si se configura en "bloqueo", la entrada del usuario se inhabilita hasta que el usuario haga clic en el chip.
options[].text string Texto de la opción
options[].image object Opcional, imagen de la opción
options[].image.rawUrl string La URL pública de la opción para la imagen
options[].anchor object Opcional: Anchor que se debe seguir cuando se hace clic en el elemento
options[].anchor.href string URL del ancla
options[].anchor.target string Destino del ancla; el valor predeterminado es _blank

Por ejemplo:

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

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-chips-spacing Opcional 10px Espacio encima de los chips en el mensaje anterior
df-messenger-chips-border-color Opcional #e0e0e0 Color del borde de un chip
df-messenger-chips-border-color-hover Opcional #e0e0e0 Color del borde de un chip cuando se coloca el cursor sobre él
df-messenger-chips-border-radius Opcional 999px Radio del borde de un chip
df-messenger-chips-background Opcional blanco Fondo de un chip
df-messenger-chips-background-hover Opcional rgba(68, 71, 70, 0.08) Fondo de un chip cuando se coloca el cursor sobre un elemento
df-messenger-chips-padding Opcional 6px 16px Relleno de un chip
df-messenger-chips-font-color Opcional negro Color del texto de un chip
df-messenger-chips-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de un chip
df-messenger-chips-font-size Opcional 14px Tamaño del texto de un chip
df-messenger-chips-font-weight Opcional Normal Grosor de la fuente de un chip
df-messenger-chips-font-weight-hover Opcional Normal Grosor de la fuente de un chip cuando se coloca el cursor sobre él
df-messenger-chips-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0.24) Sombra difuminada de un chip

Tipo de respuesta de citas

Captura de pantalla del tipo de citas de Dialogflow Messenger

El tipo de respuesta "citas" proporciona al usuario final una lista de vínculos de citas en los que se puede hacer clic.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “match_Appointments”
citations array<object> Array de objetos Citation
citations[].title string Título de la cita
citations[].subtitle string Subtítulo de cita (actualmente ignorado)
citations[].anchor object Fijo que se sigue cuando se hace clic en el elemento
citations[].anchor.href string URL del ancla
citations[].anchor.target string Destino del ancla; el valor predeterminado es _blank

Por ejemplo:

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

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-citations-spacing Opcional 10px Espacio sobre las citas del mensaje anterior
df-messenger-citations-message-display Opcional bloque Define la visualización de las citas de arriba. Los valores permitidos son block o none.
df-messenger-citations-message-font-color Opcional #041e49 Color del texto de la nota anterior de las citas
df-messenger-citations-message-font-size Opcional 12 px Tamaño del texto de la nota anterior de las citas
df-messenger-citations-flex-direction Opcional fila Propiedad de dirección flexible de las citas, se recomienda usar row (horizontal con saltos de línea) o column (vertical)
df-messenger-citations-border-color Opcional #1a73e8 Color del borde de una cita
df-messeenger-citations-border-color-hover Opcional #1a73e8 Color del borde de una cita cuando se coloca el cursor sobre un elemento
df-messenger-citations-border-radius Opcional 4 px Radio del borde de una cita
df-messenger-citations-padding Opcional 8 px Relleno de una cita
df-messenger-citations-background Opcional blanco Fondo de una cita
df-messenger-citations-background-hover Opcional rgba(68, 71, 70, 0.08) Fondo de una cita cuando se coloca el cursor sobre un elemento
df-messenger-citations-font-color Opcional #1a73e8 Color del texto de una cita
df-messenger-citations-font-family Opcional "Google Sans", "Helvetica Neue" y Sans Serif Familia de fuentes de una cita
df-messenger-citations-font-size Opcional 11px Tamaño del texto de una cita
df-messenger-citations-icon-font-size Opcional 14px Tamaño del texto del ícono de una cita
df-messenger-citations-font-weight Opcional Normal Grosor de la fuente de una cita
df-messenger-citations-font-weight-hover Opcional Normal Grosor de la fuente de una cita cuando se coloca el cursor sobre un elemento
df-messenger-citations-icon-spacing Opcional 4 px Espacio entre el ícono y el texto de una cita
df-messenger-citations-box-shadow Opcional ninguno Sombra difuminada de una cita

Tipo de respuesta HTML

Captura de pantalla del tipo HTML de Dialogflow Messenger

El tipo de respuesta HTML le proporciona al usuario final un mensaje HTML.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “html”
html string Contenido de texto del mensaje, compatible con HTML

Etiquetas HTML admitidas:

  • a: Elemento fijo (se usa para crear hipervínculos)
  • b: Elemento en negrita (se usa para poner el texto en negrita)
  • i: Elemento en cursiva (se usa para escribir en cursiva)
  • u: Elemento subrayado (se usa para subrayar texto)
  • h1: Elemento de encabezado 1 (se usa para el encabezado principal de una página)
  • h2: Elemento de encabezado 2 (se utiliza para los subtítulos)
  • h3: Elemento de encabezado 3 (se usa para subtítulos)
  • p: Elemento de párrafo (se usa para crear párrafos de texto)
  • br: Elemento de salto de línea (se usa para crear saltos de línea dentro de un párrafo)
  • table: Elemento de tabla (se usa para crear tablas)
  • tr: Elemento de fila de la tabla (se usa para crear filas dentro de una tabla)
  • thead: Elemento de encabezado de la tabla (se usa para crear un encabezado dentro de una tabla)
  • th: Datos del encabezado de la tabla o elemento de celda (se usa para crear celdas dentro de una fila de encabezado de tabla)
  • tbody: Elemento del cuerpo de la tabla (se usa para crear un cuerpo dentro de una tabla)
  • td: Datos de la tabla o elemento de celda (se usa para crear celdas dentro de una fila de la tabla)
  • ul: Elemento de lista sin ordenar (se usa para crear listas con viñetas)
  • ol: Elemento de lista ordenada (se usa para crear listas numeradas)
  • li: Elemento de elemento de lista (se usa para crear elementos dentro de una lista).
  • img: Elemento de imagen (que se usa para mostrar una imagen; consulta también url-allowlist personalización de HTML)
  • div: Elemento de contenedor
  • span: Elemento de contenedor intercalado

Por ejemplo:

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

Cómo dar estilo a HTML y Markdown

En el caso de los elementos de anclaje (elemento HTML a y el vínculo de Markdown), se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-link-decoration Opcional guion bajo Decoración de un elemento de vínculo
df-messenger-link-font-color Opcional #0b57d0 Color de fuente de un elemento de vínculo no visitado
df-messenger-link-visited-font-color Opcional #0b57d0 Color de fuente de un elemento de vínculo visitado
df-messenger-link-hover-font-color Opcional #0b57d0 Color de la fuente cuando se coloca el cursor sobre un elemento de un vínculo
df-messenger-link-background Opcional transparent Fondo de un elemento de vínculo
df-messenger-link-padding Opcional 0 Padding de un elemento de vínculo
df-messenger-link-border Opcional ninguno Borde de un elemento de vínculo
df-messenger-link-border-radius Opcional 0 Radio de borde de un elemento de vínculo

Para los elementos de las tablas (elemento HTML table y tablas de Markdown), se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-table-font-size Opcional 14px Tamaño del texto en un elemento de la tabla
df-messenger-table-font-color Opcional #1f1f1f Color del texto en un elemento de la tabla
df-messenger-table-align Opcional izquierda Alineación del texto en una celda de una tabla
df-messenger-table-padding Opcional 0 Padding en una celda de una tabla
df-messenger-table-border-collapse Opcional separar Modo de contracción del borde de una tabla; usa separate para habilitar border-radius
df-messenger-table-border-radius Opcional 0 Radio de borde de una tabla
df-messenger-table-header-border-radius Opcional 0 Radio de borde del encabezado de la tabla
df-messenger-table-border-top Opcional ninguno Borde superior de la fila de una tabla
df-messenger-table-border-top-first Opcional ninguno Borde superior de la primera fila de la tabla
df-messenger-table-border-bottom Opcional ninguno Borde inferior de una fila de tabla
df-messenger-table-border-bottom-last Opcional ninguno Borde inferior de la última fila de la tabla
df-messenger-table-border-left Opcional ninguno Borde izquierdo de una celda de una tabla
df-messenger-table-border-left-first Opcional ninguno Borde a la izquierda de la primera celda de la tabla de una fila
df-messenger-table-border-right Opcional ninguno Borde derecho de una celda de una tabla
df-messenger-table-border-right-last Opcional ninguno Borde derecho de la última celda de la tabla de una fila
df-messenger-table-background Opcional transparent Fondo de una fila de tabla
df-messenger-table-even-background Opcional transparent Fondo de filas de tablas con números pares
df-messenger-table-odd-background Opcional transparent Fondo de filas de tablas con números impares
df-messenger-table-header-font-size Opcional 14px Tamaño del texto en un elemento de encabezado de tabla
df-messenger-table-header-font-weight Opcional negrita Grosor de la fuente en un elemento del encabezado de una tabla
df-messenger-table-header-font-color Opcional #1f1f1f Color del texto en un elemento de encabezado de tabla
df-messenger-table-header-align Opcional izquierda Alineación del texto en la celda de encabezado de una tabla
df-messenger-table-header-padding Opcional 0 Padding en una celda de encabezado de una tabla
df-messenger-table-header-border-top Opcional ninguno Borde superior de la fila del encabezado de la tabla
df-messenger-table-header-border-bottom Opcional ninguno Borde inferior de la fila del encabezado de la tabla
df-messenger-table-header-border-left Opcional ninguno Borde a la izquierda de una celda en la fila del encabezado de la tabla
df-messenger-table-header-border-left-first Opcional ninguno Borde a la izquierda de la primera celda del encabezado de la tabla
df-messenger-table-header-border-right Opcional ninguno Borde derecho de una celda en la fila del encabezado de la tabla
df-messenger-table-header-border-right-last Opcional ninguno Borde derecho de la última celda del encabezado de una tabla
df-messenger-table-header-background Opcional transparent Fondo de la fila del encabezado de la tabla

Tipo de respuesta de plantilla personalizada

Captura de pantalla del tipo de plantilla personalizada de Dialogflow Messenger

El tipo de respuesta de la plantilla personalizada procesa un elemento personalizado definido en el sitio web del cliente. El elemento no se coloca dentro de una tarjeta y siempre es independiente.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “custom_template”
name string Nombre del elemento personalizado
payload Object Carga útil para pasar al elemento personalizado

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

En tu sitio web, el elemento personalizado debe estar registrado con el nombre exacto del campo name de la respuesta. El campo payload se pasa al elemento personalizado como dfPayload después de la construcción (pero antes de connectedCallback). El campo puede contener un JSON arbitrario. Además, dfResponseId se pasa al elemento.

Con la respuesta del ejemplo, este es un ejemplo de la implementación de un 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);
})();

Tipos de respuesta combinados

Captura de pantalla de la tarjeta personalizada de Dialogflow Messenger

Los elementos individuales de mensajes enriquecidos para Dialogflow Messenger se pueden combinar a fin de crear una tarjeta personalizada que se adapte a tus necesidades.

Este es un ejemplo con algunos de los elementos enumerados en la sección de entregas:

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

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-card-background Opcional blanco Fondo de una tarjeta personalizada
df-messenger-card-padding Opcional 16 px Padding de elementos en una tarjeta personalizada
df-messenger-card-border Opcional 1 px sólido #e0e0e0 Borde de una tarjeta personalizada
df-messenger-card-border-radius Opcional 8 px Radio del borde de una tarjeta personalizada
df-messenger-card-border-top-left-radius Opcional 8 px Radio del borde superior izquierdo de una tarjeta personalizada
df-messenger-card-border-top-right-radius Opcional 8 px Radio del borde en la esquina superior derecha de una tarjeta personalizada
df-messenger-card-border-bottom-left-radius Opcional 8 px Radio del borde inferior izquierdo de una tarjeta personalizada
df-messenger-card-border-bottom-right-radius Opcional 8 px Radio del borde inferior derecho de una tarjeta
df-messenger-card-stack-border-top-left-radius Opcional 8 px El radio del borde superior izquierdo de las tarjetas personalizadas consecutivas anula el radio superior izquierdo
df-messenger-card-stack-border-top-right-radius Opcional 8 px El radio del borde superior derecho de las tarjetas personalizadas consecutivas anula el radio superior derecho.
df-messenger-card-stack-border-bottom-left-radius Opcional 8 px El radio del borde inferior izquierdo de las tarjetas personalizadas consecutivas anula el radio inferior izquierdo
df-messenger-card-stack-border-bottom-right-radius Opcional 8 px El radio del borde inferior derecho de las tarjetas personalizadas consecutivas anula el radio inferior derecho.
df-messenger-card-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0.24) Sombra difuminada de una tarjeta personalizada