# Clear Estimates Widget

A user-friendly widget for generating construction and home improvement cost estimates.

## What This Widget Does

This widget allows your website visitors to get instant cost estimates for home improvement projects by:

1. Entering their ZIP code
2. Selecting the projects they're interested in
3. Seeing detailed cost breakdowns

## Installation

```bash
npm install @clearestimates/widget
```

Don't forget to include the styles:

```jsx
import '@clearestimates/widget/style.css';
```

## Quick Start

Here's the simplest way to add the widget to your website:

```jsx
import { EstimateWidget } from '@clearestimates/widget';
import '@clearestimates/widget/style.css';

function MyPage() {
  return (
    <div>
      <EstimateWidget 
        apiKey="your-api-key" 
        apiUrl="https://api.clearestimates.com" 
      />
    </div>
  );
}
```

## Display Options

The widget can be displayed in two ways:

### 1. Inline Mode (Default)

The widget appears directly on your page:

```jsx
<EstimateWidget 
  apiKey="your-api-key" 
  apiUrl="https://api.clearestimates.com" 
  style="inline" 
/>
```

### 2. Popover Mode

The widget appears as a button that opens a dialog when clicked:

```jsx
<EstimateWidget 
  apiKey="your-api-key" 
  apiUrl="https://api.clearestimates.com" 
  style="popover" 
/>
```

## How It Works

When a user interacts with the widget:

1. They enter their ZIP code (must be a valid 5-digit US ZIP code)
2. They see a list of available projects for their area
3. They select projects and quantities
4. The widget calculates and displays a detailed estimate

## Customization

The widget is designed to work with minimal configuration. The only required settings are:

- `apiKey`: Your Clear Estimates API key
- `apiUrl`: The URL for the Clear Estimates API

## Technical Details (For Developers)

This widget is built with:

- React 19 (works with React 18+)
- TypeScript
- Tailwind CSS
- Ark UI components
- React Hook Form with zod validation

The widget uses Shadow DOM by default to prevent style conflicts with your website.

## Common Problems and Solutions

### Widget Not Showing Up

- Make sure you've imported the CSS file: `import '@clearestimates/widget/style.css'`
- Check your API key is correct
- Look for errors in the browser console

### ZIP Code Errors

- ZIP codes must be exactly 5 digits
- Only US ZIP codes are supported

### No Projects Available

- Some projects may not be available in all ZIP codes
- Check your API connection is working

## Need Help?

If you're having trouble with the widget, please contact support at [support@clearestimates.com](mailto:support@clearestimates.com).