Widget demos

This page stands in for a client's website: system font, its own colors, nothing from Warm Handoff. Each demo loads the widget against an in-memory booking provider with a fixed clock, so what you see here is exactly what the E2E suite tests.

• Light preset

  The default look. Zero-JS triggers, programmatic deep links, "Powered by" on.

  Proves: the full new-patient and returning flows, declined-card and expired-session recovery, keyboard trap and focus return.

• Dark preset

  Same flow on a dark host page with the dark preset and the bone mark.

  Proves: the dark preset keeps AA contrast and the mark switches to bone.

• Custom theme

  A client brand: their tokens, their font, no Warm Handoff mark anywhere.

  Proves: the widget carries the client's brand; no terracotta, no "Powered by", their web font loaded once.

• Page mode

  The flow rendered inline for a /book-an-appointment style page. No dialog chrome.

  Proves: inline rendering with no scrim, no close button and no body scroll lock.

• Deep link

  Opens straight into scheduling from the URL. Try #book too.

  Proves: URL params and the #book hash auto-open, skipping the steps they answer.

• Analytics

  Every dataLayer push, printed as it happens.

  Proves: booking_step and booking_complete reach the dataLayer with Mantality's param schema.

• Remote config

  Boots with a widget id; the config comes from the admin API on port 3100.

  Proves: config loads from the API, the booking is recorded server-side and funnel events are batched to it.

Flow v2

The feature-checklist flow (flow.version: 2): the same widget.js, a lazy chunk for the v2 screens, the same events and analytics.

• Flow v2

  Light preset, all eleven features on, clinic content over the in-memory catalog.

  Proves: upgrade with undo, the downsell sheet on Back, a cross-sell add-on, trust blocks, real slots, card checkout and the confirmation, with v1-compatible booking_step and booking_complete events.

• Flow v2 dark

  The same flow on a dark host page with the dark preset and the bone mark.

  Proves: the v2 tokens (danger, success, scrim) derive from the dark preset and keep AA contrast.

• Flow v2 page mode

  The v2 screens rendered inline for a /book-an-appointment style page.

  Proves: inline rendering with no scrim, no close button and no body scroll lock.

• Flow v2 minimal

  Only the required features: service, time, details.

  Proves: the choice, location and add-on steps are skipped and no offer or trust block renders.

• Flow v2 remote config

  The published Mantality config from the admin API, switched to flow v2 with configPatch.

  Proves: a v2 booking is recorded with POST /w/:id/bookings (201) and funnel events batch to the API unchanged.

Client previews

Real clinics, their own menu, on made-up availability. Nothing on these pages can create an appointment.

• My Wellness Studio

  A stand-in for mywellnessstudio.com running the Guided flow on their real Zenoti menu against the in-memory provider.

  Proves: the studio's 24 bookable treatments with their own prices and durations, variant add-ons, no card at checkout with their no-show policy, treatment cards deep-linking by name, and a confirmation marked PREVIEW.

• Server transport

  The seeded My Wellness Studio widget with no inline adapter: every provider call is POST /w/:id/provider/* on the admin.

  Proves: the RemoteAdapter runs both flows unchanged, sessions travel as ids, no credential or card reaches the browser, and a 410 on getTimes recovers calmly.

Embed

<script type="module" src="https://cdn.warmhandoff.io/v1/widget.js" data-widget="wh_…"></script>
<button data-wh-open>Book now</button>