Widget Documentation

Embed Sift on any webpage. One script tag. Zero style conflicts.

Quick Start

Add this script tag to your HTML:

<script
  src="https://siftforms.com/widget/v1.js"
  data-schema-id="YOUR_SCHEMA_ID"
  data-api-key="iq_pub_xxxxxxxxxxxxx"
  async
></script>

The widget renders inline, right after the script tag. It uses Shadow DOM so your page styles won't affect it.

Configuration

Configure the widget via data attributes on the script tag:

Attribute	Required	Description
data-schema-id	Yes	The UUID of your form
data-api-key	Yes	Your public API key (iq_pub_)
data-api-url	No	Custom API URL (default: https://siftforms.com)

How It Works

User types (or speaks) their description in the text area
AI extracts structured data mapped to your form fields
Extracted fields are displayed with confidence indicators
If required fields are missing, the widget shows input fields for ONLY those fields
User confirms and data is submitted to your dashboard

Voice Input

The widget includes a microphone button that uses the Web Speech API for voice-to-text input. Users can speak instead of type. Supported in Chrome, Edge, and Safari.

Shadow DOM

The widget renders inside a Shadow DOM, which means your page's CSS won't affect the widget and vice versa. The widget has its own self-contained styles.

Platform Install Guides

Step-by-step embed instructions for every major platform:

Shopify (Custom Liquid section)
WordPress (Custom HTML block)
Webflow (Embed component)
Squarespace (Code Block)
Wix (Custom Element)
React / Next.js (useEffect pattern)

View all platform guides →

Size

The widget bundle is ~21KB (8KB gzipped). It uses Preact instead of React for minimal footprint.

State Machine

The widget follows a strict state flow:

idle → composing → extracting → review/followup → confirming → done

idle: Empty textarea, waiting for input
composing: User is typing or speaking
extracting: AI is processing the text
followup: Missing required fields need user input
done: Submission confirmed