All colour and logo controls live under Event settings → Colors & Styling.
The fastest way to restyle the widget is to pick a preset. Six bundled themes set every colour at once (background, text, border, button, button text, calendar highlight, progress bar, and the light/dark mode flag) in one click:
Preset | Use case |
Classic Light | Default — clean white with dark buttons |
Classic Dark | Default — deep slate with light buttons |
Midnight | Navy + electric blue, B2B / enterprise feel |
Indigo | Soft indigo background, modern SaaS |
Trust Teal | Teal-and-calm palette for healthcare / finance |
Warm Sand | Warm cream + amber, coaching / consulting |
Each preset card shows a mini-preview of the form. Click any card to apply. The picker shows a small Custom badge as soon as you tweak any individual colour, so you can tell whether the widget is still on a preset or has been hand-tuned.
Presets have been chosen so every text-on-background pair meets WCAG 4.5:1 contrast in both light and dark variants.
The widget is rendered in either Light or Dark mode. Every colour control has a separate value for each — so a single widget can look completely different depending on which mode you've enabled.
Use the Light / Dark switch under the preset grid to pick which mode you're currently editing. The switch also sets the default mode for prospects who view your widget. (There is no system-preference auto-switch yet — you choose the mode the prospect sees.)
Control | Affects | Default (light / dark) |
Form background | Outer container, all step panels behind the form and calendar |
|
Border | Card edge, dividers between form/calendar panels, input borders |
|
Input fields and dropdowns automatically use a subtle (~4%) tint of the form background, so a single picker keeps every surface visually cohesive without you having to colour-match by hand.
Sets the colour of headings (event name) and standard form field labels. Secondary "muted" text (duration, helper hints) stays subtly dimmer for hierarchy.
Default (light) | Default (dark) |
|
|
Customise the primary action button (Continue, Confirm). Set the background as a solid colour or a 2-colour gradient (toggle inside the picker), then set the text colour independently. Both fields have a separate light-mode and dark-mode value.
This affects:
Continue button (form → calendar)
Confirm booking button (calendar → confirmation)
Animated confirm overlay on time slot buttons
The colour that highlights the day a prospect picks on the calendar (full and week-strip layouts both).
By default this is linked to your button colour — a "Use button colour" chip appears instead of a picker, and the highlight stays in sync if you change the button. Click Unlink to reveal a dedicated picker; click Link to reset to inherit again.
Customise the main CTA button copy (separate from the colour fields above):
Go to event settings > Customization
Find Button Text
Enter your custom text
Examples:
"Continue" (default)
"Check Availability"
"Next Step"
"See Available Times"
Display your logo on booking pages:
Go to Settings > Company or event settings
Upload your logo image
Recommended size: 200x50px or similar aspect ratio
Supported formats: PNG, JPG, SVG
Choose between form layouts:
Style | Description |
Stepped | Traditional multi-field form with steps |
Slide | One field per screen, immersive experience |
Configure in event settings under Form Style.
Choose how the calendar displays:
Layout | Description |
Full | Traditional monthly calendar grid |
Week | Horizontal 7-day strip, more compact |
Configure in event settings under Calendar Layout.
Toggle field label visibility:
Labels On: Clear labels above each field
Labels Off: Clean look, relies on placeholders
Configure under Show Field Labels.
Customize the step indicator text:
Setting | Default | Custom Example |
Step 1 Label | "Fill out the form" | "Tell us about yourself" |
Step 2 Label | "Book your event" | "Choose your time" |
When the form isn't complete, an overlay covers the calendar. Customize this message:
Default: "Please fill out the form before choosing your time slot"
Custom examples:
"Complete the form to see available times"
"Answer a few questions to unlock scheduling"
The default confirmation shows:
Success message
Meeting details
Add-to-calendar buttons
Optional video embed
Customize the two lines shown at the top of the confirmation page:
Go to event settings > Confirmation > Confirmation Page Texts
Edit the Confirmation Page Headline (default: "Your meeting is scheduled")
Edit the Confirmation Email Line (default: "A confirmation email has been sent to {email}")
Both fields support replacement variables, filled in with the prospect's details when they book:
Variable | Inserts |
| The prospect's first name |
| The prospect's email address |
For example, a headline of Thanks, {firstname}! shows "Thanks, Sarah!" on the confirmed page. The event-builder preview substitutes sample values so you can see the result while editing.
Add a video to your confirmation page:
Go to event settings > Confirmation
Find Confirmation Video Embed
Paste your embed code (YouTube, Vimeo, Loom, Wistia)
Example use cases:
Thank you message from you
What to expect on the call
Preparation instructions
Add celebration confetti when booking completes:
Go to event settings > Confirmation
Toggle Show Confetti on
Adds a fun visual celebration moment.
Redirect to your own page after booking:
Enable External Confirmation
Enter your Redirect URL
Booking data is passed as URL parameters
See Booking Flow for parameter details.
Toggle whether event details show on the calendar step:
On: Sidebar shows event name, duration, description
Off: Cleaner layout, more space for calendar
For slide-style forms, show event details during form completion:
On: Persistent event info sidebar
Off: Full focus on form fields
Some implementations support custom CSS:
/* Example custom styles */
.booking-widget {
font-family: 'Your Font', sans-serif;
}
.booking-button {
border-radius: 8px;
}Check your settings for custom CSS options.
Pass data to pre-populate fields:
/book/abc123/call?name=John&[email protected]Useful for:
Links from marketing emails
CRM integration
Personalized landing pages
Use your exact brand colors
Match fonts where possible
Keep logo high-quality
Use descriptive step labels
Make button text action-oriented
Explain what happens next
Test on mobile devices
Ensure tap targets are large enough
Verify text is readable
Ensure sufficient color contrast
Don't rely only on color for information
Keep forms simple and clear
Before publishing:
Use the preview function in event settings
Test the booking flow end-to-end
View on different screen sizes
Verify all customizations appear correctly
Setting | Scope | Location |
Company Logo | Global | Settings > Company |
Timezone | Global | Settings > Profile |
Button Color | Per-event | Event > Customization |
Form Style | Per-event | Event > Customization |
Step Labels | Per-event | Event > Customization |
Verify logo is uploaded
Check Show Logo is enabled
Ensure image format is supported
Try re-uploading
Clear browser cache
Verify hex code is valid
Check preview vs. live
Save changes and refresh
Check for character limits
Verify correct field is edited
Booking Flow Overview - The complete prospect experience
Embedding on Your Website - Add styled widget to your site
Creating Events - Full event configuration