Dialogflow Messenger

La integración de Dialogflow 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.

Captura de pantalla de Messenger

Limitaciones

Configuración y prueba

Para configurar y habilitar Dialogflow Messenger, sigue estos pasos:

  1. Ve a la consola de Dialogflow ES.
  2. En el menú de la barra lateral de la izquierda, haz clic en Integraciones.
  3. Haz clic en Dialogflow Messenger.
  4. Se abrirá un cuadro de diálogo de configuración.
  5. Elige un entorno.
  6. Haz clic en Enable (Habilitar).
  7. Copia el código de inserción para pegarlo en tu sitio web.
  8. Haz clic en Probar ahora para probar tu agente.
  9. En la esquina inferior derecha de la ventana, aparece un botón con el logotipo de Dialogflow. Haz clic en este botón.
  10. Se abrirá un cuadro de diálogo de chat con el que podrás interactuar.
  11. Cierra el cuadro de diálogo del chat cuando hayas terminado de hacer pruebas.
  12. En el cuadro de diálogo de configuración, haz clic en Cerrar.

Integrar

Pegue el código de inserción que ha copiado arriba en una página web de su sitio web. Los elementos HTML <script> y <df-messenger> deben estar en el elemento <body> de tu página. Para permitir diseños adaptables, añade lo siguiente a tu página:

<meta name="viewport" content="width=device-width, initial-scale=1">

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 de agente asociado al agente de Dialogflow. 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 Dialogflow 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.
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 El evento que se usa para activar la primera intención cuando se abre el cuadro de diálogo de chat. Este campo se rellena automáticamente con el evento WELCOME.
language-code Obligatorio Código de idioma predeterminado del primer intent. Este campo se rellena automáticamente con el idioma predeterminado 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 Dialogflow a través del campo queryParams.payload.userId en una solicitud de detección de intención.
wait-open Opcional Atributo booleano que retrasa el evento de bienvenida 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,
    parameters: {},
    languageCode: 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 sencillo, como si procediera de Dialogflow como respuesta de texto sencilla.

Por ejemplo:

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

renderCustomCard

Esta función renderiza una tarjeta personalizada, como si procediera de Dialogflow como mensaje de respuesta enriquecida. El formato de la respuesta de la carga útil personalizada se define en la sección Mensajes de respuesta enriquecida.

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

Mensajes de respuesta enriquecidos

Cuando crees mensajes de respuesta enriquecida, puedes crear respuestas de texto y cargas útiles personalizadas en la pestaña de respuesta Predeterminada de la intención. 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 Dialogflow que se activa cuando se hace clic en el botón. Consulta la referencia de REST EventInput.

Por ejemplo:

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

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 Dialogflow que se activa cuando se hace clic en la opción. Consulta la referencia de REST EventInput.

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": "",
          "languageCode": "",
          "parameters": {}
        }
      },
      {
        "type": "divider"
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "name": "",
          "languageCode": "",
          "parameters": {}
        }
      }
    ]
  ]
}

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 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": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "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 con Dialogflow Messenger de forma local, sigue estos pasos:

  • Inserta el elemento Dialogflow Messenger en una página como se ha descrito anteriormente.
  • Inicia un servidor HTTP local para esa página con un puerto específico.
  • Accede a esa página en http://localhost:port_number.