Spark Chat Widget Demo

Features

• Draggable FAB - Move the chat button anywhere on screen
• Dark Mode Sync - Widget mirrors the page's dark/light theme in real-time via postMessage
• JWT Context - Theme, session, and messages are encrypted in a JWT token for secure cross-domain handoff
• Multi-Domain - Share the same chat session across different domains via signed URL
• Session Continuity - Messages persist across page reloads and domain transfers
• Auto Language Detection - Welcome message in your language
• Mobile Responsive - Full-screen on mobile devices

How to Embed on Your Website

Add this single line to your HTML:

<script src="https://your-domain.com/widget.js" 
        data-api-url="https://your-domain.com"
        data-api-token="YOUR_API_TOKEN"
        data-tenant="your-tenant"
        data-theme="system"
        data-accent="blue"
        data-context-secret="your-shared-hmac-secret"
        data-allowed-origins="https://app.example.com"
        data-position="bottom-right"
        data-language="sk"></script>

For custom brand colors, set data-accent="custom" and add hex values:

<script src="https://your-domain.com/widget.js" 
        data-api-url="https://your-domain.com"
        data-tenant="acme"
        data-accent="custom"
        data-color-primary="#e63946"
        data-color-primary-dark="#c1121f"
        data-color-bg="#ffffff"
        data-color-text="#1d3557"
        data-dark-color-primary="#ff6b6b"
        data-dark-color-primary-dark="#e63946"
        data-dark-color-bg="#0d1b2a"
        data-dark-color-text="#e0e1dd"></script>

Configuration Options

data-api-token	Bearer token for API access
data-api-url	Your API server URL
data-tenant	Tenant identifier for multi-tenancy
data-position	bottom-right, bottom-left, top-right, top-left
data-theme	light, dark, system (mirrors parent via postMessage)
data-accent	blue, red, gold, purple, green, pink — or "custom" to use hex colors below
data-color-primary	Custom primary hex for light theme (e.g. #3b82f6). Requires data-accent="custom".
data-color-primary-dark	Darker shade of primary for hover/gradients (light theme)
data-color-bg	Custom background color hex (light theme)
data-color-text	Custom text color hex (light theme)
data-dark-color-primary	Custom primary hex for dark theme
data-dark-color-primary-dark	Darker shade of primary for hover/gradients (dark theme)
data-dark-color-bg	Custom background color hex (dark theme)
data-dark-color-text	Custom text color hex (dark theme)
data-language	auto (detects from browser) or specific: en, cs, de, etc.
data-context-secret	Shared HMAC secret for JWT signing (must match across all domains)
data-allowed-origins	Comma-separated list of allowed origins for postMessage (security)

Cross-Domain Session Handoff (JWT Contract)

The widget supports secure cross-domain session continuity. When a user clicks the share button in the chat header, a JWT-signed URL is generated containing:

• Theme state - dark/light mode and accent color
• Session ID - unique conversation identifier
• Tenant - multi-tenant isolation
• Messages - recent chat history (optional)

The JWT is signed with HMAC-SHA256 using the shared data-context-secret. Any domain with the same secret can verify and consume the token.

URL format: https://other-domain.com/?spark_ctx=eyJhbGciOi...

JWT payload:
{
  "v": 1,
  "theme": "dark",
  "effectiveTheme": "dark",
  "accent": "blue",
  "sessionId": "sess_abc123",
  "tenant": "demo",
  "messages": [...],
  "iss": "https://origin-domain.com",
  "iat": 1706000000,
  "exp": 1706003600
}

postMessage API

The parent page can control the widget in real-time via window.postMessage:

// Push theme/context update to widget
window.postMessage({
  type: 'spark:context',
  payload: {
    theme: 'dark',
    effectiveTheme: 'dark',
    accent: 'blue'
  }
}, '*');

// Request widget state
window.postMessage({
  type: 'spark:request-state'
}, '*');

// Listen for widget events
window.addEventListener('spark:message', (e) => {
  console.log('Widget event:', e.detail);
});

Try Dragging the Chat Button!

You can drag the floating chat button to any position on the screen. Click and hold to drag, then click to open the chat. The position will be remembered even after you refresh the page.