Skip to main content
You customise the widget in your page, not in the dashboard. Add data-* attributes to the script tag, or set window.OsviChatConfig before the script loads. Attributes win over the config object. Every option is listed in the Configuration reference.
The widget mounts as soon as its script loads. To change the configuration afterwards, call OsviChat.destroy() and then OsviChat.init(config). The pre-load stub queues open(), close() and toggle() calls made before the script loads.

​
Launcher

  • position: right (default) or left.
  • launcher: "none" hides the bubble so you can open the chat from your own button with OsviChat.open().
  • greeting: a short dismissible bubble beside the closed launcher, such as “Questions? Ask us”. Once dismissed, it stays hidden for that visitor.
Chat widget launcher shown as a floating button beside the page content Floating launcher before the chat panel is opened.

​
Colours and shape

Set theme.mode to light or dark, theme.colors.primary for your brand colour and theme.radius for corner rounding. All six colours are in Theme. Styles live in the widget’s Shadow DOM, so your site’s CSS does not leak in and you need no extra style-src. Chat widget in dark mode showing a message and interactive buttons Dark theme applied to the widget. The header shows the agent’s name by default. Set header.title, header.subtitle and header.avatarUrl (or data-title, data-subtitle, data-avatar) to change it. newChat and newChatHistory control the New chat button.

​
Interactive tools

The agent can show buttons, cards and date pickers. Choose chips or list for buttons and slider or list for carousels. The date picker has one look and supports a single date or a range, as the agent asks. The examples below use an SDK test agent; the content depends on your agent. Chat widget showing button actions as compact chips beneath an assistant message Button actions displayed as chips. Chat widget showing button actions in a vertical list beneath an assistant message The same button actions displayed as a list. Chat widget showing carousel cards in a horizontally browsable slider Carousel cards displayed in a slider. Chat widget showing carousel cards in a vertically stacked list Carousel cards displayed as a list. Chat widget showing a date picker with date selection controls Date picker interaction supplied by the agent.

​
Text and language

Every visible label can be replaced through strings, for example to translate the widget. The keys and defaults are in Interface strings.

​
Welcome message

The first message the chat shows is set in the dashboard, not in the widget. See Welcome message.