Cumplimiento de Dialogflow CX Messenger

Cuando creas una tarjeta personalizada de respuesta, puedes crear respuestas de texto y cargas útiles personalizadas. Las respuestas de texto se usan para las respuestas de texto sin formato y Markdown del agente, y las cargas útiles personalizadas se usan para las respuestas enriquecidas. El formato de carga útil personalizada de 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 array externo y varios arrays internos. Las respuestas de una matriz interna se combinan en una sola tarjeta visual. Si el array externo contiene varios arrays internos, se mostrarán varias tarjetas, una por cada array interno.

En las subsecciones restantes se describen los distintos tipos de respuestas que puedes configurar para una carga útil personalizada.

Respuesta de texto rápida

La respuesta de texto admite texto sin formato y Markdown. Aquí tienes algunos ejemplos de Markdown:

• *Italic*
• **Bold**
• # Title
• [Link text](Link URL)

• ![](Image URL)

• Tablas:

  Header 1 | Header 2
  -------- | --------
  Cell 1   | Cell 2
  

Tipo de respuesta de información

El tipo de respuesta de información es una tarjeta con un título sencillo en la que los usuarios pueden hacer clic o tocar.

En la siguiente tabla se describen los campos:

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:

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 en la que los usuarios pueden hacer clic o tocar. El tipo de respuesta admite un chip de referencia que permite añadir la fuente de la imagen como un enlace de ancla junto con un texto descriptivo breve y un icono.

En la siguiente tabla se describen los campos:

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:

Tipo de respuesta de vídeo

El tipo de respuesta de vídeo renderiza un elemento de vídeo que puede ser un vídeo directo de una URL, que se reproduce directamente en el mensajero, o un enlace a un vídeo.

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:

Tipo de respuesta del botón

El tipo de respuesta de botón es un botón pequeño con un icono en el que los usuarios pueden hacer clic o tocar.

En la siguiente tabla se describen los campos:

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:

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 una matriz de tipos de respuesta list y divider. En la siguiente tabla se describe el tipo list:

En la siguiente tabla se describe el tipo divider:

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:

Tipo de respuesta de acordeón

El tipo de respuesta de acordeón es una tarjeta pequeña en la que un usuario puede hacer clic o tocar para ampliarla y ver más texto.

En la siguiente tabla se describen los campos:

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 del chip de sugerencia

El tipo de respuesta de chip de sugerencia proporciona al usuario final una lista de chips de sugerencia en los que puede hacer clic.

En la siguiente tabla se describen los campos:

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:

Tipo de respuesta de citas

El tipo de respuesta de citas proporciona al usuario final una lista de enlaces de citas en los que se puede hacer clic.

En la siguiente tabla se describen los campos:

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:

Tipo de respuesta de archivos

El tipo de respuesta de archivos muestra una lista de elementos de archivo que contienen un enlace descargable.

En la siguiente tabla se describen los campos:

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:

Tipo de respuesta HTML

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

En la siguiente tabla se describen los campos:

Etiquetas HTML admitidas:

• a: elemento de anclaje (se usa para crear hiperenlaces)
• b: elemento de negrita (se usa para poner texto en negrita)
• 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 subtítulos de tercer nivel)
• 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 en una tabla)
• thead: elemento de encabezado de tabla (se usa para crear un encabezado en una tabla).
• th: datos del encabezado de la tabla o elemento de celda (se usa para crear celdas en una fila de encabezado de tabla).
• tbody: elemento del cuerpo de la tabla (se usa para crear un cuerpo en una tabla)
• td: datos de tabla o elemento de celda (se usa para crear celdas en una fila de una 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 en una lista)
• img: elemento de imagen (se usa para mostrar una imagen; consulta también la url-allowlist personalización de HTML).
• div: elemento de contenedor
• span: elemento de contenedor insertado

Por ejemplo:

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

Aplicar estilos a HTML y Markdown

En el caso de los elementos de anclaje (elemento a de HTML y enlace de Markdown), se pueden proporcionar las siguientes variables de CSS:

En el caso de los elementos de tabla (elemento table de HTML y tablas de Markdown), se pueden proporcionar las siguientes variables de CSS:

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:

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

En su sitio web, el elemento personalizado debe registrarse con el nombre exacto del campo name de la respuesta. El campo payload se transfiere 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.

A partir de 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);
})();

Combinar tipos de respuesta

Los elementos de mensaje enriquecido individuales de Dialogflow CX Messenger se pueden usar para crear una tarjeta personalizada que se adapte a tus necesidades.

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

{
  "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:

Contenido enriquecido de una herramienta de guía

Puedes usar las herramientas de manual de procedimientos 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

Salida de la herramienta:

properties:
  status:
    type: string
  reason:
    type: string
type: object

Paso 2: Indica a tu agente cómo usar esta herramienta

Indica a tu agente cómo usar la herramienta con instrucciones y ejemplos.

Por ejemplo, añade 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 flujo.

Paso 3: Define el JavaScript

En el código de la página que aloja df-messenger, debe crear código JavaScript que defina una función que indique a df-messenger que renderice el contenido enriquecido. También debes registrar esa función en df-messenger para que sepa que tiene que ejecutarla cuando el agente virtual la necesite.

Asegúrate de que la variable dfMessenger se ha declarado y apunta a tu instancia de df-messenger.

Aquí tienes un ejemplo de código que puedes usar para ello:

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);