Entrega de Dialogflow CX Messenger

Cuando creas una entrega de tarjeta personalizada, puedes crear respuestas de texto y cargas útiles personalizadas. Las respuestas de texto se usan para las respuestas de agentes de texto sin formato y Markdown, y 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 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 Anclaje que se seguirá cuando se haga 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 texto descriptivo breve 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 Es la imagen que se 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 de video

Captura de pantalla de tipo de video de Dialogflow Messenger

El tipo de respuesta de video renderiza un elemento de video que puede ser un video directo de la URL, que se reproduce directamente en el mensajero 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 Es 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 vincularlo a la página web del reproductor. Solo se implementa para un conjunto conocido de reproductores y es compatible con youtube.
source.thumbnail object Miniatura que se mostrará para el 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 560 px Ancho de un video incorporado (limitado por max-width\: 100%)
df-messenger-video-embed-height Opcional 315 px Altura de un video incorporado
df-messenger-video-border Opcional 1px solid #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 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 y el texto del botón
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 del 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 el "inset" horizontal adicional del elemento de lista (además del padding) para controlar la expansión del borde entre los elementos.
df-messenger-list-spacing Opcional 10 px Espacio vertical entre los elementos de la 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 establece en "bloquear", 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; 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 10 px Espacio sobre los chips hasta 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 él
df-messenger-chips-padding Opcional 6px 16px Relleno de un chip
df-messenger-chips-font-color Opcional negro Color de 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 14 px 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 difuminada de un chip
df-messenger-chips-content-align Opcional flex-start 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 citas

Captura de pantalla del tipo de citas de Dialogflow Messenger

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

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 10 px Espacio sobre las citas del mensaje anterior
df-messenger-citations-message-display Opcional bloque Define la visualización de la nota sobre 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 sobre ella
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 Antecedentes 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 Grosor de la fuente de una cita cuando se coloca el cursor sobre ella
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 que se puede descargar.

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 Anclaje 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'
            }
          }
        ]
      }
    ]
  ]
}

Se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-files-spacing Opcional 10 px 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 de Flex 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 1px solid #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 6 px 16 px 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 1px solid #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 -8 px 0 0 Desplazamiento del ícono de descarga a la derecha
df-messenger-files-icon-size Opcional 18 px Tamaño del ícono de descarga de la derecha
df-messenger-files-icon-font-color Opcional #444746 Color del ícono de descarga de la derecha

Tipo de respuesta HTML

Captura de pantalla de 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 Es el contenido de texto del mensaje, compatible con 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 poner texto en cursiva)
  • u: Elemento de 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 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 del encabezado de la tabla)
  • tbody: Es el 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 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 diseño a HTML y Markdown

Para los elementos de ancla (elemento a HTML y vínculo Markdown), se pueden proporcionar las siguientes variables de CSS:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-link-decoration Opcional subrayado Decoración de un elemento de vínculo
df-messenger-link-font-color Opcional #0b57d0 Es el color de la fuente de un elemento de vínculo no visitado.
df-messenger-link-visited-font-color Opcional #0b57d0 Es el color de la 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 transparente 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 las tablas (elemento HTML table y tablas de Markdown), las siguientes CSS: variables como se pueden proporcionar:

Propiedades Política de entrada Valor predeterminado Descripción
df-messenger-table-font-size Opcional 14 px Tamaño del texto en un elemento de tabla
df-messenger-table-font-color Opcional #1f1f1f Color de 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 colapso de bordes 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 una 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 una 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 tabla
df-messenger-table-border-right-last Opcional ninguno Borde derecho de la última celda consecutiva de la tabla
df-messenger-table-background Opcional transparente Fondo de una fila de tabla
df-messenger-table-even-background Opcional transparente Fondo de filas de tablas con números pares
df-messenger-table-odd-background Opcional transparente Fondo de las filas de la 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 del texto en una celda de encabezado de tabla
df-messenger-table-header-padding Opcional 0 Relleno 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 transparentes 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 muestra 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 JSON arbitrario. Además, dfResponseId es pasan al elemento.

Con la respuesta del ejemplo, aquí te mostramos 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 CX Messenger se pueden usar a fin de crear una tarjeta personalizada que se adapte a tus necesidades.

A continuación, se muestra un ejemplo con algunos de los elementos que se enumeran en la sección de entrega:

{
  "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 de una tarjeta personalizada
df-messenger-card-border Opcional 1px solid #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 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 difuminada de una tarjeta personalizada