Plan requirement
| App | pluscloud AI Agent Preview |
| Subscription | Suite Team or higher, Support Team or higher |
| Access | Client admin, Client editor, Client user |
The preview offers every documented option of the messenger's customisation call, so you can see each one on your AI agent's conversation first.
Open the customisation panel
With the Web Widget as preview channel, click Preview settings in the toolbar and then Web Widget customization at the bottom of the panel. The preview follows each change straight away. How you pick the channel is in Choosing the channel to preview.
The panel holds all 44 documented options of zE('messenger:set', 'customization', ...), plus the zIndex, cookies and behavior settings. The groups are Window, Conversation, Conversation list, Position, Theme colors, Other settings, Behavior and Pre-conversation screen, followed by Proactive message (preview) and the embed code. The Lab of the Web Widget inspector uses the same editor on the real widget of a website; see The Lab in the Web Widget inspector.
What does this setting do?
Every option has a small i after its name. Hover over it, or move to it with the Tab key, to see a short animation of what the option changes in the widget. If your computer is set to reduce motion, you see a still image instead. More about these animations is in Seeing what a setting does.
Window
| Option | Values | In the code |
|---|---|---|
| Hide header | On or off. Applies to both pages, unless a page has its own Header setting. | common.hideHeader |
| Hide button in the header (Undocumented) | On or off. Hides the widget and its launcher, as zE('messenger', 'hide') does; the preview then offers Show again. |
common.isHideButtonVisible |
| Content scale (%, 50–200) | 50 to 200. The content scales; the window keeps its size, as in the widget. | common.contentScale |
| Style | Account default, Default (bubbles) or Minimalistic. The same option as Style in the preview settings. | common.stylingPreset |
Conversation
| Option | Values | In the code |
|---|---|---|
| Header | Default, show or hide | messageLog.hideHeader |
| Hide avatar in header | On or off | messageLog.header.hideAvatar |
| Position of "End conversation" | Default (header button), header button or options menu | messageLog.endConversationOption.position |
| Hide avatar | On or off | messageLog.avatar.hidden |
| Avatar position | Default, side, top, or top and side | messageLog.avatar.position |
| Avatar size (px, 16–64) | 16 to 64 | messageLog.avatar.size |
| AI agent and agent messages · Bubble, and · Max. width (%, 10–100) | Default, show or hide; 10 to 100 | messageLog.businessMessage |
| Customer messages · Bubble, and · Max. width (%, 10–100) | Default, show or hide; 10 to 100 | messageLog.userMessage |
| Cited sources | "Sources" button, bulleted list or numbered list | messageLog.citations.sources |
A maximum width you leave empty uses the widget's responsive width. End conversation only appears when Customers can end conversations is on in the preview settings, on an active conversation with a header. Confirming it in the preview ends nothing; see The preview settings.
Conversation list
For widgets with several conversations. The preview shows the list when Conversations in the preview settings comes down to several conversations.
| Option | Values | In the code |
|---|---|---|
| Hide "New conversation" button | On or off | conversationList.hideNewConversationButton |
| Header | Default, show or hide | conversationList.hideHeader |
| Avatars | Default, show or hide | conversationList.avatar.hidden |
| Avatar size (px, 16–64) | 16 to 64 | conversationList.avatar.size |
| Timestamps | Default, show or hide | conversationList.hideTimestamp |
| Message preview | Default, show or hide | conversationList.hideMessagePreview |
| Dividers | Default, show or hide | conversationList.hideDivider |
| Group by date | Default, off or on | conversationList.groupByTimestamp |
Default follows the style. The minimalistic style hides avatars, timestamps, message previews and dividers and groups the list by date; a choice you make here overrides that.
Position
For the floating widget only. An empty field uses the setting from Admin Center.
| Option | Values | In the code |
|---|---|---|
| Side | Default, left or right | position.side |
| Desktop · Horizontal offset (px) and Vertical offset (px) | 0 to 400 in the editor | position.offset.web |
| Mobile · Horizontal offset (px) and Vertical offset (px) | 0 to 400 in the editor | position.offset.mobile |
The preview shows the desktop widget, so the mobile offsets only go into the embed code.
Theme colors
All 17 theme properties of the messenger: primary, onPrimary, message, onMessage, action, onAction, businessMessage, onBusinessMessage, background, onBackground, conversationListBackground, onConversationListBackground, error, onError, notify, onNotify and onSecondaryAction. Hover over a colour to see what it styles. error and onError colour image errors, form errors and the notes on messages that were not delivered; notify and onNotify colour the unread count in the conversation list, the badge on the closed launcher and the New divider in the conversation. A colour you leave empty shows auto and keeps the setting from Admin Center or the widget's default. The cross next to a colour clears it.
Other settings and Behavior
| Option | Values | In the code |
|---|---|---|
| Stacking order (zIndex) | A number | zE('messenger:set', 'zIndex', ...) |
| Cookies and storage | All, Functional only (no analytics) or None. None hides the widget and clears its storage. | zE('messenger:set', 'cookies', ...) |
| Don't focus the message field when messages arrive | On or off | behavior.composer.focus.suppressAutoFocus |
| Alt text of the header logo | Your own text, or No alt text. Empty uses the widget's own text, Company logo, in the widget's language. | behavior.header.logo.altText |
The stacking order, the cookies setting and the focus setting only go into the embed code; the preview does not show them.
Pre-conversation screen
The screen the widget can show before the first message, with an icon, a title, a subtitle and suggested prompts. It is not in Zendesk's developer documentation, so it can change or disappear without notice. The panel marks the group Undocumented. More about such features is in Experimental and undocumented Web Widget features.
| Option | Values | In the code |
|---|---|---|
| Show the screen | Default, off or on | behavior.messageLog.preConversation.enabled |
| Title and Subtitle | Text. Empty uses the widget's own text. |
behavior.messageLog.preConversation.settings.title, .subtitle
|
| Icon URL | An http or https address. Empty uses the widget's own icon. | behavior.messageLog.preConversation.settings.icon |
| Suggested prompts | One per line | behavior.messageLog.preConversation.settings.prompts |
As soon as anything else in this group is set, the widget needs Show the screen set to on or off. A click on a prompt sends it to the test conversation. A prompt with [brackets] goes into the message field with that part selected. The test widget starts its conversation straight away, so the preview shows the screen until your first message.
Proactive message (preview)
Show a proactive message shows how a proactive message looks above the closed widget, with a Sender name, a Sender avatar and a Message of your own. With the widget open, click Close the widget to see it. Real proactive messages are campaigns you set up in Admin Center; the preview cannot read them. This group only changes the look in the preview and is not part of the embed code.
Values the widget would refuse
The panel checks each value the way the widget does. A value the widget would refuse is marked under the option, with what the widget then skips:
- an invalid theme colour: the whole customisation call;
- an invalid value under Window, Conversation, Conversation list or Position: that section and the ones after it;
- an invalid stacking order, cookies or behaviour value: only that setting;
- an invalid value in the pre-conversation screen: the whole screen.
What the code contains is in Copying the Web Widget embed code.
Where the customisation is kept
The customisation is stored per Zendesk account, in this browser. Reset customization removes it, including the style. Nothing changes on your website or in Admin Center until you place the code yourself. Settings you copy from a website with the Web Widget inspector replace the preview's own customisation for that account; see Getting started with the Web Widget inspector.
The customisation applies to the Web Widget preview only. The previews of the Zendesk SDKs for iOS and Android use the colours from Admin Center.
Comments
0 comments
Please sign in to leave a comment.