Customization & Branding

Branding Options

All colour and logo controls live under Event settings → Colors & Styling.

Theme presets

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:

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.

Light vs. dark mode

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.)

Surface colours

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.

Text colour

Sets the colour of headings (event name) and standard form field labels. Secondary "muted" text (duration, helper hints) stays subtly dimmer for hierarchy.

Button background + text

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

Calendar selected day

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.

Button label

Customise the main CTA button copy (separate from the colour fields above):

1. Go to event settings > Customization
2. Find Button Text
3. Enter your custom text

Examples:

• "Continue" (default)
• "Check Availability"
• "Next Step"
• "See Available Times"

Company logo

Display your logo on booking pages:

1. Go to Settings > Company or event settings
2. Upload your logo image
3. Recommended size: 200x50px or similar aspect ratio
4. Supported formats: PNG, JPG, SVG

Form Customization

Form Style

Choose between form layouts:

Configure in event settings under Form Style.

Calendar Layout

Choose how the calendar displays:

Configure in event settings under Calendar Layout.

Field Labels

Toggle field label visibility:

• Labels On: Clear labels above each field
• Labels Off: Clean look, relies on placeholders

Configure under Show Field Labels.

Messaging Customization

Step Labels

Customize the step indicator text:

Calendar Overlay Message

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"

Confirmation Page

Internal Confirmation

The default confirmation shows:

• Success message
• Meeting details
• Add-to-calendar buttons
• Optional video embed

Confirmation Text

Customize the two lines shown at the top of the confirmation page:

1. Go to event settings > Confirmation > Confirmation Page Texts
2. Edit the Confirmation Page Headline (default: "Your meeting is scheduled")
3. 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:

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.

Confirmation Video

Add a video to your confirmation page:

1. Go to event settings > Confirmation
2. Find Confirmation Video Embed
3. Paste your embed code (YouTube, Vimeo, Loom, Wistia)

Example use cases:

• Thank you message from you
• What to expect on the call
• Preparation instructions

Confetti Animation

Add celebration confetti when booking completes:

1. Go to event settings > Confirmation
2. Toggle Show Confetti on

Adds a fun visual celebration moment.

External Confirmation

Redirect to your own page after booking:

1. Enable External Confirmation
2. Enter your Redirect URL
3. Booking data is passed as URL parameters

See Booking Flow for parameter details.

Event Information Display

Show Event Info After Step 1

Toggle whether event details show on the calendar step:

• On: Sidebar shows event name, duration, description
• Off: Cleaner layout, more space for calendar

Show Event Info on Slides

For slide-style forms, show event details during form completion:

• On: Persistent event info sidebar
• Off: Full focus on form fields

Advanced Customization

Custom CSS (if supported)

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.

URL Parameters for Pre-fill

Pass data to pre-populate fields:

/book/abc123/call?name=John&email=john@example.com

Useful for:

• Links from marketing emails
• CRM integration
• Personalized landing pages

Design Best Practices

Brand Consistency

• Use your exact brand colors
• Match fonts where possible
• Keep logo high-quality

Clear Communication

• Use descriptive step labels
• Make button text action-oriented
• Explain what happens next

Mobile Optimization

• Test on mobile devices
• Ensure tap targets are large enough
• Verify text is readable

Accessibility

• Ensure sufficient color contrast
• Don't rely only on color for information
• Keep forms simple and clear

Preview Changes

Before publishing:

1. Use the preview function in event settings
2. Test the booking flow end-to-end
3. View on different screen sizes
4. Verify all customizations appear correctly

Per-Event vs. Global Settings

Troubleshooting

Logo Not Showing

• Verify logo is uploaded
• Check Show Logo is enabled
• Ensure image format is supported
• Try re-uploading

Colors Not Applying

• Clear browser cache
• Verify hex code is valid
• Check preview vs. live

Custom Text Not Displaying

• Save changes and refresh
• Check for character limits
• Verify correct field is edited

Related Guides

• Booking Flow Overview - The complete prospect experience
• Embedding on Your Website - Add styled widget to your site
• Creating Events - Full event configuration