JavaScript de Dialogflow CX Messenger

Dialogflow CX Messenger proporciona funciones que puedes llamar para influir en su comportamiento.

renderCustomText

Esta función muestra un mensaje de texto sencillo, como si lo hubiera enviado el agente como respuesta de texto simple o como si lo hubiera introducido el usuario final.

Argumentos:

• string: mensaje de texto
• boolean: true si el mensaje procede de un agente; false si procede de un 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 procediera de Dialogflow fulfillment.

Argumentos:

• payload: 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. De esta forma, se simula una entrada de usuario final que normalmente se proporciona al cuadro de diálogo del agente. La respuesta se gestionará como si fuera la consulta de un usuario final.

Argumentos:

• string: consulta de texto

Devolución:

• Promise<void>: valor devuelto de 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: tipo de solicitud, admite query (consulta también sendQuery más arriba) y event (consulta evento personalizado)
• any: carga útil que corresponde al tipo de solicitud, que actualmente es una cadena para ambos tipos de solicitud admitidos.

Devolución:

• Promise<void>: valor devuelto de la operación asíncrona

Por ejemplo:

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

setQueryParameters

Esta función asigna valores predeterminados al campo queryParams de la solicitud detectIntent de la API de Dialogflow. Otros métodos de Dialogflow CX Messenger pueden sustituir los valores predeterminados correspondientes en los parámetros de consulta.

Argumentos:

• object: datos JSON. Para ver 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 se conservará durante el resto de la sesión.

Argumentos:

• object: datos JSON. Consulta la documentación sobre 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 cuadro de diálogo del agente. También borra el estado actual del cuadro de diálogo del agente. De forma predeterminada, conserva el estado de autenticación del usuario. Usa el args opcional para personalizar este comportamiento.

Argumentos:

Devolución:

• void

Por ejemplo:

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

clearAuthentication

Esta función borra la autenticación del cuadro de 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 nueva sesión en el cuadro de diálogo del agente. De forma predeterminada, borra el historial de mensajes, pero conserva el estado de autenticación del usuario. Usa el args opcional para personalizar este comportamiento.

Argumentos:

Devolución:

• void

Por ejemplo:

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

openChat

Esta función abre el chat. Llama a df-messenger-chat-bubble en el elemento 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. Llama al 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

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

Argumentos:

Ejemplo:

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

closeMinChat

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

Ejemplo:

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