Dialogflow CX Messenger HTML customizations

There are many HTML customizations you can apply to a chat dialog.

HTML chat element options

The child element of the df-messenger element can be either of:

  • df-messenger-chat: agent dialog is always open
  • df-messenger-chat-bubble: agent dialog can be opened or closed with an open or close bubble button

HTML customizations for df-messenger

The df-messenger HTML element has the following attributes:

Attribute Input policy Value
agent-id Required Agent ID associated with the Dialogflow agent.
allow-feedback Optional Set to all to allow end-users to provide feedback on the agent's answers.
language-code Required Default language code.
project-id Required Project ID for the agent.
location Optional The agent's region. Default value is global.
intent Optional A custom event that will be invoked when the chat dialog is opened. You can use an event handler that will be called for this event and will produce the first agent message.
oauth-client-id Optional Required for OAuth authentication. Default value is null. If the value is not provided and Dialogflow CX Messenger unauthenticated access is enabled, unauthenticated users can interact with the agent. If the value is provided, the agent dialog will be overlaid with a "Request Authentication" (text can be controlled, see request-auth-text notification, which requires the user to sign in before they can use the agent.
storage-option Optional Specifies local storage for conversation messages. Use none if messages shouldn't be stored. Using none will clear all messages when the page is refreshed or reloaded. Defaults to sessionStorage.
session-ttl Optional Set to a duration in seconds to maintain session, must be strictly below 86400 (1d) and defaults to 1800 (30min).
url-allowlist Optional Enables images being loaded from a comma separated list of URL prefixes. Image URLs used in HTML or Markdown responses must start with one of the listed prefixes. Use * to allow all URLs.
max-query-length Optional Defines the maximum length for a text query. If the value is negative, the length is unlimited. Defaults to 256. Additional documentation.

HTML customizations for df-messenger-chat

Dialogflow Messenger screenshot

The df-messenger-chat HTML element has the following attributes:

Attribute Input policy Value
chat-title Optional The title of the chat box, shown above it.
chat-subtitle Optional The subtitle of the chat box, shown above it, below the chat-title
chat-title-icon Optional The icon shown in the title of the chat box, shown above it, left of the chat-title by default
bot-writing-text Optional The text that is shown while the agent is writing
bot-writing-image Optional The image that is shown while the agent is writing. Takes priority over bot-writing-text.
request-auth-text Optional The button text in case authentication is required.
placeholder-text Optional Text to be shown in the input field while it's empty. Defaults to "Ask something…".
bot-actor-image Optional Image source to use for the agent's actor image. Will be shown on each group of agent responses.
user-actor-image Optional Image source to use for the user's actor image. Will be shown on each user message.

HTML customizations for df-messenger-chat-bubble

Dialogflow Messenger screenshot

The df-messenger-chat-bubble HTML element has the same attributes as df-messenger-chat and the following additional attributes:

Attribute Input policy Value
expanded Optional Boolean that determines whether the chat is initially open. If not set, the chat will remember its last state.
chat-icon Optional The icon for the chat bubble. Must be a publicly available URI.
chat-close-icon Optional The close icon for the chat bubble. Must be a publicly available URI.
chat-collapse-icon Optional The icon for the collapse button in the title bar. Must be a publicly available URI.
anchor Optional Defines where the chat dialog is placed relative to the open or close bubble. The value is two direction words (top, bottom, left, right) delimited by -. Default value is top-left. The first direction defines the anchoring point, and the second direction defines the main expansion direction away from the bubble. For example: top-left is placed on top of the bubble and expands to the left and upward (away from the bubble).
chat-width Optional Defines the width of the chat window. Numerical values (in pixel). Defaults to 320px.
chat-height Optional Defines the height of the chat window. Numerical values (in pixel). Defaults to 480px.
allow-fullscreen Optional Defines if the chat window can open fullscreen. If set to always, opens in fullscreen for all screen sizes. If set to small, opens fullscreen for screen sizes below 500px, otherwise opens as a normal window. May override chat-width, chat-height and anchor if set.
minimized Optional Determines whether the chat is initially open in minimized form. Uses the same logic as anchor. Will execute the initial intent on load if specified.