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

# Customization

> Change the appearance and behavior of your Bookster chat widget

## Widget settings

Configure these settings in **Settings** → **Widget** in your admin dashboard.

<Frame>
  <img src="https://mintcdn.com/bookster/Nb50qcSA-sBJgluL/images/screenshots/admin-widget-settings.png?fit=max&auto=format&n=Nb50qcSA-sBJgluL&q=85&s=79ba70b28d74aa613bdbaf3e0cf15a28" alt="Widget customization settings including accent color, domains, and embed code" width="1280" height="800" data-path="images/screenshots/admin-widget-settings.png" />
</Frame>

| Setting            | Description                                                 | Default   |
| ------------------ | ----------------------------------------------------------- | --------- |
| **Widget enabled** | Master toggle — disables the widget on all domains when off | On        |
| **Auto-open**      | Automatically open the chat when a visitor loads the page   | Off       |
| **Accent color**   | Hex color for the chat button, header, and send button      | `#000000` |

## Accent color

The accent color is applied to:

* The chat launcher button
* The chat header accent
* The send message button
* The initial greeting badge

Text color automatically adjusts for contrast (white on dark backgrounds, black on light).

Set any valid hex color code (e.g., `#FF6B35`, `#004643`).

## Widget layout

The widget renders as a floating element in the bottom-right corner of the page.

<Frame>
  <img src="https://mintcdn.com/bookster/Nb50qcSA-sBJgluL/images/screenshots/widget-closed.png?fit=max&auto=format&n=Nb50qcSA-sBJgluL&q=85&s=716bb02d8be80eb7bdef12b9c08fade5" alt="Chat widget button floating in the corner of a page" width="56" height="56" data-path="images/screenshots/widget-closed.png" />
</Frame>

| View                        | Size             |
| --------------------------- | ---------------- |
| **Closed** (button only)    | 80 × 80px circle |
| **Open** (desktop)          | 420 × 680px      |
| **Open** (mobile, \< 768px) | Full screen      |
| **Expanded**                | Full screen      |

Visitors can toggle between the regular and expanded views using the maximize button in the chat header.

## Auto-open

When enabled, the chat window opens automatically when a visitor first loads the page. This is useful for pages where you want to proactively engage visitors (e.g., a pricing or booking page).

You can also trigger auto-open for specific pages using the [URL parameter](/widget/embed-script#url-parameters):

```
https://yoursite.com/pricing?chat=open
```