Dialogflow CX Messenger JavaScript

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

renderCustomText

This function renders a text message, as if it came from the agent or was user entered.

Arguments:

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

Returns:

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

Arguments:

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

Returns:

• 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 CX API and waits for the response. This simulates an end-user input that is normally provided to the agent dialog. The system handles the response like any end-user query.

Arguments:

• string: text query

Returns:

• 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 CX API and waits for the response.

Arguments:

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

Returns:

• 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 CX API detectIntent request. Other Dialogflow CX Messenger methods can replace respective default values in the query parameters.

Arguments:

• object: JSON data. For schema of query parameters, see QueryParameters.

Returns:

• 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 from the end-user to Dialogflow CX. This information persists for the remainder of the session.

Arguments:

• object: JSON data, see generative personalization documentation

Returns:

• 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. By default, it preserves the user's authentication status. You can use the optional args to customize this behavior.

Arguments:

Returns:

• void

For example:

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

clearAuthentication

This function clears the authentication of the agent dialog.

Arguments:

• none

Returns:

• void

For example:

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

startNewSession

This function starts a new session inside the agent dialog. By default, it clears the message history but preserves the user's authentication status. Customize this behavior by using the optional args parameter.

Arguments:

Returns:

• void

For example:

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

openChat

Call this function on the df-messenger-chat-bubble element to open the chat. It doesn't do anything if the chat is already open.

Arguments:

• none

Returns:

• 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

Returns:

• void

For example:

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

openMinChat

You can open the chat window in a minimized version by calling this function on the df-messenger-chat-bubble element. This function does nothing if the chat is already minimized.

Arguments:

Example:

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

closeMinChat

Call this function on the df-messenger-chat-bubble element to close the minimized chat. It doesn't do anything if the chat is already closed.

Example:

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