Dialogflow Messenger

La integración de Dialogflow Messenger proporciona un cuadro de diálogo de chat personalizable para tu agente que se puede insertar en un sitio web. El cuadro de chat se implementa como una ventana de diálogo que el usuario final puede abrir y cerrar. Cuando se abre, el cuadro de chat aparece sobre el 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. Haz clic en Integrations, en el menú de la barra lateral izquierda.
  3. Haz clic en Dialogflow Messenger.
  4. Se abrirá un cuadro de diálogo de configuración.
  5. Selecciona un entorno.
  6. Haz clic en 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 chat cuando hayas terminado la prueba.
  12. Haz clic en Cerrar en el cuadro de diálogo de configuración.

Inserción

Pega el código de inserción que copiaste antes en una página web de tu sitio web. Los elementos HTML <script> y <df-messenger> deben estar en el elemento <body> de la página. Para generar diseños con capacidad de respuesta, agrega lo siguiente a tu página:

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

Personalizaciones de HTML

Puedes personalizar varios aspectos sobre 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 El ID del agente asociado con el agente de Dialogflow. Se propaga antes con el ID de tu agente.
chat-icon Opcional El ícono que se usa en el botón para abrir el cuadro de diálogo de chat. El ícono de Dialogflow es el predeterminado. Este campo debe ser una URL pública. El tamaño del ícono debe ser de 36 píxeles por 36 píxeles.
chat-title Obligatorio El título que se muestra en la parte superior del cuadro de diálogo de chat. Se propaga antes con el nombre de tu agente.
expand Opcional Atributo booleano que configura el cuadro de diálogo de chat para que se abra cuando se cargue la página. De forma predeterminada, el cuadro de chat se cierra cuando se carga la página.
intent Opcional El evento que se usa para activar el primer intent cuando se abre el cuadro de diálogo de chat. Se propaga antes con el evento WELCOME.
language-code Obligatorio Código de idioma predeterminado para el primer intent. Se propaga antes 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 realizar un seguimiento de un usuario en todas las sesiones. Puedes pasar el valor a Dialogflow a través del campo queryParams.payload.userId en una solicitud de intent de detección.
wait-open Opcional Atributo booleano que retrasa el evento de bienvenida hasta que se abre el cuadro de diálogo de chat.

Personalizaciones de CSS

Puedes personalizar el estilo de tu cuadro de chat si estableces las variables de CSS.

Se pueden proporcionar las siguientes variables de CSS:

Variable de CSS Propiedad afectada
df-messenger-bot-message El color de fondo de la burbuja para los mensajes del agente
df-messenger-button-titlebar-color El color del botón flotante y de la barra de título del cuadro de chat
df-messenger-button-titlebar-font-color El color de fuente del título en la barra de título
df-messenger-chat-background-color El color de fondo del cuadro de chat
df-messenger-font-color El color de fuente para los mensajes
df-messenger-input-box-color El color de fondo de la casilla de entrada de texto
df-messenger-input-font-color El color de fuente para la casilla de entrada de texto
df-messenger-input-placeholder-font-color El color de fuente para el texto del marcador de posición en la casilla de entrada de texto
df-messenger-minimized-chat-close-icon-color El color del ícono de cierre en la vista del chat cerrado
df-messenger-send-icon El color del ícono de envío en la casilla de entrada de texto
df-messenger-user-message El color de fondo de la burbuja para los mensajes del usuario

Código de ejemplo:

<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 tendrá como resultado lo siguiente:

Captura de pantalla de Messenger

Eventos de JavaScript

Dialogflow Messenger activa una variedad de eventos que puedes crear. objetos de escucha de eventos .

El objetivo de evento para estos eventos es el elemento df-messenger.

Si deseas agregar un objeto de escucha de eventos al elemento df-messenger, agrega el siguiente código JavaScript, en el que event-type es uno de los nombres de eventos que se describen a continuación:

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 ocurre cuando un usuario hace clic en un elemento de acordeón. La estructura del evento tiene el siguiente aspecto:

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

df-button-clicked

Este evento ocurre cuando un usuario hace clic en un elemento de botón. La estructura del evento tiene el siguiente aspecto:

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

df-chip-clicked

Este evento ocurre cuando un usuario selecciona un chip de sugerencias. La estructura del evento tiene el siguiente aspecto:

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

df-info-card-clicked

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

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

df-list-element-clicked

Este evento ocurre cuando un usuario hace clic en un elemento de lista. La estructura del evento tiene el siguiente aspecto:

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

df-messenger-error

Este evento ocurre cuando la API de Dialogflow envía un código de estado de error. La estructura del evento tiene el siguiente aspecto:

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

df-messenger-loaded

Este evento se activa cuando el elemento df-messenger está cargado por completo y ya inicializado.

df-request-sent

Este evento ocurre cuando se realiza una solicitud a la API de Dialogflow. Este evento, junto con df-response-received, se puede usar para supervisar la latencia de la solicitud. La estructura del evento tiene el siguiente aspecto:

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

df-response-received

Este evento ocurre cuando se recibe una respuesta de la API de Dialogflow. La estructura del evento tiene el siguiente aspecto:

response: detectIntentResponse

df-user-input-entered

Este evento ocurre cuando el usuario final ingresa una consulta. La estructura del evento tiene el siguiente aspecto:

input: string // Text entered by user

Funciones de JavaScript

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

renderCustomText

Esta función procesa un mensaje de texto simple, como si viniera de Dialogflow como respuesta de texto simple.

Por ejemplo:

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

renderCustomCard

Esta función procesa una tarjeta personalizada, como si viniera de Dialogflow como un mensaje de respuesta enriquecida. El formato de la respuesta de 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 enriquecida

Cuando creas mensajes de respuesta enriquecida, puedes crear respuestas de texto y cargas útiles personalizadas desde la pestaña de respuesta predeterminada del intent. 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 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.

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.

Captura de pantalla de Messenger

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 objeto Imagen
image.src objeto Origen de la imagen
image.src.rawUrl string La URL pública de la imagen
actionLink string URL que se seguirá cuando se haga 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 string Tipo de respuesta: “descripción”
title string Título de la tarjeta
text arreglo<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.

Captura de pantalla de Messenger

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

Por ejemplo:

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

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.

Captura de pantalla de Messenger

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “botón”
icon objeto 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
text string Texto del botón
link string La 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 de 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 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 objeto Evento de Dialogflow que se activa cuando se hace clic en la opción. Consulta la referencia de REST de EventInput.

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": {
          "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 que los usuarios pueden tocar o hacerle clic a fin de expandir y mostrar más texto.

Captura de pantalla de Messenger

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 objeto Imagen
image.src objeto Origen de la imagen
image.src.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": {
          "src": {
            "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.

Captura de pantalla de Messenger

En la siguiente tabla, se describen los campos:

Nombre Tipo Descripción
type string Tipo de respuesta: “chips”
options arreglo<objeto> Arreglo de objetos de opciones
options[].text string 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 string La URL pública de la opción para la imagen
options[].link string El vínculo de la 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"
          }
        ]
      }
    ]
  ]
}

Tipos de respuesta combinados

Los elementos individuales de mensajes enriquecidos para Dialogflow Messenger se pueden combinar 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 antes mencionados:

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"
          }
        ]
      }
    ]
  ]
}

Realiza una depuración

Para probar tu agente con Dialogflow Messenger de forma local, haz lo siguiente:

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