> ## Documentation Index
> Fetch the complete documentation index at: https://docs.volubile.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Integration
> Install the chatbot widget on your website using the generated snippet.
Once your chatbot is configured, the **Installation** section provides a ready-to-use snippet. Copy it and add it to your website inside the `` of the pages on which the widget should appear. The widget is served from the Volubile CDN and connects to your agent automatically.
The snippet is available in two integration modes.
The widget is displayed as a floating launcher button that opens the chat window on demand. This mode is suited to most websites and requires no change to your page layout.
```html theme={null}
```
The widget is embedded directly within a container element of your page. The container must have a defined height. This mode is suited to dedicated support pages or sections where the chat should remain permanently visible.
```html theme={null}
```
## Advanced options
`VolubileChat.init()` accepts optional parameters that let you associate a conversation with one of your users and pass additional context to the agent. Add them manually to the generated snippet. The values you provide are attached to the conversation and can be reviewed later from the [Conversations](#reviewing-conversations) view.
| Option | Description |
| ------------ | ------------------------------------------------------------------------------------------------- |
| `externalId` | An identifier from your own system, used to link a conversation to a specific user. |
| `context` | Application context made available to the agent, for example the current page or the user's plan. |
| `metadata` | Additional data attached to the conversation for your own reference. |
```html theme={null}
```
The widget renders within an isolated container, ensuring that its styles do not interfere with those of your website and vice versa.
## Overriding the configuration (optional)
The configuration defined in the agent applies to every page on which the widget is embedded. When needed, you can override any of these settings at initialization by passing a `localConfig` object to `VolubileChat.init()`. The values you provide are merged over the saved configuration, so you only specify the fields you want to change.
This is useful to adapt the widget per page or per context — for example, a specific welcome message on your pricing page, or colors that match a particular section of your website.
The following fields can be overridden: `language`, `privacyPolicyUrl`, `theme` (`primaryColor`, `backgroundColor`, `textColor`, `borderRadius`, `fontFamily`), `display` (`title`, `welcomeMessage`), and `behaviour` (`messageSizeLimit`, `inactivityTimeout`, `attachments`).
In floating mode, `localConfig` also accepts `zIndex` (default `99999`) — the stacking order of the floating widget. Increase it if the widget appears behind elements of your website.
In floating mode, `localConfig.display` also accepts `iconSize` (default `44`) — the launcher button size, in pixels.
```html theme={null}
```
Security settings (**allowed origins**) cannot be overridden this way. They remain enforced server-side to protect where the widget may be loaded.
## Custom launcher logo
In floating mode, you can display your own logo in place of the default launcher icon. Set the address (URL) of your image in `localConfig.display.launcherLogoSrc`, as shown in the example below.
**Accepted format**
* An image URL pointing to an SVG, PNG, or WebP file, or an inline `data:` URI.
* The logo is rendered inside an `![]()
` element. For security, any script or interactivity embedded in an SVG is ignored by the browser — provide a static, already-colored image. The logo does not inherit the widget theme color, so bake the final colors into the asset.
**Size & dimensions**
* Use a square image; it is scaled to the launcher size (`iconSize`, default `44` px) and centered.
* Recommended: at least 88×88 px (2× for retina displays), transparent background.
* Keep it small — ≤ 20 KB when hosted, or ≤ 10 KB for an inline `data:` URI to avoid bloating the host page.
**Hosting**
* Must be served over HTTPS.
* Must be publicly accessible (no authentication).
* Can live on your own domain (absolute or relative URL), any HTTPS host, or be embedded inline as a `data:` URI. No CORS configuration is required for `![]()
`.
```html theme={null}
```
## Reviewing conversations
Once your chatbot has handled at least one conversation, a **Conversations** entry appears in the navigation menu. It lists every exchange with its date, status, and number of interactions, and lets you open a conversation to review its transcript, summary, attachments, and technical details.