Dialogflow 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 messageboolean
: 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, supportsquery
(see alsosendQuery
above) andevent
(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 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:
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
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();