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:

constdfMessenger=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:

constdfMessenger=document.querySelector('df-messenger');
constpayload=[
{
"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:

constdfMessenger=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:

constdfMessenger=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:

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

Return:

• void

For example:

constdfMessenger=document.querySelector('df-messenger');
constqueryParameters={
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:

constdfMessenger=document.querySelector('df-messenger');
constmetadata={
"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. Use the optional args to customize this behavior.

Arguments:

Return:

• void

For example:

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

clearAuthentication

This function clears the authentication of the agent dialog.

Arguments:

• none

Return:

• void

For example:

constdfMessenger=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. Use the optional args to customize this behavior.

Arguments:

Return:

• void

For example:

constdfMessenger=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

constdfMessengerBubble=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

constdfMessengerBubble=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:

Example:

constdfMessengerChatBubble=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:

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