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

# Interface Settings

> Customize your chat widget appearance

## Chat Widget Customization

Make your chat widget match your brand.

<Info>
  **Plan availability:** Standard or higher. See [Plans & Billing](/features/settings/plans).
</Info>

## Colors

<ParamField path="header_background" type="color" required>
  Background color of the chat widget header
</ParamField>

<ParamField path="header_foreground" type="color" required>
  Text color in the header
</ParamField>

<ParamField path="primary_color" type="color">
  Primary accent color for buttons and highlights
</ParamField>

<ParamField path="background_color" type="color">
  Main chat background color
</ParamField>

## Branding

### Avatar

Upload a custom avatar image:

* Recommended size: 200x200px
* Formats: PNG, JPG, GIF
* Appears next to agent messages

### Chat Greeting

Customize the initial message users see:

```
👋 Hi there! I'm here to help. What can I assist you with today?
```

### Welcome Message

Set what appears before users start chatting:

```
Welcome to Acme Support! Ask me anything about our products and services.
```

## Starter Prompts

Add quick-click options for common questions:

<Steps>
  <Step title="Navigate to Interface Settings">
    Go to Settings > Interface
  </Step>

  <Step title="Add Starter Prompts">
    Enter suggested questions users can click
  </Step>

  <Step title="Save">
    Prompts appear in the chat widget
  </Step>
</Steps>

### Example Starters

* "What are your hours?"
* "Tell me about your services"
* "I need help with an order"
* "How do I contact you?"

## Preview

Use the live preview to see changes in real-time before saving.

<Card title="Share Widget" icon="share" href="/features/settings/share">
  Get embed code for your website
</Card>