JavaScript de Dialogflow CX Messenger

Dialogflow CX Messenger proporciona funciones a las que puedes llamar para afectar su comportamiento.

renderCustomText

Esta función renderiza un mensaje de texto, como si proviniera del agente o lo hubiera ingresado el usuario.

Argumentos:

  • string: mensaje de texto
  • boolean: Es verdadero para un mensaje del agente y falso para el usuario final.

Se muestra lo siguiente:

  • void

Por ejemplo:

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

renderCustomCard

Esta función renderiza una tarjeta personalizada como si proviniera del webhook de Dialogflow CX.

Argumentos:

  • payload: Es una lista de respuestas de carga útil personalizada, que se definen en la sección Cumplimiento.

Se muestra lo siguiente:

  • void

Por ejemplo:

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

sendQuery

Esta función envía una consulta a la API de Dialogflow CX y espera la respuesta. Esto simula una entrada del usuario final que, por lo general, se proporciona al diálogo del agente. El sistema controla la respuesta como cualquier consulta de un usuario final.

Argumentos:

  • string: consulta de texto

Se muestra lo siguiente:

  • Promise<void>: Es el valor que se muestra para la operación asíncrona.

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

Esta función envía una solicitud a la API de Dialogflow CX y espera la respuesta.

Argumentos:

  • string: Es el tipo de solicitud, admite query (consulta también sendQuery anterior) y event (consulta evento personalizado).
  • any: Es la carga útil que corresponde al tipo de solicitud, que es una cadena para ambos tipos de solicitudes admitidos.

Se muestra lo siguiente:

  • Promise<void>: Es el valor que se muestra para la operación asíncrona.

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

Esta función establece valores predeterminados para el campo queryParams de la solicitud detectIntent de la API de Dialogflow CX. Otros métodos de Dialogflow CX Messenger pueden reemplazar los valores predeterminados respectivos en los parámetros de consulta.

Argumentos:

  • object: Datos JSON. Para ver el esquema de los parámetros de consulta, consulta QueryParameters.

Se muestra lo siguiente:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

Esta función envía información de personalización generativa del usuario final a Dialogflow CX. Esta información se conserva durante el resto de la sesión.

Argumentos:

  • object: Datos JSON, consulta la documentación de personalización generativa

Se muestra lo siguiente:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

Esta función borra el almacenamiento persistente del diálogo del agente. También borra el estado actual del diálogo del agente. De forma predeterminada, conserva el estado de autenticación del usuario. Puedes usar el args opcional para personalizar este comportamiento.

Argumentos:

Nombre Tipo Descripción
args object? Es un argumento opcional para configurar la operación de borrar el almacenamiento.
args.clearAuthentication boolean? Es una marca opcional para borrar el estado de autenticación. Si se establece en verdadero, se borrará el estado de autenticación; de lo contrario, se conservará.

Se muestra lo siguiente:

  • void

Por ejemplo:

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

clearAuthentication

Esta función borra la autenticación del diálogo del agente.

Argumentos:

  • ninguno

Se muestra lo siguiente:

  • void

Por ejemplo:

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

startNewSession

Esta función inicia una sesión nueva dentro del diálogo del agente. De forma predeterminada, borra el historial de mensajes, pero conserva el estado de autenticación del usuario. Personaliza este comportamiento con el parámetro opcional args.

Argumentos:

Nombre Tipo Descripción
args object? Es un argumento opcional para configurar la creación de la sesión nueva.
args.retainHistory boolean? Marca opcional para conservar el historial. Si se establece como verdadero, se conservará el historial; de lo contrario, se borrará.
args.clearAuthentication boolean? Es una marca opcional para borrar el estado de autenticación. Si se establece en verdadero, se borrará el estado de autenticación; de lo contrario, se conservará.

Se muestra lo siguiente:

  • void

Por ejemplo:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

Llama a esta función en el elemento df-messenger-chat-bubble para abrir el chat. No hace nada si el chat ya está abierto.

Argumentos:

  • ninguno

Se muestra lo siguiente:

  • void

Por ejemplo:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

Esta función cierra el chat. Llámalo en el elemento df-messenger-chat-bubble para cerrar el chat. No hace nada si el chat ya está cerrado.

Argumentos:

  • ninguno

Se muestra lo siguiente:

  • void

Por ejemplo:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Chat minimizado de Dialogflow CX Messenger

Puedes abrir la ventana de chat en una versión minimizada llamando a esta función en el elemento df-messenger-chat-bubble. Esta función no hace nada si el chat ya está minimizado.

Argumentos:

Nombre Tipo Descripción
args object? Es un argumento opcional para configurar el chat minimizado.
args.anchor string? anchor opcional para configurar dónde se abre el chat minimizado. Se aplica la misma lógica que con el atributo anchor en el elemento de burbuja de chat. La configuración predeterminada es left-top.
args.showActorImages boolean? Es una marca opcional para mostrar imágenes de los actores (si se especifica en el elemento df-messenger-chat-bubble). La configuración predeterminada es "false".

Ejemplo:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

Llama a esta función en el elemento df-messenger-chat-bubble para cerrar el chat minimizado. No hace nada si el chat ya está cerrado.

Ejemplo:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();