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 |
Es el objetivo del ancla, que se establece de forma predeterminada en _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 que se mostrará en el chip de referencia |
reference.anchor.href |
string |
URL del chip de referencia |
reference.anchor.target |
string |
Es el objetivo 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 | Es el 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 |
Anclaje que se seguirá cuando se haga 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 de un video de tipo raw |
Por ejemplo:
{
"richContent": [
[
{
"type": "video",
"source": {
"type": "link",
"anchor": {
"href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
}
}
}
]
]
}
Se pueden proporcionar las siguientes variables de CSS:
| Propiedades | Política de entrada | Valor predeterminado | Descripción |
|---|---|---|---|
df-messenger-video-width |
Opcional | automático | Ancho de un video (limitado por max-width\: 100%) |
df-messenger-video-height |
Opcional | automático | Altura de un video |
df-messenger-video-embed-width |
Opcional | 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 |
Es 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 en "bloqueo", la entrada del usuario se inhabilita hasta que el usuario haga clic en el botón. |
text |
string |
Texto del botón |
anchor |
object |
Anclaje que se seguirá cuando se haga clic en el elemento |
anchor.href |
string |
URL del ancla |
anchor.target |
string |
Es el objetivo del ancla, que se establece de forma predeterminada en _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 | Es el 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 | 14 px | Tamaño de fuente de un botón |
df-messenger-button-padding |
Opcional | 12 px | Margen 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 | Es el desplazamiento de la imagen del botón, que permite que los valores negativos compensen 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 no permitir 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 |
Anclaje que se seguirá cuando se haga clic en el elemento |
anchor.href |
string |
URL del ancla |
anchor.target |
string |
Es el objetivo del ancla, que se establece de forma predeterminada en _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 | Margen 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 | 1px solid #e0e0e0 | Borde entre elementos de 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 |
Es opcional. Es el anclaje al que se debe seguir cuando se hace clic en el elemento. |
options[].anchor.href |
string |
URL del ancla |
options[].anchor.target |
string |
Es el objetivo del ancla, que se establece de forma predeterminada en _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 | 999 px | 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 | 6 px 16 px | 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 sobre él |
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 de citas le proporciona al usuario final una lista de vínculos de citas en los que se puede hacer clic.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string |
Tipo de respuesta: "match_citations" |
citations |
array<object> |
Array de objetos de cita |
citations[].title |
string |
Título de la cita |
citations[].subtitle |
string |
Subtítulo de la cita (actualmente se ignora) |
citations[].anchor |
object |
Anclaje que se seguirá cuando se haga clic en el elemento |
citations[].anchor.href |
string |
URL del ancla |
citations[].anchor.target |
string |
Es el objetivo del ancla, que se establece de forma predeterminada en _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 | Es el color del texto de la nota que se encuentra sobre las citas. |
df-messenger-citations-message-font-size |
Opcional | 12 px | Tamaño del texto de la nota sobre 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 | Es el 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 | 11 px | Tamaño del texto de una cita |
df-messenger-citations-icon-font-size |
Opcional | 14 px | 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 difuminada 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 |
La URL pública del archivo de la imagen |
files[].anchor |
object |
Anclaje para descargar el archivo |
files[].anchor.href |
string |
URL del ancla |
files[].anchor.target |
string |
Es el objetivo del ancla, que se establece de forma predeterminada en _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 | 999 px | Radio del borde de un archivo |
df-messenger-files-box-shadow |
Opcional | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Sombra difuminada de un archivo |
df-messenger-files-padding |
Opcional | 6 px 16 px | Relleno de un archivo |
df-messenger-files-font-color |
Opcional | #1f1f1f | Es el color de 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 | 14 px | 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 de un archivo cuando se coloca el cursor sobre él |
df-messenger-files-font-weight-hover |
Opcional | Normal | Grosor de la fuente de un archivo cuando se coloca el cursor sobre él |
df-messenger-files-image-offset |
Opcional | 0 0 0 -8 px | 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 hacia 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 admitidas:
a: Elemento de anclaje (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 dentro de 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: Es un elemento de encabezado de tabla (se usa para crear un encabezado dentro de una tabla).th: Datos del encabezado de la tabla o elemento de celda (se usa para crear celdas dentro de una fila 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 no ordenada (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 (se usa para mostrar una imagen, consulta tambiénurl-allowlistpersonalización de HTML)div: Elemento de contenedorspan: Elemento de contenedor intercalado
Por ejemplo:
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
Aplica 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 tabla (elemento table de HTML 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 | 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 una celda de tabla |
df-messenger-table-padding |
Opcional | 0 | Relleno en una celda de tabla |
df-messenger-table-border-collapse |
Opcional | separado | 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 una celda de tabla |
df-messenger-table-border-left-first |
Opcional | ninguno | Borde izquierdo de la primera celda de la tabla en una fila |
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 de la tabla en una fila |
df-messenger-table-background |
Opcional | transparente | Fondo de una fila de tabla |
df-messenger-table-even-background |
Opcional | transparente | Fondo de las filas de la tabla 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 | 14 px | 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 del encabezado de una 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 de la fila del encabezado de la tabla |
df-messenger-table-header-border-right |
Opcional | ninguno | Borde derecho de una celda en la fila del encabezado de la tabla |
df-messenger-table-header-border-right-last |
Opcional | ninguno | Borde derecho de la última celda de una fila de encabezado de tabla |
df-messenger-table-header-background |
Opcional | transparente | Fondo de la fila del encabezado de la tabla |
Tipo de respuesta de la 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 que se 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 registrarse 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 se pasa al elemento.
Con la respuesta del ejemplo, este es un ejemplo de implementación de un elemento personalizado:
class CustomElementExample extends HTMLElement {
constructor() {
super();
// The `dfPayload` field will be provided before `connectedCallback` is
// being called.
this.dfPayload = null;
// The `dfResponseId` field will be provided before `connectedCallback` is
// being called.
this.dfResponseId = null;
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
// https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
this.renderRoot = this.attachShadow({mode: 'open'});
}
/** Web component Lifecycle method. */
connectedCallback() {
const div = document.createElement('div');
// The `.text` must match the payload's structure in `richContent.payload`.
div.innerText = this.dfPayload.text;
this.renderRoot.appendChild(div);
}
}
(function() {
// Registers the element. This name must match the name in
// `richContent.payload`.
customElements.define('custom-element-example', CustomElementExample);
})();
Tipos de respuesta combinados
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 | Margen de los elementos en 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 esquina superior derecha de una tarjeta personalizada |
df-messenger-card-border-bottom-left-radius |
Opcional | 8 px | Rincón inferior izquierdo del borde de una tarjeta personalizada |
df-messenger-card-border-bottom-right-radius |
Opcional | 8 px | Radio del borde inferior derecho de una tarjeta |
df-messenger-card-stack-border-top-left-radius |
Opcional | 8 px | El radio del borde superior izquierdo para tarjetas personalizadas consecutivas anula el radio superior izquierdo |
df-messenger-card-stack-border-top-right-radius |
Opcional | 8 px | El radio del borde superior derecho para 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 |
Contenido enriquecido de una herramienta de guía
Puedes usar las herramientas de la guía para enviar contenido enriquecido a Dialogflow CX Messenger.
Paso 1: Crea una herramienta addRichContent en tu agente
Crea una herramienta de función llamada addRichContent con los siguientes datos:
Entrada de herramientas:
properties: {}
type: object
Resultado de la herramienta:
properties:
status:
type: string
reason:
type: string
type: object
Paso 2: Dile a tu agente cómo usar esta herramienta
Explícale a tu agente cómo usar la herramienta con instrucciones y ejemplos.
Por ejemplo, agrega algo como lo siguiente a tus instrucciones:
- Greet the user
- Ask the user what their favorite color is.
At the same time run ${TOOL: addRichContent} to display buttons
for blue, red, yellow, and green.
- Thank the user
Por ejemplo, crea un ejemplo como el siguiente:
Ten en cuenta que la sintaxis del contenido enriquecido es la misma que usarías si devolvieras una carga útil personalizada en un agente virtual basado en flujos.
Paso 3: Define el código JavaScript
En el código de la página que aloja df-messenger, debes crear un código JavaScript que defina una función que le indique a df-messenger que renderice el contenido enriquecido.
También debes registrar esa función con df-messenger para que sepa ejecutarla cuando el agente virtual la necesite.
Asegúrate de que la variable dfMessenger esté declarada y que apunte a tu instancia de df-messenger.
Este es un ejemplo de código que puedes usar para este fin:
const dfMessenger = document.querySelector('df-messenger');
function addRichContent(customPayload) {
dfMessenger.renderCustomCard(customPayload.richContent);
// add error handling
return Promise.resolve({ status: "OK", reason: null });
}
// substitute your own tool id
const toolId = 'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId, addRichContent.name, addRichContent);