Embed Widget

Features

• Visitor Management: Token validation, visitor initialization, and session tracking
• Real-time Updates: Server-sent events for live status updates
• Video Calling: Daily.co integration for video calls
• Page Visibility: Automatic activity tracking based on page visibility

Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

1. Install dependencies:

npm install

2. Start development server:

npm run dev

3. Build for production:

npm run build

The built files will be in the dist/ directory.

Usage

The embed widget can be included in any website by adding a script tag:

<script src="https://cdn.jsdelivr.net/gh/lukesteinbicker/embed@main/embed.js?token=your_embed_token"></script>

Or with a data attribute:

<script src="https://cdn.jsdelivr.net/gh/lukesteinbicker/embed@main/embed.js" data-token="your_embed_token"></script>

Custom styling (dashboard-managed)

Customers brand the widget from the dashboard — no markup changes. The styling is delivered in the POST /api/visitors/initialize response under a branding key and applied at runtime:

{
  "success": true,
  // ...existing visit fields...
  "branding": {
    "base": "light",      // "light" | "dark"  (the light/dark base palette)
    "accent": "#e11d2a",  // optional hex brand color; derives special/CTA/tint shades
    "shape": "rounded"    // "rounded" | "square" | "pill"  (border shape)
  }
}

All three fields are optional and validated client-side (theme/theme.ts → parseBranding): anything malformed is dropped and falls back to defaults (base falls back to the script-tag data-theme, shape to rounded, no accent). So the widget renders identically to before until the dashboard sets branding.

How it maps:

• accent becomes the brand/special color and the call CTA (constructive), with a darker hover shade and a low-saturation bubble tint derived automatically (resolveTheme in theme/theme.ts).
• shape selects a radius scale (--radius-card/-bubble/-control/-sm) that the components consume.

The theming layer lives in src/theme/: theme.ts is the pure model (palettes, shape presets, color math, resolveTheme), globalStyles.ts is the static CSS reset + animations, and apply.tsx applies the resolved variables to the DOM. Colors are HSL triplets so hsl(var(--token) / alpha) compositing keeps working.

API Integration

The widget integrates with the following API endpoints:

• POST /api/visitors/initialize - Initialize visitor session (also returns branding)
• GET /api/visitors/status - Get current visitor status
• POST /api/visitors/status - Update visitor status
• GET /api/visitors/events?visitorId={visitorId} - Server-sent events stream