22 / Booking widget

Embedded booking widget primitives

Calendly-style booking widget customers drop into a marketing site. Each surface is a focused, embeddable primitive — distinct from the workshop-internal booking forms and bay schedule.

Production answer

Embedded booking widget primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Embedded booking widget primitives states
Generative search brief

Embedded booking widget primitives: Calendly-style booking widget customers drop into a marketing site. Each surface is a focused, embeddable primitive — distinct from the workshop-internal booking forms and bay schedule.

Index · 14 primitives + 1 composition

Pick a surface

Each primitive renders full scale in its own sub-route with realistic Oak Flats services, AUD prices, bay 1/2/3 availability, and Sydney-time slot windows.

01

Service picker card

Single-service tile with duration, price, and capacity chips. Brand rail tints with the chosen service tone.

Inspect primitive states 02

Booking date selector

Horizontal scroll strip of bookable dates with per-day available-slot count and end-arrow chevrons.

Inspect primitive states 03

Time slot grid

AM / PM banded grid with availability tone — Available / Few left / Full / Closed — and a 12h/24h toggle.

Inspect primitive states 04

Duration picker

30 / 45 / 60 / 90 / 120 minute chips with per-duration AUD price.

Inspect primitive states 05

Add-on chip row

Optional extras like pre-inspection, loaner car, sound demo, or detail with running total chip.

Inspect primitive states 06

Customer details form

Name, mobile, email, vehicle (rego or make + model), notes. Single embedded mini-form.

Inspect primitive states 07

Booking confirmation card

Final card with reference, service, date+time, bay, customer, add-to-calendar buttons, and QR.

Inspect primitive states 08

Booking embed snippet

iframe / popup / inline tabbed code generator with a customize-styling toggle.

Inspect primitive states 09

Time zone selector

Searchable zone list with the current time zone chip and an auto-detect link.

Inspect primitive states 10

Recurring booking option

Weekly / fortnightly / monthly / custom frequency, occurrences stepper, end-date picker.

Inspect primitive states 11

Group booking party size

Party size stepper with per-person price, total, and a group-discount chip when threshold met.

Inspect primitive states 12

Reschedule modal

Modal with original date+time recap, new date selector, new time slot grid, and reason chips.

Inspect primitive states 13

Cancellation flow

Three-step flow: reason → policy summary → confirm. Refund window chip drives the tone.

Inspect primitive states 14

No-show policy card

Numbered policy rules, cancellation deadline chip, reschedule allowance chip, and contact CTA.

Inspect primitive states FULL

Full booking flow

Bonus composition stitching every primitive into a single five-step booking journey with the no-show policy as the footer.

Review full composition