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
La respuesta de texto admite texto sin formato y Markdown. Estos son algunos ejemplos de Markdown:
*Italic***Bold**# Title[Link text](Link URL)Tablas:
Header 1 | Header 2 -------- | -------- Cell 1 | Cell 2
Tipo de respuesta de información
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
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
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
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
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
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
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
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
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
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
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énurl-allowlistPersonalización de HTML)div: Elemento contenedorspan: 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
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
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 |