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

# Widget builder

Build and customize web chat widgets for your website with drag-and-drop builder.

## Overview

Widget Builder allows you to:

* Create custom chat widgets
* Customize appearance
* Configure behavior
* Deploy to websites
* Track performance

## Getting Started

1. Navigate to **Widget Builder**
2. Click **Create Widget**
3. Choose starting template
4. Customize appearance
5. Configure behavior
6. Deploy to website

## Design Customization

### Color Theme

1. Open widget settings
2. Click **Colors**
3. Customize:
   * Primary color
   * Secondary color
   * Text color
   * Background
4. Apply theme

### Font & Typography

1. Go to **Fonts**
2. Choose font family
3. Set sizes
4. Adjust line height
5. Save styles

### Widget Size

1. Open **Dimensions**
2. Set:
   * Width (px or %)
   * Height
   * Position (bottom-right, etc)
3. Preview on device sizes

## Behavior Configuration

### Welcome Message

1. Click **Welcome**
2. Enter greeting text
3. Add emoji or image
4. Set auto-show delay
5. Save

### Operating Hours

1. Go to **Hours**
2. Set business hours
3. Add offline message
4. Enable auto-reply
5. Save

### Notifications

1. Click **Notifications**
2. Enable sound alerts
3. Set notification text
4. Configure desktop alerts
5. Save

## Advanced Features

### Custom Fields

Collect information from visitors:

1. Click **Forms**
2. Add custom fields
3. Set required fields
4. Add validation
5. Save

### Automated Messages

1. Go to **Automations**
2. Create triggers
3. Set messages
4. Configure delays
5. Activate

### Routing

1. Click **Routing**
2. Set department/team
3. Configure queue
4. Set SLAs
5. Save

## Integration

### Get Installation Code

1. Click **Deploy**
2. Copy script tag
3. Add to website HTML
4. Before `</body>` tag
5. Publish

### Supported Platforms

* Websites (HTML/CSS/JS)
* WordPress
* Shopify
* Webflow
* Custom CMS

## Testing

### Preview Widget

1. Click **Preview**
2. Test on desktop
3. Test on mobile
4. Test on tablet
5. Verify all features

### Send Test Message

1. Open preview
2. Send test message
3. Verify in dashboard
4. Check notifications
5. Confirm delivery

## Analytics

### Widget Performance

1. Navigate to **Analytics**
2. View:
   * Impressions (views)
   * Conversations started
   * Average response time
   * Satisfaction rating
3. Export data

## Best Practices

* Match brand colors
* Keep welcome message short
* Test on all devices
* Monitor satisfaction ratings
* Update messages regularly
* A/B test designs
* Track conversion metrics