@clearestimates/embed NPM

Clear Estimates Embed Package

This package provides an easy way to embed the Clear Estimates widget into any website using a simple script tag.

Overview

The embed package creates a JavaScript bundle that can be loaded directly in the browser without requiring a build step or React in your host application. It dynamically injects the widget into your page.

Usage

Basic Installation

Add this script to your HTML page:

<script 
  src="https://cdn.clearestimates.com/embed/estimate-builder.js" 
  data-estimate-embed-api-key="your-api-key-here"
  data-estimate-embed-api-url="https://api.clearestimates.com"
  data-estimate-embed-style="inline"
></script>

<!-- Add an element where you want the widget to appear -->
<div id="estimate-builder-container"></div>

Configuration Attributes

All configuration is done through data attributes on the script tag:

Attribute	Description	Required
`data-estimate-embed-api-key`	Your Clear Estimates API key	Yes
`data-estimate-embed-api-url`	API endpoint URL	Yes
`data-estimate-embed-style`	Display mode: "inline" or "popover"	No (defaults to "inline")

Display Modes

Inline Mode

The widget will be rendered directly in your page:

<script 
  src="https://cdn.clearestimates.com/embed/estimate-builder.js" 
  data-estimate-embed-api-key="your-api-key"
  data-estimate-embed-api-url="your-api-url"
  data-estimate-embed-style="inline"
></script>

Popover Mode

The widget will appear as a button that opens a popover dialog when clicked:

<script 
  src="https://cdn.clearestimates.com/embed/estimate-builder.js" 
  data-estimate-embed-api-key="your-api-key"
  data-estimate-embed-api-url="your-api-url"
  data-estimate-embed-style="popover"
></script>

Development

Prerequisites

Node.js 18+
pnpm

Commands

pnpm dev: Start development server
pnpm build: Build for production
pnpm preview: Preview the build locally
pnpm clean: Clean build artifacts

Project Structure

src/
├── index.tsx    # Main entry point
└── utils.ts     # Utility functions for configuration

Performance Considerations

The embed script is optimized for performance, but keep these best practices in mind:

Place the script near the end of your <body> tag to avoid blocking page rendering
Consider using the async attribute on the script tag
The "popover" mode has less impact on initial page load time

Troubleshooting

Script Not Loading

Check that the URL to the script is correct
Ensure there are no network errors in your browser's console

Widget Not Appearing

Verify that all required data attributes are set correctly
Check for any JavaScript errors in the browser console
Ensure you have an element with the ID estimate-builder-container for inline mode

react react-dom @clearestimates/widget

0.0.20

7 months ago

2.0.0

1 year ago

1.1.1

1 year ago