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

# Customizing Your Widget

> Make your chat widget match your brand

Make your chat widget match your brand and provide a seamless experience for your customers.

## Appearance Settings

### Brand Name

The name shown in the chat header (e.g., "Sara | Your Shopping Assistant")

### Primary Color

Choose your brand color using the color picker or enter a hex code (e.g., `#7C3AED` for purple)

<Tip>
  Use your brand's primary color to maintain consistency across your website.
</Tip>

### Agent Avatar

Upload an image or avatar for your agent that appears in the chat. This helps personalize the conversation experience.

### Widget Position

Choose where the chat button appears on your website:

<CardGroup cols={3}>
  <Card title="Right" icon="arrow-right">
    Bottom-right corner (most common)
  </Card>

  <Card title="Left" icon="arrow-left">
    Bottom-left corner
  </Card>

  <Card title="Center" icon="arrows-left-right">
    Bottom center
  </Card>
</CardGroup>

## Popular Questions

Add up to **3 quick-action buttons** that appear in the chat widget to help customers start conversations quickly.

### Example Buttons

* "What's new?"
* "Track my order"
* "Contact support"

<Info>
  Quick-action buttons increase engagement by making it easy for customers to start a conversation.
</Info>

## Live Preview

As you make changes, see exactly how your widget will look in the **real-time preview** on the right side of the screen.

<Frame>
  <img src="https://mintcdn.com/loopz/pamFVuE_hEBkBSD_/images/widget-preview.png?fit=max&auto=format&n=pamFVuE_hEBkBSD_&q=85&s=fee5c45aff0bd359018000e93b7e2ab0" alt="Widget Preview Example" style={{ maxWidth: '400px', margin: '0 auto' }} width="477" height="830" data-path="images/widget-preview.png" />
</Frame>

<Check>
  Always test your changes in the live preview before deploying!
</Check>

## Next Steps

<CardGroup cols={2}>
  <Card title="Deploy Your Agent" icon="rocket" href="/guide/deployment">
    Add your agent to your website
  </Card>

  <Card title="Connect Integrations" icon="plug" href="/guide/integrations">
    Link Calendly, Zid, WhatsApp, and more
  </Card>
</CardGroup>