Widget Reference

All data-* attributes and theming options for the EarlyPass embeddable widget.

Basic embed

Drop the script tag anywhere in your HTML. The widget renders at that location.

<script
  src="https://api.earlypass.app/widget/widget.js"
  data-campaign="your-slug"
  async
></script>

Or use the custom element directly (useful when you need finer placement control):

<script src="https://api.earlypass.app/widget/widget.js" async></script>
<early-pass data-campaign="your-slug"></early-pass>

Data attributes

Attribute	Required	Default	Description
`data-campaign`	Yes	—	Your campaign slug (found in the dashboard)
`data-theme`	No	`light`	Visual theme: `light` or `dark`
`data-accent`	No	`#4f46e5`	Accent colour for buttons and highlights (any CSS colour value)

Theming examples

Dark theme

<script
  src="https://api.earlypass.app/widget/widget.js"
  data-campaign="your-slug"
  data-theme="dark"
  async
></script>

Custom accent colour

<script
  src="https://api.earlypass.app/widget/widget.js"
  data-campaign="your-slug"
  data-accent="#10b981"
  async
></script>

Dark theme with custom accent

<script
  src="https://api.earlypass.app/widget/widget.js"
  data-campaign="your-slug"
  data-theme="dark"
  data-accent="#818cf8"
  async
></script>

Style isolation

The widget renders inside a Shadow DOM. This means:

Your page CSS cannot leak into the widget
The widget CSS cannot leak into your page
No class name conflicts

The trade-off is that you cannot override widget styles from outside. Use data-accent and data-theme for visual customisation.

Widget states

The widget has four states, each rendered automatically:

State	Shown when
Form	Visitor has not yet signed up
Verification pending	Email submitted, waiting for verification click
Dashboard	Email verified — shows position, referral link, and leaderboard
Invited	User has been invited (access granted) via the dashboard

State is persisted in localStorage so the widget remembers returning visitors.

Performance

Bundle size: < 20 KB gzipped
Loads asynchronously — never blocks your page render
No external runtime dependencies (vanilla TypeScript, compiled to a single IIFE)
Served with immutable cache headers when using the versioned URL (/widget/widget.v{hash}.js)

Self-hosted widget URL

If you're self-hosting EarlyPass, point the src at your own domain:

<script
  src="https://your-domain.com/widget/widget.js"
  data-campaign="your-slug"
  async
></script>

Domain restriction

If you set a Product URL on your campaign (in the dashboard under Settings), the widget API will only accept signups from that origin. Requests from other origins receive a 403 Forbidden response.

This prevents third parties from embedding your widget on unrelated pages. Leave Product URL blank to allow embeds from any origin (useful during development).