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

# AI Widget Configure

> Configure and customize the AI call widget for seamless website integration with personalized branding and functionality

## ⚙️ Widget Configuration Interface

### 🎯 Access Widget Configuration

* **Agent Actions Menu** - Click the action button (⋮) next to any agent
* **Select AI Widget Configure** - Choose from the dropdown menu
* **Configuration Panel** - Opens comprehensive widget customization interface

<img src="https://mintcdn.com/rizler/MmyoFL0ur9BfFPdZ/images/ai/AI-agent/AI-widget/configure.png?fit=max&auto=format&n=MmyoFL0ur9BfFPdZ&q=85&s=afe7e435c99f1917fa39109515b114ad" alt="" width="1587" height="790" data-path="images/ai/AI-agent/AI-widget/configure.png" />

### 👁️ Widget Configuration Overview

The AI Widget Configure interface offers extensive customization capabilities for your website's AI call widget. This centralized control panel enables you to tailor the widget's visual design, operational features, and messaging to align with your brand identity and enhance user engagement.

<img src="https://mintcdn.com/rizler/ZnZ8np7aNw8z8N8l/images/ai/AI-agent/AI-widget/overview.png?fit=max&auto=format&n=ZnZ8np7aNw8z8N8l&q=85&s=a695fdd2639e84c078dabda385152b3c" alt="" width="1448" height="864" data-path="images/ai/AI-agent/AI-widget/overview.png" />

## 🔄 Configuration Changes & Preview

The widget configuration interface provides real-time feedback on your customizations through an integrated preview system.

<img src="https://mintcdn.com/rizler/ZnZ8np7aNw8z8N8l/images/ai/AI-agent/AI-widget/changes.png?fit=max&auto=format&n=ZnZ8np7aNw8z8N8l&q=85&s=2fc63b9396a8809d65c1118b4a47b19e" alt="" width="1461" height="860" data-path="images/ai/AI-agent/AI-widget/changes.png" />

> 💡 **Live Preview**: Any changes you make to the configuration fields will be instantly reflected in the AI widget preview displayed in the bottom-right corner of the screen. This allows you to see exactly how your customizations will appear to website visitors before implementing them.

### 💻 Embed Code Section

* **JavaScript Integration** - Ready-to-use embed code for website integration
* **Copy Code** - Click the copy button to get the embed script
* **Agent-Specific** - Each agent has unique embed code with agent ID
* **Async Loading** - Non-blocking script for optimal website performance

<img src="https://mintcdn.com/rizler/MmyoFL0ur9BfFPdZ/images/ai/AI-agent/AI-widget/code.png?fit=max&auto=format&n=MmyoFL0ur9BfFPdZ&q=85&s=064225aece94d8d50ddefc6ad26cd1e1" alt="" width="811" height="322" data-path="images/ai/AI-agent/AI-widget/code.png" />

### 🤖 Avatar Configuration

#### 📸 Avatar Upload

* **Upload Avatar Image** - Custom avatar image for the widget
* **Choose File** - Select image file from local computer
* **File Support** - Common image formats (PNG, JPG, GIF)
* **Avatar Display** - Shows in widget conversation interface

<img src="https://mintcdn.com/rizler/MmyoFL0ur9BfFPdZ/images/ai/AI-agent/AI-widget/avatar.png?fit=max&auto=format&n=MmyoFL0ur9BfFPdZ&q=85&s=5dba4b5425d7b338f612ac0919fcddac" alt="" width="709" height="208" data-path="images/ai/AI-agent/AI-widget/avatar.png" />

### 🎨 Appearance Customization

* **Background Color** - Widget background color
* **Text Color** - Main text color for widget content
* **Button Color** - Primary button background color
* **Button Text Color** - Button text color
* **Border Color** - Widget border and outline color
* **Focus Outline Color** - Highlight color for focused elements
* **Card Radius** - Border radius for widget container
* **Button Radius** - Border radius for buttons
* **Popup Position** - Widget placement on webpage

<img src="https://mintcdn.com/rizler/MmyoFL0ur9BfFPdZ/images/ai/AI-agent/AI-widget/apperance.png?fit=max&auto=format&n=MmyoFL0ur9BfFPdZ&q=85&s=b524b516ba5c33badc8e701fee78bd32" alt="" width="481" height="610" data-path="images/ai/AI-agent/AI-widget/apperance.png" />

### ✏️ Text Contents Configuration

#### 📝 Button Text Customization

* **Start Call Button** - Text displayed on call initiation button (default: "Start a call")
* **End Call Button** - Text shown when call ends (default: "Call ended")
* **Call to Action** - Header text to engage users (default: "Need help?")
* **Speaking Status** - Text displayed during active calls (default: "Agent is speaking")

<img src="https://mintcdn.com/rizler/MmyoFL0ur9BfFPdZ/images/ai/AI-agent/AI-widget/content.png?fit=max&auto=format&n=MmyoFL0ur9BfFPdZ&q=85&s=a4fd9b3dba1f0ced4e01be7617ab9be4" alt="" width="775" height="603" data-path="images/ai/AI-agent/AI-widget/content.png" />

### ⚡ Quick Actions

<CardGroup cols={2}>
  <Card title="Copy Embed Code" icon="code">
    Get JavaScript code for website integration
  </Card>

  <Card title="Customize Appearance" icon="palette">
    Configure colors, text, and visual elements
  </Card>

  <Card title="Upload Avatar" icon="image">
    Add custom avatar image for widget interface
  </Card>

  <Card title="Save Configuration" icon="floppy-disk">
    Apply changes and update widget settings
  </Card>
</CardGroup>