Dialogflow CX Messenger JavaScript

Dialogflow CX Messenger provides functions you can call to affect its behavior.

renderCustomText

This function renders a simple text message, as if it came from the agent as simple text response or it was entered by the end-user.

Arguments:

  • string: text message
  • boolean: true for a message from agent, false from end-user

Return:

  • void

For example:

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

renderCustomCard

This function renders a custom card, as if it came from Dialogflow fulfillment.

Arguments:

  • payload: a list of custom payload responses, which are defined in the Fulfillment section.

Return:

  • void

For example:

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

This function sends a query to the Dialogflow API and waits for the response. This effectively simulates an end-user input that is normally provided to the agent dialog. The response will be handled as any end-user's query would.

Arguments:

  • string: text query

Return:

  • Promise<void>: return value for the asynchronous operation

For example:

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

sendRequest

This function sends a request to the Dialogflow API and waits for the response.

Arguments:

  • string: request type, supports query (see also sendQuery above) and event (see custom event)
  • any: payload that corresponds to the request type, which is currently a string for both supported request types

Return:

  • Promise<void>: return value for the asynchronous operation

For example:

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

setQueryParameters

This function sets default values for the queryParams field of the Dialogflow API detectIntent request. Other Dialogflow CX Messenger methods may replace respective default values in the query parameters.

Arguments:

Return:

  • void

For example:

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

setContext

This function sends generative personalization information about to the end-user to Dialogflow. This information will persist for the remainder of the session.

Arguments:

  • object: JSON data, see generative personalization documentation

Return:

  • void

For example:

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

This function clears the persistent storage of the agent dialog. It also clears the current state of the agent dialog.

Arguments:

  • none

Return:

  • void

For example:

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

clearAuthentication

This function clears the authentication of the agent dialog.

Arguments:

  • none

Return:

  • void

For example:

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

startNewSession

This function starts a new session inside the agent dialog. It can either keep or reset the current message history. It does not clear the users authentication.

Arguments:

Name Type Description
args object? Optional argument to configure the new session creation.
args.retainHistory boolean? Optional flag to retain history. If set to true the history will be kept, otherwise it will be erased.

Return:

  • void

For example:

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

openChat

This function opens the chat. Call it on the df-messenger-chat-bubble element to open the chat. Does nothing if the chat is already open.

Arguments:

  • none

Return:

  • void

For example

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

closeChat

This function closes the chat. Call it on the df-messenger-chat-bubble element to close the chat. Does nothing if the chat is already closed.

Arguments:

  • none

Return:

  • void

For example

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

openMinChat

Dialogflow CX Messenger minimized chat

This function opens the chat window in a minimized version. Call it on the df-messenger-chat-bubble element to open the minimized chat. Does nothing if the chat is already minimized.

Arguments:

Name Type Description
args object? Optional argument to configure the minimized chat
args.anchor string? Optional anchor to configure where the minimized chat is being opened. Same logic as the anchor attribute on the chat bubble element. Defaults to left-top.
args.showActorImages boolean? Optional flag to show actor images (if specified on the df-messenger-chat-bubble element). Defaults to false.

Example:

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

closeMinChat

Closes the minimized chat. Call it on the df-messenger-chat-bubble element to close the minimized chat. Does nothing if the chat is already closed.

Example:

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