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 del agente en 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. A continuación, se incluyen 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 |
Ancla que se seguirá cuando se haga clic en el elemento |
anchor.href |
string |
URL del ancla |
anchor.target |
string |
Es el destino del vínculo de anclaje. 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 corto 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 destino de la ancla en el chip de referencia. El valor predeterminado es _blank. |
reference.image.rawUrl |
string |
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 desde una 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 |
Ancla 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 jugadores y admite youtube. |
source.thumbnail |
object |
Miniatura que se mostrará para anchor |
source.thumbnail.rawUrl |
string |
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 incrustado |
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 |
Imagen del botón, tiene prioridad sobre icon |
image.rawUrl |
string |
La URL pública de la imagen |
mode |
string |
Opcional. Si se establece como "blocking", la entrada del usuario se inhabilita hasta que este haga clic en el botón. |
text |
string |
Texto del botón |
anchor |
object |
Ancla que se seguirá cuando se haga clic en el elemento |
anchor.href |
string |
URL del ancla |
anchor.target |
string |
Es el destino del vínculo de anclaje. El valor predeterminado es _blank. |
event |
object |
Evento de Dialogflow CX 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 | 14 px | Tamaño de fuente de un botón |
df-messenger-button-padding |
Opcional | 12 px | Padding 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 valores negativos para desplazar 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 CX que se activa cuando se hace clic en la opción |
anchor |
object |
Ancla que se seguirá cuando se haga clic en el elemento |
anchor.href |
string |
URL del ancla |
anchor.target |
string |
Es el destino del vínculo de anclaje. 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 | Padding de un elemento de lista |
df-messenger-list-inset |
Opcional | 0 | Inserción horizontal adicional del elemento de la 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 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 como "bloqueante", la entrada del usuario se inhabilita hasta que este 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, ancla que se seguirá cuando se haga clic en el elemento |
options[].anchor.href |
string |
URL del ancla |
options[].anchor.target |
string |
Es el destino del vínculo de anclaje. 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 | 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 | Padding de un chip |
df-messenger-chips-font-color |
Opcional | negro | Color del texto de un chip |
df-messenger-chips-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Familia de fuentes de un chip |
df-messenger-chips-font-size |
Opcional | 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 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 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> |
Es un array de objetos Citation. |
citations[].title |
string |
Título de la cita |
citations[].subtitle |
string |
Subtítulo de la cita (actualmente se ignora) |
citations[].anchor |
object |
Ancla que se seguirá cuando se haga clic en el elemento |
citations[].anchor.href |
string |
URL del ancla |
citations[].anchor.target |
string |
Es el destino del vínculo de anclaje. 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 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 de Flex 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 | Padding 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 de un cuadro de cita |
Tipo de respuesta de archivos
El tipo de respuesta de archivos renderiza una lista de elementos de archivo que contienen un vínculo descargable.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string |
Tipo de respuesta: “archivos” |
files |
array<object> |
Es un 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 de imagen |
files[].anchor |
object |
Ancla para descargar el archivo |
files[].anchor.href |
string |
URL del ancla |
files[].anchor.target |
string |
Es el destino del vínculo de anclaje. 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 | 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 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 | 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 -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 la imagen y el texto a la izquierda, y el texto y el ícono a la derecha |
df-messenger-files-icon-offset |
Opcional | 0 -8px 0 0 | Desplazamiento del ícono de descarga a la derecha |
df-messenger-files-icon-size |
Opcional | 18 px | Tamaño del ícono de descarga a la derecha |
df-messenger-files-icon-font-color |
Opcional | #444746 | Color del ícono de descarga a la derecha |
Tipo de respuesta HTML
El tipo de respuesta HTML le proporciona al usuario final un mensaje en HTML.
En la siguiente tabla, se describen los campos:
| Nombre | Tipo | Descripción |
|---|---|---|
type |
string |
Tipo de respuesta: “html” |
html |
string |
Contenido de texto del mensaje, admite 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 de 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 los subtítulos)h3: Elemento de encabezado 3 (se usa para los subencabezados secundarios)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: 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 de encabezado de la tabla)tbody: Elemento del cuerpo de la tabla (se usa para crear un cuerpo dentro de una tabla)td: Datos de la tabla o elemento de celda (se usa para crear celdas dentro de una fila de la tabla)ul: Elemento de lista sin ordenar (se usa para crear listas con viñetas)ol: Elemento de lista ordenada (se usa para crear listas numeradas)li: Elemento de elemento de lista (se usa para crear elementos dentro de una lista)img: Elemento de imagen (se usa para mostrar una imagen; consulta también la personalización de HTML deurl-allowlist)div: Elemento contenedorspan: Elemento de contenedor intercalado
Por ejemplo:
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
Cómo aplicar estilos a HTML y Markdown
Para los elementos de anclaje (elemento a de HTML y vínculo de Markdown), se pueden proporcionar las siguientes variables de CSS:
| Propiedades | Política de entrada | Valor predeterminado | Descripción |
|---|---|---|---|
df-messenger-link-decoration |
Opcional | subrayado | Decoración de un elemento de vínculo |
df-messenger-link-font-color |
Opcional | #0b57d0 | Color de la fuente de un elemento de vínculo no visitado |
df-messenger-link-visited-font-color |
Opcional | #0b57d0 | Color de la fuente de un elemento de vínculo visitado |
df-messenger-link-hover-font-color |
Opcional | #0b57d0 | Color de 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 | Padding de un elemento de vínculo |
df-messenger-link-border |
Opcional | ninguno | Borde de un elemento de vínculo |
df-messenger-link-border-radius |
Opcional | 0 | Radio 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 del 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 | Padding en una celda de 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 una celda de la tabla |
df-messenger-table-border-left-first |
Opcional | ninguno | Borde a la izquierda de la primera celda de la tabla en una fila |
df-messenger-table-border-right |
Opcional | ninguno | Borde derecho de una celda de la 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 la 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 de encabezado de tabla |
df-messenger-table-header-padding |
Opcional | 0 | Padding en una celda de encabezado de tabla |
df-messenger-table-header-border-top |
Opcional | ninguno | Borde superior de la fila del encabezado de la tabla |
df-messenger-table-header-border-bottom |
Opcional | ninguno | Borde inferior de la fila del encabezado de la tabla |
df-messenger-table-header-border-left |
Opcional | ninguno | Borde a la izquierda de una celda en la fila de encabezado de la tabla |
df-messenger-table-header-border-left-first |
Opcional | ninguno | Borde a la izquierda 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 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 |
Es la 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, se pasa dfResponseId al elemento.
Con la respuesta del ejemplo, a continuación, se muestra 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 mencionan en la sección de cumplimiento:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Dialogflow CX across platforms"
},
{
"type": "info",
"title": "Dialogflow CX",
"subtitle": "Build natural and rich conversational experiences",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
},
{
"type": "chips",
"options": [
{
"text": "Case Studies",
"anchor": {
"href": "https://cloud.google.com/dialogflow/case-studies"
}
},
{
"text": "Docs",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
}
]
}
]
]
}
Se pueden proporcionar las siguientes variables de CSS:
| Propiedades | Política de entrada | Valor predeterminado | Descripción |
|---|---|---|---|
df-messenger-card-background |
Opcional | blanco | Fondo de una tarjeta personalizada |
df-messenger-card-padding |
Opcional | 16 px | Padding de 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 superior izquierdo de una tarjeta personalizada |
df-messenger-card-border-top-right-radius |
Opcional | 8 px | Radio del borde superior derecho de una tarjeta personalizada |
df-messenger-card-border-bottom-left-radius |
Opcional | 8 px | Radio del borde inferior izquierdo de una tarjeta personalizada |
df-messenger-card-border-bottom-right-radius |
Opcional | 8 px | Radio del borde inferior derecho de una tarjeta |
df-messenger-card-stack-border-top-left-radius |
Opcional | 8 px | El radio del borde superior izquierdo para las tarjetas personalizadas consecutivas anula el radio superior izquierdo. |
df-messenger-card-stack-border-top-right-radius |
Opcional | 8 px | El radio del borde superior derecho para las tarjetas personalizadas consecutivas anula el radio superior derecho. |
df-messenger-card-stack-border-bottom-left-radius |
Opcional | 8 px | El radio del borde inferior izquierdo para las tarjetas personalizadas consecutivas anula el radio inferior izquierdo. |
df-messenger-card-stack-border-bottom-right-radius |
Opcional | 8 px | El radio del borde inferior derecho para las tarjetas personalizadas consecutivas anula el radio inferior derecho. |
df-messenger-card-box-shadow |
Opcional | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Sombra de una tarjeta personalizada |
Contenido enriquecido de una herramienta de la 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 la herramienta:
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
Indícale a tu agente cómo usar la herramienta en las instrucciones y los 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 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 que debe ejecutarla cuando el agente virtual la necesite.
Asegúrate de que la variable dfMessenger esté declarada y apunte a tu instancia de df-messenger.
Aquí tienes un ejemplo de código que puedes usar para este propósito:
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);