Voltai widget playground

Backend · production

Primary

Primary textText and icons on primary-coloured surfaces.

Send buttonComposer send button; transparent for icon only. Defaults to Primary.

Send button iconDefaults to Primary text.

New Chat buttonNew Chat in the sidebar and history drawer. Defaults to Primary.

New Chat textDefaults to Primary text.

Sign in buttonEvery Sign in button. Defaults to Primary.

Sign in textDefaults to Primary text.

Secondary

Focus ringOutline around focused controls.

BackdropColour that dims the page behind the open panel. Default: the background colour.

Close buttonThe header's × button.

Close button hover

SidebarBackground of the chat sidebar. Defaults to the background colour.

Selected chatOpen chat in the sidebar's chat list. Defaults to Muted.

Selected chat text

Title

First messagePopup shown the first time a signed-out visitor opens the widget.

AI disclaimerLine under the chat input. Overrides the organization's disclaimer.

Guest modeLets visitors chat without signing in, up to the guest limit.

Default orgOrganization selected for signed-in users who belong to several.

Auth clicksAfter emitting a sign-in or sign-out click event, Observe continues the widget's own flow; Intercept stops it so the host page handles the click.

ButtonWhich side the floating launcher button sits on.

PanelWhere the chat panel opens on desktop. Mobile always opens full screen.

Hide launcherHides the floating button; the host page opens the widget with open() or toggle().

Backdrop blurBlurs the page behind the open panel on desktop.

WidthPanel width in any CSS unit (px, %, vw). Default: 85vw.

HeightPanel height in any CSS unit (px, %, vh). Default: 92vh.

Conversation widthMaximum width of the messages and message box in any CSS unit. 100% fills the panel. Default: 48rem.

Conversation paddingSpace between the sent messages and the panel's sides, in any CSS unit. 0 runs them edge to edge. Default: 1rem, or 2.5rem with the turn outline.

Sidebar paddingSpace inside the expanded chat sidebar on desktop, around New Chat and the chat list, in any CSS unit. Default: 14px 12px.

Sidebar max widthWidest the chat sidebar can be dragged on desktop, in px. Default: 320.

ResizableLets users resize the panel by dragging its edges.

Answer borderBoxes each answer in a bordered card. Off, answers sit on the panel background.

Panel shadowCasts a drop shadow around the open panel on desktop. Off, the panel sits flat on the page.

Backdrop dimHow strongly the backdrop colour covers the page behind the open panel on desktop, from 0 to 1. Default: 0.45 with blur, otherwise 0.

FontCSS font-family list, e.g. "Onest", sans-serif. The page must load the font. Default: system font stack.

Image attachment

Tag resources

Tag topicHides the tag topic button and topic chips. Automatic topic tagging still works.

Agent consoleKeeps the agent console collapsed when agents respond, instead of expanding it.

Sign-inHides the sign-in button for guests; the guest limit dialog then offers no way to sign in.

Chat history drawerHides the chat history drawer, used on phones and touch tablets, and shows a New Chat button in its place. The history beside the chat on desktop stays.

Support ticketAdds a support ticket button to the widget header, for signed-in and guest users.

Ticket acknowledgementRequires ticking a checkbox before a support ticket can be submitted.

Acknowledgement textCheckbox label. Markdown links ([here](https://…)) open in a new tab.

Ticket noteNote beside the support ticket form's submit button.

Ticket descriptionNote under the support ticket dialog's title, e.g. that the conversation is shared with the ticket.

This page is the host website

The widget renders here as it does on a customer site: a floating launcher and panel in their own shadow root, appended to this page’s body.

Send a chat from the host page

Question

Topics

Required: one or more topic names from the org, separated by commas. The SDK rejects a chat without one.

Start a new chat

Event log

Widget events appear here as you use it.