Wrkbelt Scheduler
What It Is
The Wrkbelt Scheduler is an embeddable booking experience deployed via CDN. A single <script> tag on a customer's website loads a versioned, self-contained React application inside a Shadow DOM — completely isolated from the host page's styles and scripts.
The scheduler connects to the business's field-service management (FSM) software in real time, pulling live availability and pushing confirmed bookings directly into the vendor system.
Who It Serves
- Home-service businesses (HVAC, plumbing, electrical) using ServiceTitan, HouseCall Pro, or no FSM at all
- Law firms, medical practices, and other service verticals — the booking engine is vertical-aware but not vertical-locked
- Marketing agencies managing booking experiences across multiple client brands
- Multi-brand portfolios (e.g., 30+ locations under one holding company) that need centralized control with per-brand customization
Key Capabilities
Customer-Facing Booking Interface
A lightweight, CDN-delivered script that renders a modal booking experience on the customer's website.
- Conversation-like service selection — Graph-based question/answer trees guide customers to the right service
- Real-time availability — Calendar and timeslot data fetched live from the vendor FSM
- Step-by-step booking flow — Zip code verification → Service selection → Additional details → Timeslot → Customer info → Summary → Confirmation
- Express links — Pre-configured URLs that skip steps or pre-fill data for marketing campaigns
- URL-based routing — Different booking flows served based on the page URL, campaign parameters, or custom rules
- Shadow DOM isolation — Styles and scripts are fully encapsulated, preventing conflicts with host websites
- Cross-device responsive — Works on desktop, tablet, and mobile
Administrative Dashboard
The control center, accessed through the main Wrkbelt web application.
- Booking flow builder — Visual drag-and-drop editor for creating multi-step booking experiences
- Question & service management — Build question libraries, map answers to services, configure graph-based routing
- Express link management — Generate, track, and manage deep-link URLs for campaigns
- Analytics suite — Conversion funnels, step-by-step drop-off analysis, temporal reporting, revenue attribution
- Health summary — At-a-glance performance metrics with alert indicators
- Configuration management — Theme customization, integration settings, scheduling rules
Integration Engine
Connects the scheduler to external systems via a strategy-based backend architecture.
| Integration | Capabilities |
|---|---|
| ServiceTitan | Job type sync, real-time availability, customer matching, booking creation, invoice tracking |
| HouseCall Pro | (In progress) Job type sync, availability, booking creation |
| No-ERP Mode | (Planned) Standalone scheduling for businesses without FSM software |
| Stripe | Payment processing for booking deposits |
Session Recording & Analytics
Every booking interaction is tracked end-to-end for analytics and optimization.
- Launch context — URL, referrer, UTM parameters, device info captured at session start
- Step progression — Time spent on each step, navigation direction, abandonment points
- Event queue — All user interactions queued and streamed via WebSocket to the backend
- Marketing attribution — Campaign parameters preserved through the entire booking funnel and tied to actual revenue (invoices, not just dispatch fees)
Deployment Model
The scheduler is deployed as static assets to AWS S3 + CloudFront via SST (Serverless Stack). Each deploy:
- Builds versioned, content-hashed bundles (Vite)
- Uploads artifacts to S3 with explicit
Cache-Controlheaders - Publishes a
version-manifest.jsonpointing to the current entry chunk - Invalidates CloudFront edge cache
The entry script (scheduler.js) is never cached — it always fetches the latest manifest, which in turn loads the correct versioned chunk. This ensures customers always get the latest version within seconds of a deploy, while versioned assets are aggressively cached at both the CDN edge and browser layer.
For full technical details, see the Architecture document.
Codebase Location
| Component | Path |
|---|---|
| CDN entry + infra | apps/products/scheduler-cdn/ |
| React UI components | libs/ui/ui-components/src/lib/products/scheduler/ |
| Backend API services | libs/api/services-api/src/lib/scheduler/ |
| Shared types & logic | libs/shared/utils-booking-flow-data-logic/ |