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, mientras que las cargas útiles personalizadas se usan para las 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 de 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 Fijación para seguir cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string El 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. El tipo de respuesta admite un chip de referencia que permite agregar la fuente de la imagen como un vínculo de anclaje junto con un breve texto descriptivo y un ícono.

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
reference.text string Texto para mostrar en el chip de referencia
reference.anchor.href string URL del chip de referencia
reference.anchor.target string Destino del ancla en el chip de referencia; el valor predeterminado es _blank
reference.image.rawUrl string Imagen para mostrar en el chip de referencia

Por ejemplo:

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

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 de tipo de video de Dialogflow Messenger

El tipo de respuesta en video renderiza un elemento de video que puede ser un video directo de una URL, reproducido directamente en el servicio de mensajería o un vínculo a un video.

Nombre Tipo Descripción
type string Tipo de respuesta: “video”
title string Título opcional del video
source object La fuente del video
source.type string Un tipo de fuente de video, ya sea link o raw
source.anchor object Fijación para seguir cuando se hace clic en el elemento
source.embeddedPlayer string Se puede incorporar un video de tipo link en lugar de un vínculo a la página web del reproductor. Esto solo se implementa para un conjunto conocido de jugadores y admite youtube.
source.thumbnail object Miniatura que se mostrará para anchor
source.thumbnail.rawUrl string La URL de la miniatura
source.rawUrl string URL para un video del 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 establece como "bloqueador", la entrada del usuario se inhabilita hasta que el usuario hace clic en el botón.
text string Texto del botón
anchor object Fijación para seguir cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string El 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", 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 del 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 padding.
df-messenger-button-text-align Opcional center Alineación de texto de un botón
df-messenger-button-text-wrap Opcional Normal Usa nowrap para inhabilitar los botones de varias líneas

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 Fijación para seguir cuando se hace clic en el elemento
anchor.href string URL del ancla
anchor.target string El 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": ""
        }
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-list-padding Opcional 16 px Relleno de un elemento de lista
df-messenger-list-inset Opcional 0 Es una "inserción" horizontal adicional del elemento de lista (además del relleno) para controlar la expansión del borde entre los elementos.
df-messenger-list-spacing Opcional 10px Espacio vertical entre los elementos de lista
df-messenger-list-border-bottom Opcional 1 px sólido #e0e0e0 Borde entre los elementos de la lista

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 hace clic en el chip
options[].text string Texto de la opción
options[].image object Opcional, opción de imagen
options[].image.rawUrl string La URL pública de la opción para la imagen
options[].anchor object Opcional; el fijo se debe seguir cuando se hace clic en el elemento.
options[].anchor.href string URL del ancla
options[].anchor.target string El 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 sobre los chips al 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 él
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", 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
df-messenger-chips-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0.24) Sombra de caja de un chip
df-messenger-chips-content-align Opcional inicio flexible Alineación vertical del contenido (p.ej., la imagen) en un chip
df-messenger-chips-text-wrap Opcional nowrap Usa normal para permitir chips de varias líneas.

Tipo de respuesta de las citas

Captura de pantalla del tipo de citas de Dialogflow Messenger

El tipo de respuesta de citas proporciona al usuario final una lista de vínculos de cita 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_citas"
citations array<object> Arreglo de objetos de Cita
citations[].title string Título de la cita
citations[].subtitle string Subtítulo de la cita (actualmente ignorado)
citations[].anchor object Fijación para seguir cuando se hace clic en el elemento
citations[].anchor.href string URL del ancla
citations[].anchor.target string El 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 la nota anterior a las citas. Los valores permitidos son block o none.
df-messenger-citations-message-font-color Opcional #041e49 Color del texto de la nota encima de las citas
df-messenger-citations-message-font-size Opcional 12 px Tamaño del texto de la nota anterior a 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
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 Contexto 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 ella
df-messenger-citations-font-color Opcional #1a73e8 Color del texto de una cita
df-messenger-citations-font-family Opcional "Google Sans", "Helvetica Neue", 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 Espesor de la fuente de una cita cuando se coloca el cursor
df-messenger-citations-icon-spacing Opcional 4 px Espacio entre el ícono y el texto en una cita
df-messenger-citations-box-shadow Opcional ninguno Sombra de cuadro de una cita

Tipo de respuesta de archivos

Captura de pantalla de tipo de archivos de Dialogflow Messenger

El tipo de respuesta de archivos renderiza una lista de elementos de archivo que contienen un vínculo descargable.

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “archivos”
files array<object> Array de objetos File
files[].name string Nombre del archivo
files[].image object Imagen del archivo
files[].image.rawUrl string URL pública del archivo para la imagen
files[].anchor object Anchor para descargar el archivo
files[].anchor.href string URL del ancla
files[].anchor.target string El destino del ancla, el valor predeterminado es _blank.

Por ejemplo:

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

Las siguientes variables de CSS se pueden proporcionar

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-files-spacing Opcional 10px Espacio sobre el archivo hasta el mensaje anterior
df-messenger-files-distance Opcional 8 px Distancia entre los archivos de la lista
df-messenger-files-flex-direction Opcional fila Propiedad de dirección flexible de los archivos; se recomienda usar row (horizontal con saltos de línea) o column (vertical)
df-messenger-files-background Opcional blanco Fondo de un archivo
df-messenger-files-border Opcional 1 px sólido #e0e0e0 Borde de un archivo
df-messenger-files-border-radius Opcional 999px Radio del borde de un archivo
df-messenger-files-box-shadow Opcional 0 2px 2px 0 rgba(0, 0, 0, 0.24) Sombra de cuadro de un archivo
df-messenger-files-padding Opcional 6px 16px Padding de un archivo
df-messenger-files-font-color Opcional #1f1f1f Color del texto de un archivo
df-messenger-files-font-family Opcional "Google Sans", "Helvetica Neue", sans-serif Familia de fuentes de un archivo
df-messenger-files-font-size Opcional 14px Tamaño del texto de un archivo
df-messenger-files-font-weight Opcional Normal Grosor de la fuente de un archivo
df-messenger-files-background-hover Opcional blanco Fondo de un archivo cuando se coloca el cursor sobre él
df-messenger-files-border-hover Opcional 1 px sólido #e0e0e0 Borde del archivo cuando se coloca el cursor sobre él
df-messenger-files-font-weight-hover Opcional Normal El grosor de la fuente de un archivo cuando se coloca el cursor sobre él
df-messenger-files-image-offset Opcional 0 0 0 -8px Desplazamiento de la imagen a la izquierda
df-messenger-files-image-size Opcional 18 px Tamaño de la imagen de la izquierda
df-messenger-files-text-spacing Opcional 8 px Distancia entre el texto de la imagen (a la izquierda) y el ícono de texto (a la derecha)
df-messenger-files-icon-offset Opcional 0 -8px 0 0 Desplazamiento del ícono de descarga a la derecha
df-messenger-files-icon-size Opcional 18 px Tamaño del ícono de descarga a la derecha
df-messenger-files-icon-font-color Opcional #444746 Color del ícono de descarga a la derecha

Tipo de respuesta HTML

Captura de pantalla de tipo HTML de Dialogflow Messenger

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

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, admite HTML

Etiquetas HTML compatibles:

  • a: Elemento fijo (se usa para crear hipervínculos)
  • b: Elemento en negrita (se usa para aplicar negrita al texto)
  • i: Elemento en cursiva (se usa para texto en cursiva)
  • u: Elemento de subrayado (se usa para subrayar el texto)
  • h1: Elemento de encabezado 1 (se usa para el encabezado principal de una página)
  • h2: Elemento de encabezado 2 (se usa para 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 en un párrafo)
  • table: Elemento de tabla (se usa para crear tablas)
  • tr: Elemento de fila de tabla (se usa para crear filas dentro de una tabla)
  • thead: Elemento de encabezado de tabla (que 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 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 contenedor
  • span: Elemento contenedor intercalado

Por ejemplo:

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

Cómo aplicar estilos a HTML y Markdown

Para los elementos de anclaje (elemento HTML a y 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 vínculo
df-messenger-link-background Opcional transparent Fondo de un elemento de vínculo
df-messenger-link-padding Opcional 0 Relleno 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 del borde de un elemento de vínculo

Para los elementos de tabla (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 tabla
df-messenger-table-font-color Opcional #1f1f1f Color del texto en un elemento de tabla
df-messenger-table-align Opcional izquierda Alineación del texto en la celda de una tabla
df-messenger-table-padding Opcional 0 Padding en una celda de la 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 del borde de una tabla
df-messenger-table-header-border-radius Opcional 0 Radio del borde del encabezado de la tabla
df-messenger-table-border-top Opcional ninguno Borde superior de la fila de la 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 la fila de la 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 la celda de una tabla
df-messenger-table-border-left-first Opcional ninguno Borde izquierdo de la primera celda consecutiva de la tabla
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 consecutiva de la tabla
df-messenger-table-background Opcional transparent Fondo de una fila de la 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 las filas de una tabla 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 de encabezado de 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 de texto en la celda de encabezado de una tabla
df-messenger-table-header-padding Opcional 0 Padding en una celda de encabezado de 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 izquierdo de una celda en la fila del encabezado de la tabla
df-messenger-table-header-border-left-first Opcional ninguno Borde izquierdo de la primera celda en la fila del encabezado de la tabla
df-messenger-table-header-border-right Opcional ninguno Borde derecho de una celda en la fila de encabezado de la tabla
df-messenger-table-header-border-right-last Opcional ninguno Borde derecho de la última celda de la fila de encabezado de una tabla
df-messenger-table-header-background Opcional transparent Background de la fila de 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 plantilla personalizada renderiza un elemento personalizado definido en el sitio web del cliente. El elemento no se coloca dentro de una tarjeta y siempre se mantiene por sí solo.

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, se pasa dfResponseId al elemento.

Con la respuesta del ejemplo, a continuación se muestra una implementación de ejemplo 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 Relleno 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 en la parte superior izquierda de una tarjeta personalizada
df-messenger-card-border-top-right-radius Opcional 8 px Radio del borde en la parte 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 en la parte inferior derecha de una tarjeta
df-messenger-card-stack-border-top-left-radius Opcional 8 px El radio del borde en la parte superior izquierda 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 en la parte superior derecha 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 para 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 para 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 de cuadrado de una tarjeta personalizada