JavaScript de Dialogflow CX Messenger

Dialogflow CX Messenger proporciona functions a las que puedes llamar para modificar su comportamiento.

renderCustomText

Esta función procesa un mensaje de texto simple, como si viniera del agente como respuesta de texto simple o lo hubiera ingresado el usuario final.

Argumentos:

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

Devolución:

  • void

Por ejemplo:

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

renderCustomCard

Esta función renderiza una tarjeta personalizada, como si viniera de entrega de Dialogflow.

Argumentos:

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

Devolución:

  • 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 y espera la respuesta. Esto simula de manera eficaz una entrada del usuario final que, por lo general, se proporciona al diálogo del agente. La respuesta se controlará como lo haría cualquier consulta de usuario final.

Argumentos:

  • string: Búsqueda de texto

Devolución:

  • 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 y espera la respuesta.

Argumentos:

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

Devolución:

  • 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. Otros métodos de Messenger de Dialogflow CX pueden reemplazar los valores predeterminados correspondientes en los parámetros de consulta.

Argumentos:

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

Devolución:

  • 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 sobre el usuario final a Dialogflow. Esta información persistirá durante el resto de la sesión.

Argumentos:

  • object: Datos JSON. Consulta la documentación de personalización generativa.

Devolución:

  • 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.

Argumentos:

  • ninguno

Devolución:

  • 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

Devolución:

  • 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. Puede conservar o restablecer el historial de mensajes actual. No borra la autenticación de los usuarios.

Argumentos:

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

Devolución:

  • void

Por ejemplo:

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

openChat

Esta función abre el chat. Llámala en el elemento df-messenger-chat-bubble para abrir el chat. No hace nada si el chat ya está abierto.

Argumentos:

  • ninguno

Devolución:

  • void

Por ejemplo:

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

closeChat

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

Argumentos:

  • ninguno

Devolución:

  • void

Por ejemplo:

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

openMinChat

Chat minimizado de Dialogflow CX Messenger

Esta función abre la ventana de chat en una versión minimizada. Llámala en el elemento df-messenger-chat-bubble para abrir el chat minimizado. No hace nada si el chat ya está minimizado.

Argumentos:

Nombre Tipo Descripción
args objeto? Argumento opcional para configurar el chat minimizado
args.anchor cadena? anchor opcional para configurar dónde se abre el chat minimizado. Tiene la misma lógica que el atributo anchor en el elemento de la burbuja de chat. La configuración predeterminada es left-top.
args.showActorImages booleano? Marca opcional para mostrar imágenes de 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

Cierra el chat minimizado. Llámala 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();