> ## Documentation Index
> Fetch the complete documentation index at: https://docs.osvi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Customise the widget

> Change the launcher, colours, header and how interactive tools look

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](/website-chat/configuration).

```html theme={null}
<script>
  window.OsviChat = window.OsviChat || { q: [], open() { this.q.push(["open"]); }, close() { this.q.push(["close"]); }, toggle() { this.q.push(["toggle"]); } };
  window.OsviChatConfig = {
    agentId: "agent_yourAgentId",
    theme: { mode: "dark", colors: { primary: "#2563eb" }, radius: "lg" },
    variants: { buttons: "chips", carousel: "slider" },
    poweredBy: true
  };
</script>
<script async data-agent="agent_yourAgentId" src="https://cdn.jsdelivr.net/npm/@osvi-ai/chat@0.1/dist/widget.js"></script>
```

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.

<img src="https://mintcdn.com/osviai/pUq2O4qlVzJF237c/images/website-chat/widget-launcher.png?fit=max&auto=format&n=pUq2O4qlVzJF237c&q=85&s=07cb4a1f9e2b73300c143bb681d553f6" alt="Chat widget launcher shown as a floating button beside the page content" width="1100" height="640" data-path="images/website-chat/widget-launcher.png" />

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](/website-chat/configuration#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`.

<img src="https://mintcdn.com/osviai/pUq2O4qlVzJF237c/images/website-chat/dark-mode.png?fit=max&auto=format&n=pUq2O4qlVzJF237c&q=85&s=fbc8d51040f5281a7620427b6a4d8dff" alt="Chat widget in dark mode showing a message and interactive buttons" width="520" height="680" data-path="images/website-chat/dark-mode.png" />

Dark theme applied to the widget.

## Header

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.

<img src="https://mintcdn.com/osviai/pUq2O4qlVzJF237c/images/website-chat/buttons-chips.png?fit=max&auto=format&n=pUq2O4qlVzJF237c&q=85&s=1ad014659ec60ca4a5f09653bf81454a" alt="Chat widget showing button actions as compact chips beneath an assistant message" width="520" height="680" data-path="images/website-chat/buttons-chips.png" />

Button actions displayed as chips.

<img src="https://mintcdn.com/osviai/pUq2O4qlVzJF237c/images/website-chat/buttons-list.png?fit=max&auto=format&n=pUq2O4qlVzJF237c&q=85&s=367b17370be2370eef88758b73757395" alt="Chat widget showing button actions in a vertical list beneath an assistant message" width="520" height="680" data-path="images/website-chat/buttons-list.png" />

The same button actions displayed as a list.

<img src="https://mintcdn.com/osviai/pUq2O4qlVzJF237c/images/website-chat/carousel-slider.png?fit=max&auto=format&n=pUq2O4qlVzJF237c&q=85&s=b0ac1b78f5508e309d393a8209bfb740" alt="Chat widget showing carousel cards in a horizontally browsable slider" width="520" height="680" data-path="images/website-chat/carousel-slider.png" />

Carousel cards displayed in a slider.

<img src="https://mintcdn.com/osviai/pUq2O4qlVzJF237c/images/website-chat/carousel-list.png?fit=max&auto=format&n=pUq2O4qlVzJF237c&q=85&s=effaa0ca5710608b5ec72189c768f8fe" alt="Chat widget showing carousel cards in a vertically stacked list" width="520" height="680" data-path="images/website-chat/carousel-list.png" />

Carousel cards displayed as a list.

<img src="https://mintcdn.com/osviai/pUq2O4qlVzJF237c/images/website-chat/date-picker.png?fit=max&auto=format&n=pUq2O4qlVzJF237c&q=85&s=c91da6bd04354dc1629ea92e00e24d02" alt="Chat widget showing a date picker with date selection controls" width="520" height="680" data-path="images/website-chat/date-picker.png" />

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](/website-chat/configuration#interface-strings).

## Welcome message

The first message the chat shows is set in the dashboard, not in the widget. See [Welcome message](/website-chat/dashboard-settings#welcome-message).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.