Versión antigua de Dialogflow CX Messenger

La integración antigua de Dialogflow CX Messenger ofrece un cuadro de diálogo de chat personalizable para el agente que puedes insertar en tu sitio web. El cuadro de diálogo de chat se implementa como una ventana de diálogo que el usuario final puede abrir y cerrar. Cuando se abre, el cuadro de diálogo del chat aparece encima del contenido, en la parte inferior derecha de la pantalla.

Migrar a la versión más reciente de Dialogflow CX Messenger

La versión más reciente de Dialogflow CX Messenger ofrece autenticación para controlar el acceso a las consultas del agente y más opciones de configuración de la interfaz de usuario. Recomendamos que todos los usuarios de la versión antigua migren a la nueva.

Si habilitaste la integración de Dialogflow CX Messenger antes del 29 de agosto del 2023, es posible que estés usando la versión antigua. Para determinar si estás usando la versión antigua, examina el código HTML de Messenger insertado en tu sitio web. Si ves la siguiente secuencia de comandos, significa que estás usando la versión antigua:

https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1

Para migrar a la nueva versión, sigue estos pasos:

  1. Elimina todo el código de mensajería HTML, CSS y JavaScript de tu sitio web.
  2. Sigue las instrucciones para la integración más reciente de Messenger con Dialogflow CX.

Personalizaciones de HTML

Puedes personalizar varios aspectos de cómo aparece y se comporta el cuadro de diálogo de chat. El elemento HTML df-messenger tiene los siguientes atributos:

Atributo Política de entrada Valor
agent-id Obligatorio ID del agente asociado al agente. Este campo se rellena automáticamente con el ID de tu agente.
chat-icon Opcional Icono que se usa para el botón de abrir el cuadro de diálogo de chat. El icono de Conversational Agents (Dialogflow CX) es el predeterminado. Este campo debe ser una URL pública. El tamaño del icono debe ser de 36x36 px.
chat-title Obligatorio Título que se muestra en la parte superior del cuadro de diálogo de chat. Este campo se rellena automáticamente con el nombre de tu agente.
df-cx Obligatorio Indica que la interacción es con un agente de experiencia del cliente. Usa "true" como valor.
expand Opcional Atributo booleano que define que el cuadro de diálogo de chat se abra cuando se cargue la página. De forma predeterminada, el cuadro de diálogo de chat se cierra cuando se carga la página.
intent Opcional Un evento personalizado que se invocará cuando se abra el cuadro de diálogo de chat. Puedes usar un controlador de eventos que se llame para este evento y que genere el primer mensaje del agente.
language-code Obligatorio Código de idioma predeterminado del primer intent. Este campo se rellena automáticamente con el idioma predeterminado del agente.
location Obligatorio La región del agente.
session-id Opcional Un ID de sesión. Si no se proporciona, la integración generará un ID único para cada cuadro de diálogo de chat.
user-id Opcional Se puede usar para hacer un seguimiento de un usuario en diferentes sesiones. Puede enviar el valor a Conversational Agents (Dialogflow CX) a través del campo queryParams.payload.userId en una solicitud de detección de intención, y Conversational Agents (Dialogflow CX) le proporciona este valor a través del campo WebhookRequest.payload.userId.
wait-open Opcional Atributo booleano que retrasa el evento personalizado definido en el atributo intent hasta que se abre el cuadro de diálogo.

Personalizaciones de CSS

Puedes personalizar el estilo del cuadro de diálogo de chat configurando variables de CSS.

Se pueden proporcionar las siguientes variables de CSS:

Variable de CSS Propiedad afectada
df-messenger-bot-message Color de fondo de la burbuja de los mensajes del agente.
df-messenger-button-titlebar-color Color del botón flotante y de la barra de título del cuadro de diálogo de chat.
df-messenger-button-titlebar-font-color Color de la fuente del título de la barra de título.
df-messenger-chat-background-color Color del fondo del cuadro de diálogo de chat.
df-messenger-font-color Color de fuente de los mensajes.
df-messenger-input-box-color Color de fondo del cuadro de entrada de texto.
df-messenger-input-font-color Color de la fuente del cuadro de entrada de texto.
df-messenger-input-placeholder-font-color Color de la fuente del texto de marcador de posición en el cuadro de entrada de texto.
df-messenger-minimized-chat-close-icon-color Color del icono de cerrar en la vista de chat cerrado.
df-messenger-send-icon Color del icono de enviar en el cuadro de entrada de texto.
df-messenger-user-message Color de fondo de la burbuja de los mensajes de los usuarios.

Ejemplo de código:

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

La configuración anterior dará como resultado lo siguiente:

Captura de pantalla de Messenger

Eventos de JavaScript

Dialogflow Messenger activa varios eventos para los que puedes crear listeners de eventos.

El destino del evento de estos eventos es el elemento df-messenger.

Para añadir un procesador de eventos al elemento df-messenger, añade el siguiente código JavaScript, donde event-type es uno de los nombres de evento que se describen más abajo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

Se admiten los siguientes tipos de eventos:

df-accordion-clicked

Este evento se produce cuando un usuario hace clic en un elemento de acordeón. La estructura del evento es la siguiente:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

df-button-clicked

Este evento se produce cuando un usuario hace clic en un elemento de botón. La estructura del evento es la siguiente:

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

df-chip-clicked

Este evento se produce cuando un usuario selecciona un chip de sugerencia. La estructura del evento es la siguiente:

query: string // Text of the suggestion chip that was selected.

df-info-card-clicked

Este evento se produce cuando el usuario final hace clic en el elemento de información de la barra de título. La estructura del evento es la siguiente:

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

df-list-element-clicked

Este evento se produce cuando un usuario hace clic en un elemento de una lista. La estructura del evento es la siguiente:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string
  },
  payload: {}
}

df-messenger-error

Este evento se produce cuando la API de Dialogflow envía un código de estado de error. La estructura del evento es la siguiente:

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

df-messenger-loaded

Este evento se activa cuando el elemento df-messenger se ha cargado e inicializado por completo.

df-request-sent

Este evento se produce cuando se hace una solicitud a la API de Dialogflow. Este evento, junto con df-response-received, se puede usar para monitorizar la latencia de las solicitudes. La estructura del evento es la siguiente:

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

df-response-received

Este evento se produce cuando se recibe una respuesta de la API de Dialogflow. La estructura del evento es la siguiente:

response: detectIntentResponse

df-user-input-entered

Este evento se produce cuando el usuario final introduce una consulta. La estructura del evento es la siguiente:

input: string // Text entered by user

Funciones JavaScript

El elemento df-messenger proporciona funciones a las que puedes llamar para influir en su comportamiento.

renderCustomText

Esta función renderiza un mensaje de texto simple, como si procediera de Conversational Agents (Dialogflow CX) como respuesta de texto simple.

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');

renderCustomCard

Esta función renderiza una tarjeta personalizada como si procediera del fulfillment de Conversational Agents (Dialogflow CX). El formato de la respuesta de la carga útil personalizada se define en la sección Fulfillment.

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
dfMessenger.renderCustomCard(payload);

showMinChat

Esta función muestra una versión mínima de las listas de mensajes.

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();

Fulfillment

Cuando crees un cumplimiento, podrás crear respuestas de texto y cargas útiles personalizadas. Las respuestas de texto se usan para las respuestas básicas 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.

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.

Captura de pantalla de Messenger

En la siguiente tabla se describen los campos:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "info"
title cadena Título de la tarjeta
subtitle cadena Subtítulo de la tarjeta
image objeto Imagen
image.src objeto Fuente de la imagen
image.src.rawUrl cadena URL pública de la imagen
actionLink cadena URL que se sigue cuando se hace clic en la tarjeta.

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "actionLink": "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.

Captura de pantalla de Messenger

En la siguiente tabla se describen los campos:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "description"
title cadena Título de la tarjeta
text array<string> Matriz de cadenas, donde cada cadena se representa 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 en la que los usuarios pueden hacer clic o tocar.

Captura de pantalla de Messenger

En la siguiente tabla se describen los campos:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "image"
rawUrl cadena URL pública de la imagen
accessibilityText cadena Texto alternativo de la imagen

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

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.

Captura de pantalla de Messenger

En la siguiente tabla se describen los campos:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "button"
icon objeto Icono del botón
icon.type cadena Icono de la biblioteca de iconos de Material. El icono predeterminado es una flecha
icon.color cadena Código hexadecimal de color
text cadena Texto del botón
link cadena URL que se seguirá cuando se haga clic en el botón
event objeto Evento de agentes conversacionales (Dialogflow CX) que se activa cuando se hace clic en el botón.

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": ""
        }
      }
    ]
  ]
}

Tipo de respuesta de lista

El tipo de respuesta de lista es una tarjeta con varias opciones que los usuarios pueden seleccionar.

Captura de pantalla de Messenger

La respuesta contiene una matriz de tipos de respuesta list y divider. En la siguiente tabla se describe el tipo list:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "list"
title cadena Título de la opción
subtitle cadena Subtítulo de la opción
event objeto Evento de agentes conversacionales (Dialogflow CX) que se activa cuando se hace clic en la opción.

En la siguiente tabla se describe el tipo divider:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "divider"

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "name": ""
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": ""
        }
      }
    ]
  ]
}

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.

Captura de pantalla de Messenger

En la siguiente tabla se describen los campos:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "acordeón"
title cadena Título del acordeón
subtitle cadena Subtítulo del acordeón
image objeto Imagen
image.src objeto Fuente de la imagen
image.src.rawUrl cadena URL pública de la imagen
text cadena Texto del acordeón

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "src": {
            "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.

Captura de pantalla de Messenger

En la siguiente tabla se describen los campos:

Nombre Tipo Descripción
type cadena Tipo de respuesta: "chips"
options array<object> Matriz de objetos Option
options[].text cadena Texto de la opción
options[].image objeto Imagen de la opción
options[].image.src objeto Origen de la imagen de la opción
options[].image.src.rawUrl cadena Opción de URL pública de la imagen
options[].link cadena Enlace de opción

Por ejemplo:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "text": "Chip 1",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          },
          {
            "text": "Chip 2",
            "image": {
              "src": {
                "rawUrl": "https://example.com/images/logo.png"
              }
            },
            "link": "https://example.com"
          }
        ]
      }
    ]
  ]
}

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 en el que se usan algunos de los elementos mencionados anteriormente:

Captura de pantalla de Messenger

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Conversational Agents (Dialogflow CX) across platforms"
      },
      {
        "type": "info",
        "title": "Conversational Agents (Dialogflow CX)",
        "subtitle": "Build natural and rich conversational experiences",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

Depuración

Para probar tu agente de forma local con Dialogflow CX Messenger, sigue estos pasos:

  • Inserta el elemento Messenger de Dialogflow CX en una página tal como se describe en la sección Personalizaciones de HTML.
  • Inicia un servidor HTTP local para esa página con un puerto específico.
  • Accede a esa página en http://localhost:port_number.