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

# Widget Design

> Customize the look and feel of your chatbot widget

Make your chatbot feel like a natural part of your website. Customize colors, position, branding, and messaging to match your brand perfectly.

## Accessing Design Settings

<Steps>
  <Step title="Open Dashboard">
    Go to [bubblav.com/dashboard](https://www.bubblav.com/dashboard)
  </Step>

  <Step title="Select Website">
    Click on the website you want to customize
  </Step>

  <Step title="Open Design">
    Click **Design** in the sidebar menu
  </Step>
</Steps>

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/bubblav-e553cf80/nhelQxnCmiOq_LRR/images/widget-design.png?fit=max&auto=format&n=nhelQxnCmiOq_LRR&q=85&s=f2b2f260847e2a9c8ffc5b7f91f9dc02" alt="Widget Design Overview" width="1099" height="1049" data-path="images/widget-design.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/bubblav-e553cf80/nhelQxnCmiOq_LRR/images/widget-design-dark.png?fit=max&auto=format&n=nhelQxnCmiOq_LRR&q=85&s=4d046c6a2d8340f869c9b503e4d352f6" alt="Widget Design Overview" width="1099" height="1054" data-path="images/widget-design-dark.png" />
</Frame>

***

## Design Options

The design settings are organized into collapsible sections to help you focus on specific parts of the widget.

### 🎨 Color Palette Presets

Choose from professionally designed color themes if you want a quick start.

**Automatic Color Detection**: When you add a new website, BubblaV automatically analyzes your site's colors and applies a matching theme to your widget.

**Manual Color Extraction**: You can also extract colors from any website URL:

1. Expand the **Color Palette Presets** section
2. Enter a website URL in the text field at the bottom
3. Click **Extract Colors** to analyze and apply the color scheme

***

## Basic Settings

Configuration for the widget's general behavior and appearance.

### General

* **Show Expand Button**: Allow users to expand the chat widget to a larger size.
* **Show "Powered by" branding**: Toggle the BubblaV branding (available on Pro+ plans).

### Dimensions

Customize the size of the widget window:

* **Widget Width**: Default is `400px`.
* **Widget Height**: Default is `650px`.

### Bubble Appearance

Customize the floating chat button:

* **Bubble Color**: The background color of the chat button.
* **Bubble Icon Color**: The color of the icon inside the button.

### Positioning

Choose where the chat button appears on Desktop and Mobile:

* **Bottom Right**: Standard convention.
* **Bottom Left**: useful if you have other widgets on the right.

***

## Screen Configuration

The widget is divided into three main screens, each with its own customization options.

### 🏠 Home Screen

The first screen users see when they open the widget.

* **Welcome Message**: The greeting text displayed at the top.
* **Background Style**: Solid color or gradient.
* **Chat Suggestions**: Quick-start questions to guide users.

### 💬 List Screen (Messages)

The screen displaying the history of conversations.

* Customize the title, background colors, and unread indicator settings.

### 💭 Chat Screen

The active conversation interface.

* **Bot Identity**: Set the Bot Name and upload a custom Avatar.
* **Colors**: Customize message bubbles (User vs Bot), text colors, and the input area.
* **Placeholder Text**: The text shown in the message input field before typing.

***

## Advanced Settings

### Exclude URLs

Prevent the widget from appearing on specific pages:

1. Expand the **Advanced Settings** section.
2. Enter the URLs where you want to hide the widget (one per line).
3. You can use specific paths like `/checkout` or full URLs.

### Product Card Layout

Control how product cards are displayed in chat responses:

**Vertical Layout** (default):

* Product cards stack vertically.
* Each card takes full width.
* Best for detailed product information.

**Horizontal Layout**:

* Product cards display side-by-side (carousel).
* Users can scroll horizontally to see more products.
* Compact view, good for showing multiple options.

***

## Live Preview

The design page includes a real-time preview:

* **Desktop view**: See how it looks on larger screens.
* **Mobile view**: Toggle to see mobile responsiveness.
* **Inline Editing**: Click on any text, button, or color in the preview to edit it directly.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/bubblav-e553cf80/R3ckwS1UlR0o66Bf/images/widget-live-edit.png?fit=max&auto=format&n=R3ckwS1UlR0o66Bf&q=85&s=6c297ac0bff3316af6344e8575e0fdd6" alt="Live Widget Design and Preview" width="1080" height="494" data-path="images/widget-live-edit.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/bubblav-e553cf80/nhelQxnCmiOq_LRR/images/widget-live-edit-dark.png?fit=max&auto=format&n=nhelQxnCmiOq_LRR&q=85&s=d159748493bf76e55100126c51a641ec" alt="Live Widget Design and Preview" width="466" height="354" data-path="images/widget-live-edit-dark.png" />
</Frame>

<Note>
  For a full-screen testing experience, use the dedicated **Test** page available in the dashboard sidebar. This allows you to test the chat behavior without the design tools cluttering the view.
</Note>

### ⚡ Inline Editing

The fastest way to customize your widget is by clicking on elements directly in the live preview.

* **Text Editing**: Click on titles, labels, or names to edit them in-place.
* **Color Picking**: Click on any colored area (like the header or bubble) to open the color picker.
* **Images**: Click on the bot avatar or logo to update their URLs.
* **Layout Toggles**: Switch between product card layouts by clicking on the cards.

<Note>
  Clicking on an element opens an inline editor. Make your changes and click **Save** to apply them, or **Cancel** to revert.
</Note>

***

## Saving Changes

<Note>
  Inline edits are saved to your history as you confirm them. You can use Undo/Redo to manage changes.
</Note>

<Warning>
  Sidebar changes are not live until you save!
</Warning>

<Steps>
  <Step title="Review in Preview">
    Check your changes in the live preview.
  </Step>

  <Step title="Save">
    Click **Save** at the bottom of the form.
  </Step>

  <Step title="Verify Live">
    Reload your website to see the updates — changes appear within 1 minute.
  </Step>
</Steps>

***

## Design Best Practices

<AccordionGroup>
  <Accordion title="Match your brand">
    Your brand colors are automatically extracted when you add a website. You can also manually extract colors from any URL in the Color Palette Presets section, or set your primary brand color for the Bubble and User Messages manually.
  </Accordion>

  <Accordion title="Keep it legible">
    Ensure high contrast between text and background colors. Dark text on light backgrounds is generally the most readable.
  </Accordion>

  <Accordion title="Test expanding">
    If you enable the **Expand Button**, check that the larger widget size doesn't cover important content on your site.
  </Accordion>

  <Accordion title="Write welcoming copy">
    Customize the **Welcome Message** on the Home Screen to sound friendly and helpful.
  </Accordion>
</AccordionGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Changes not appearing?">
    * Ensure you clicked **Save**.
    * Reload the page — changes appear within 1 minute.
    * If still not showing, clear your browser cache and reload.
  </Accordion>

  <Accordion title="Widget overlapping content?">
    * Try changing the **Positioning** (Left vs Right).
    * Use **Advanced Settings > Exclude URLs** if it shouldn't appear on certain pages.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Test Your Bot" icon="flask" href="/user-guide/testing">
    Preview your chatbot in action
  </Card>

  <Card title="Installation" icon="download" href="/user-guide/installation">
    Add the widget to your website
  </Card>
</CardGroup>