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

# Styling & Appearance

> Customize your agent's visual appearance with avatars, colors, backgrounds, and themes to match your brand

## Overview

The Styling settings let you customize how your chat widget looks and feels on your website. You can adjust everything from the avatar character to colors, themes, and widget positioning to create a seamless brand experience for your visitors.

<Tip>
  All styling changes can be previewed in real-time before saving. Use the live preview panel to see exactly how your widget will appear to visitors.
</Tip>

## Accessing Styling Settings

1. Navigate to your agent in the dashboard
2. Click on **Deploy** in the sidebar
3. Select **Chat Widget** to access the styling options

The styling options are organized into the **Styling** tab, while content options like welcome messages and suggested questions are in the **Content** tab.

## Avatar

Your agent's avatar is the visual representation that appears in the chat widget. It creates a more engaging, human-like experience for visitors.

### Selecting an Avatar

| Option                  | Description                                                 |
| ----------------------- | ----------------------------------------------------------- |
| **Choose from library** | Select from a collection of pre-made 3D avatar characters   |
| **Change anytime**      | You can switch avatars at any time from the widget settings |

To select or change an avatar:

1. Click the **Change** button (or **Select** if no avatar is set)
2. Browse the avatar gallery
3. Click on an avatar to preview it
4. Click **Select** to confirm your choice

<Note>
  Avatars animate and can speak responses using text-to-speech, creating a more interactive experience for your visitors.
</Note>

### Avatar Background

You can customize the background behind your avatar:

| Setting               | Description                                                                           |
| --------------------- | ------------------------------------------------------------------------------------- |
| **Custom Background** | Enable to set a custom background color                                               |
| **Background Color**  | Choose any color using the color picker or enter a hex code                           |
| **Transparency**      | Adjust the background transparency from 0% (fully transparent) to 100% (fully opaque) |

## Appearance

Choose between light and dark themes for your chat widget to match your website's design.

### Theme Options

<CardGroup cols={2}>
  <Card title="Light Theme" icon="sun">
    A bright, clean appearance with light backgrounds and dark text. Best for websites with light color schemes.
  </Card>

  <Card title="Dark Theme" icon="moon">
    A darker appearance with dark backgrounds and light text. Ideal for websites with dark color schemes or for reducing eye strain.
  </Card>
</CardGroup>

To change the theme:

1. Navigate to the **Styling** tab
2. Under **Appearance**, click on either the **Light** or **Dark** card
3. The selected theme will be highlighted with a border

## Brand Color

The brand color is your primary color that appears throughout the widget. It's used for:

* Send button
* Active elements and highlights
* Links and interactive components
* Primary action buttons

### Setting Your Brand Color

1. Click on the color swatch to open the color picker
2. Select your desired color, or
3. Enter a hex color code directly (e.g., `#171717`)
4. Click the reset icon to restore the default color

<Tip>
  Choose a brand color that matches your website's primary color for a cohesive look. Ensure sufficient contrast for accessibility.
</Tip>

## Color Overrides

Fine-tune specific elements of your widget with individual color overrides. Each override can be enabled or disabled independently.

### Available Color Overrides

| Color Setting           | What It Affects                               | Default   |
| ----------------------- | --------------------------------------------- | --------- |
| **User Message Color**  | Background color of messages sent by visitors | `#171717` |
| **Widget Header Color** | Background color of the widget header bar     | `#171717` |
| **Bubble Color**        | Background color of the chat bubble button    | `#171717` |
| **Hint Background**     | Background color of hint/tooltip elements     | `#171717` |

### Configuring Color Overrides

For each color override:

1. Toggle the switch to **enable** the override
2. Click the color swatch to open the color picker
3. Select your color or enter a hex code
4. Use the reset button to restore the default value

<Note>
  When a color override is disabled, the widget uses the default color automatically. Enable overrides only when you need custom colors.
</Note>

## Chat Bubble

The chat bubble is the floating button visitors click to open the chat widget. Customize its position and appearance.

### Bubble Position

Choose where the chat bubble appears on your website:

| Position  | Description                                         |
| --------- | --------------------------------------------------- |
| **Left**  | Bubble appears in the bottom-left corner            |
| **Right** | Bubble appears in the bottom-right corner (default) |

### Custom Chat Icon

Replace the default chat icon with your own:

1. Toggle **Chat Icon** to enable custom icon
2. Click **Upload** to select an image from your device
3. Supported formats: PNG, JPG, SVG
4. Recommended size: 48x48 pixels or larger

<Warning>
  When you disable the custom icon toggle, the widget reverts to the default chat icon.
</Warning>

## Saving Your Changes

After making styling changes:

1. Review your changes in the live preview panel
2. Click **Save Changes** when satisfied
3. The widget on your website will update automatically

If you navigate away with unsaved changes, you'll be prompted to save or discard them.

### Discarding Changes

Click **Discard** to revert all changes back to the last saved state. This is useful if you want to start over or made changes you don't want to keep.

## Best Practices

<AccordionGroup>
  <Accordion icon="palette" title="Match your brand">
    Use your website's primary colors for the brand color and overrides. Consistent colors create a professional, integrated experience.
  </Accordion>

  <Accordion icon="eye" title="Test both themes">
    Preview your widget in both light and dark themes to ensure it looks good regardless of user preferences or website design.
  </Accordion>

  <Accordion icon="universal-access" title="Consider accessibility">
    Choose colors with sufficient contrast ratios. Avoid low-contrast combinations that make text difficult to read.
  </Accordion>

  <Accordion icon="location-dot" title="Position thoughtfully">
    Place the chat bubble where it won't obstruct important content. The bottom-right corner is conventional, but left positioning works well for some layouts.
  </Accordion>

  <Accordion icon="mobile" title="Check mobile appearance">
    Test your styling on mobile devices. The widget should look good and be easy to use on smaller screens.
  </Accordion>
</AccordionGroup>

## Styling Reference

### Default Values

| Setting                        | Default Value |
| ------------------------------ | ------------- |
| Appearance                     | Light         |
| Brand Color                    | `#171717`     |
| User Message Color             | `#171717`     |
| Widget Header Color            | `#171717`     |
| Bubble Color                   | `#171717`     |
| Hint Background                | `#171717`     |
| Bubble Position                | Right         |
| Avatar Background Color        | `#FFFFFF`     |
| Avatar Background Transparency | 70%           |

### Color Format

All colors use hexadecimal format:

```
#RRGGBB

Examples:
- #171717 (dark gray - default)
- #FFFFFF (white)
- #3B82F6 (blue)
- #10B981 (green)
- #EF4444 (red)
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Widget Configuration" icon="sliders" href="/customization/widget">
    Configure widget content like welcome messages and suggested questions.
  </Card>

  <Card title="Localization" icon="globe" href="/customization/localization">
    Set up language options for international visitors.
  </Card>

  <Card title="Deploy Your Widget" icon="code" href="/agents/deployment">
    Get the embed code and add your styled widget to your website.
  </Card>

  <Card title="Test in Playground" icon="flask" href="/agents/playground">
    Test your agent's responses before going live.
  </Card>
</CardGroup>