Enabling the flexible UI mode for an embedded agent
With Flexible UI mode, agents are no longer limited to a fixed chat window. Your agent can collapse into a button, minimized to its original state, and expand into full screen.
Here’s a guide that describes how to enable the flexible UI mode for an embedded agent, along with the various possible parameters.
By default, an embedded agent is displayed in an HTML container of your choice.
Please see the Embed agent demo
Embed agent in flexible UI mode
To enable flexible UI, the <mindset-agent>
tag needs to be wrapped in <mindset-container>
<mindset-container>
tagagent-title is the itle that will be visible as the button title, or header title.
if a string is not passed, default will be Mindset Chat
.
agent-title='My agent title'
agent-icon is the icon visible on the button or header with title. If the icon’s URL is not passed, the agent will not display any icon
agent-icon='https://mindset-int.web.app/mindset-icon.png'
This dictates the availability of agent view modes. agent-view-mode can be one of the following values:
chat-only
This mode will display the agent in a chat-only view, without any full-screen mode.
agent-view-mode='chat-only'
tray-only
This mode displays the agent in full-screen view, without any chat mode.
agent-view-mode='tray-only'
no-tray
This mode disables the tray’s full-screen view, hence when minimizing the agent in full-screen mode , it returns to the ‘button’ state.
agent-view-mode='no-tray'
all
That is the default mode, which will display the agent in both chat and tray modes, allowing users to switch between them.
agent-view-mode='all'
This parameter can accept text color or hex code. can be used to force override the background color of button, tray and header. This parameter takes priority over theme color.
agent-header-color-override='blue'
This parameter can accept text color or hex code. can be used to force override the text color of button, tray and header. This parameter takes priority over theme color.
agent-text-color-override='yellow'
Enabling the flexible UI mode for an embedded agent
With Flexible UI mode, agents are no longer limited to a fixed chat window. Your agent can collapse into a button, minimized to its original state, and expand into full screen.
Here’s a guide that describes how to enable the flexible UI mode for an embedded agent, along with the various possible parameters.
By default, an embedded agent is displayed in an HTML container of your choice.
Please see the Embed agent demo
Embed agent in flexible UI mode
To enable flexible UI, the <mindset-agent>
tag needs to be wrapped in <mindset-container>
<mindset-container>
tagagent-title is the itle that will be visible as the button title, or header title.
if a string is not passed, default will be Mindset Chat
.
agent-title='My agent title'
agent-icon is the icon visible on the button or header with title. If the icon’s URL is not passed, the agent will not display any icon
agent-icon='https://mindset-int.web.app/mindset-icon.png'
This dictates the availability of agent view modes. agent-view-mode can be one of the following values:
chat-only
This mode will display the agent in a chat-only view, without any full-screen mode.
agent-view-mode='chat-only'
tray-only
This mode displays the agent in full-screen view, without any chat mode.
agent-view-mode='tray-only'
no-tray
This mode disables the tray’s full-screen view, hence when minimizing the agent in full-screen mode , it returns to the ‘button’ state.
agent-view-mode='no-tray'
all
That is the default mode, which will display the agent in both chat and tray modes, allowing users to switch between them.
agent-view-mode='all'
This parameter can accept text color or hex code. can be used to force override the background color of button, tray and header. This parameter takes priority over theme color.
agent-header-color-override='blue'
This parameter can accept text color or hex code. can be used to force override the text color of button, tray and header. This parameter takes priority over theme color.
agent-text-color-override='yellow'