@clearestimates/widget NPM

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:

Entering their ZIP code
Selecting the projects they're interested in
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:

They enter their ZIP code (must be a valid 5-digit US ZIP code)
They see a list of available projects for their area
They select projects and quantities
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