--- title: "Customization & Branding" description: "Make your booking pages match your brand with custom colors, logos, and messaging." url: https://help.salescal.ai/en/articles/6-customization-and-branding collection: "Booking Widget" updated: 2026-10-19 language: en --- # Customization & Branding Make your booking pages match your brand with custom colors, logos, and messaging. ## 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:

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

Control	Affects	Default (light / dark)
Form background	Outer container, all step panels behind the form and calendar	`#FFFFFF` / `#0A0A0B`
Border	Card edge, dividers between form/calendar panels, input borders	`#E4E4E7` / `#27272A`

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.

Default (light)	Default (dark)
`#0F172A`	`#FAFAFA`

### 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:

Style	Description
Stepped	Traditional multi-field form with steps
Slide	One field per screen, immersive experience

Configure in event settings under **Form Style**. ### Calendar Layout 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**. ### 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:

Setting	Default	Custom Example
Step 1 Label	"Fill out the form"	"Tell us about yourself"
Step 2 Label	"Book your event"	"Choose your time"

### 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:

Variable	Inserts
`{firstname}`	The prospect's first name
`{email}`	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. ### 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](https://help.salescal.ai/en/articles/6971cfbf038df8f81cc4b46b.md#external-confirmation-pages) 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: ```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

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

## 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](https://help.salescal.ai/en/articles/6971cfbf038df8f81cc4b46b.md) - The complete prospect experience - [Embedding on Your Website](https://help.salescal.ai/en/articles/6971d1c57a0c739e5aa3af94.md) - Add styled widget to your site - [Creating Events](https://help.salescal.ai/en/articles/6971f29738cb61cc9900fca7.md) - Full event configuration