Widget Theming

The booking widget supports three starter themes that ship out of the box, plus eight CSS variables you can override to match your brand without writing custom CSS.

This works the same way on the hosted booking page and the embedded widget — both surfaces read the same theme JSON from your widget configuration.

Starter themes

Pick a theme from Dashboard > Bookings > Widgets > > Theme.

You can also pass data-theme="light", data-theme="dark", or data-theme="minimal" on the embed <script> tag to override the dashboard default per-page.

CSS variable overrides

The eight variables you can override (in Dashboard > Bookings > Widgets > > Theme > Advanced):

These are the only style hooks we expose. Arbitrary CSS injection is not supported — keeping the surface small is what makes the widget safe to drop into Squarespace and Wix templates that have aggressive global stylesheets.

Branding fields (not CSS)

Outside of CSS variables, you can also set:

• Display name — shows in the dashboard, not on the public page.
• Logo URL — displayed in the top-left of the booking flow. Recommended: 200×60 PNG with transparent background.
• Hero image URL — full-width banner at the top of the model picker step. Recommended: 1600×600 JPG.
• Headline copy — one line, displayed below the logo. Default: "Book your ride."
• Subhead copy — one line, smaller text under the headline.
• Footer copy — appears below the booking flow. Useful for shop hours, address, "Call us at…"

Per-widget themes

If you run multiple widgets (e.g. one for your main shop and one for a seasonal popup), each widget has its own theme JSON. You can have:

• A front-beach-bikes widget with the Light theme and your usual logo.
• A front-beach-bikes-events widget with the Dark theme and a different logo for guided tours.

Both widgets read from the same vehicle models and pricing tiers, so you do not need to duplicate inventory.

Theme JSON shape (advanced)

If you use the API to manage widgets programmatically, the theme is a JSON object on booking_widgets.theme:

{
  "preset": "light",
  "logoUrl": "https://cdn.frankebikes.com/logo.png",
  "heroUrl": "https://cdn.frankebikes.com/hero.jpg",
  "headline": "Book your e-bike",
  "subhead": "Beach cruisers, fat tires, and tandems — all electric.",
  "footer": "Front Beach Bikes · 12 Front Street · (843) 555-0143",
  "vars": {
    "--primary": "#0ea5e9",
    "--accent": "#facc15",
    "--radius": "8px"
  }
}

Only the variables you specify override the preset's defaults — anything you omit falls back to the preset.

Live preview

The dashboard widget editor includes a side-by-side live preview. Change a color, a logo URL, or a piece of copy and the preview updates immediately — you can verify everything looks right before you publish.

Accessibility

All three starter themes meet WCAG AA contrast on body text and CTAs. If you override --primary or --bg, the live preview flags any combination that drops below 4.5:1 contrast.

Related guides

• Embedding the Widget
• Hosted Booking Page
• Getting Started