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

# Chatbot Customization

> Customize the appearance and behavior of your chat widget

ToeBox gives you full control over how your chatbot widget looks and behaves on your storefront.

## Theme colors

Every chatbot has configurable color settings:

| Setting                | Description                      | Default              |
| ---------------------- | -------------------------------- | -------------------- |
| **Primary color**      | Chat bubble, header, send button | `#303030`            |
| **Background color**   | Chat window background           | `#FFFFFF`            |
| **Text color**         | Message text                     | `#1A1A1A`            |
| **User message color** | Background of customer messages  | Derived from primary |
| **Bot message color**  | Background of agent responses    | `#F3F4F6`            |

Enter colors as hex codes (e.g., `#FF6B35`) or use the color picker in the chatbot builder.

## Chat bubble styles

The chat bubble is the floating button customers click to open the widget. Choose from three styles:

<Tabs>
  <Tab title="Rounded">
    A circular button with rounded corners. This is the default and works well with most themes.
  </Tab>

  <Tab title="Square">
    A square button with sharp corners. Good for modern, minimalist storefronts.
  </Tab>

  <Tab title="Pill">
    An elongated pill shape that can display text alongside the icon. Great for adding a call-to-action like "Chat with us".
  </Tab>
</Tabs>

## Position

Place the widget in either corner of the page:

* **Bottom-right** (default) -- The most common position for chat widgets
* **Bottom-left** -- Use this if you have other widgets or elements in the bottom-right corner

## Widget title and branding

* **Title** -- The name displayed in the chat window header (e.g., "Support", "Shopping Assistant")
* **Subtitle** -- Optional text below the title (e.g., "We typically reply in minutes")
* **Avatar** -- An image shown alongside the agent's messages

## Welcome message

The welcome message appears when a customer opens the chat for the first time. Keep it:

* Friendly and concise
* Clear about what the agent can help with
* Relevant to your store's offerings

## Suggested prompts

Suggested prompts appear as clickable chips below the welcome message. They reduce friction by showing customers exactly what they can ask. You can add up to 4 suggested prompts.

Good prompts are:

* Action-oriented ("Find me a gift under \$50")
* Specific to your store ("Show me your bestsellers")
* Common questions ("What's your shipping policy?")

## Mobile responsiveness

The ToeBox widget is fully responsive. On mobile devices:

* The chat window expands to fill the screen
* The bubble adjusts to a comfortable tap target size
* Scroll behavior is optimized for touch interactions

No additional configuration is needed for mobile.

## Custom CSS

For advanced customization beyond the built-in options, you can apply custom CSS to override widget styles. This is useful for:

* Matching specific font families
* Adjusting widget dimensions
* Adding transitions or animations
* Overriding spacing and padding

<Warning>Custom CSS is an advanced feature. Test thoroughly across devices and browsers after applying custom styles.</Warning>