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

npm install @clearestimates/widget

Don't forget to include the styles:

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

Quick Start

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

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:

<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:

<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 [email protected].