How to Customize Your Booking Page with Branding and CSS

Overview

Meetario lets you brand your public booking pages so they match your company's visual identity. With a paid plan, you can upload a logo, set a primary color, choose a font, and write custom CSS — all from Workspace Settings > Branding.

Your branding applies to two public pages:

Profile page — meetario.com/booking/your-username — lists all your active event types
Booking page — meetario.com/booking/your-username/event-slug — the calendar and booking form for a specific event type

Step 1: Upload Your Logo

Go to Workspace Settings > Branding. Click Choose to upload your logo. Supported formats: JPEG, PNG, GIF, SVG. After selecting a file, you can crop it to a square. The logo appears on your profile page above your name.

Step 2: Set Your Primary Color

Use the color picker or type a hex value (e.g. #FF6B35). This color is used for:

The event header gradient on booking pages
Selected calendar day and time slot backgrounds
Step indicator active states
Focus ring on form inputs
Event type card accents on your profile page
The CSS custom property --brand-color on the profile page

Step 3: Choose a Font

Select from: System Default, Inter, Roboto, Poppins, or Lato. The font is loaded from Google Fonts and applied to your public pages. System Default uses the visitor's operating system font.

Step 4: Write Custom CSS

The Custom CSS field lets you override any style on your public pages. Your CSS is injected inside a <style> tag on your profile and booking pages.

Important: CSS Safety

For security, Meetario validates your CSS before saving. The following are not allowed:

@import rules
url() values
expression()
javascript: protocol
HTML tags inside the CSS

Available CSS Classes — Profile Page

Your profile page (/booking/username) displays your avatar/logo, name, and a grid of event type cards.

Selector	Element
`.manager-avatar`	Your avatar circle (initials or image)
`.brand-logo`	Your uploaded logo image
`.event-type-card`	Each event type card container
`.event-color-bar`	Color accent strip at top of each card
`.event-icon`	Icon circle inside each event card
`.event-details`	Duration and location badges inside each card
`.event-detail-badge`	Individual badge (duration, location, price)
`.event-grid`	The grid layout wrapping all event cards
`.timezone-banner`	Top bar showing detected timezone

Available CSS Classes — Booking Page

The booking page (/booking/username/event-slug) shows the calendar, time slots, and booking form.

Selector	Element
`.booking-container`	Main page wrapper (max-width container)
`.booking-widget`	The white card containing event info sidebar
`.event-header`	Gradient header inside the sidebar with host info
`.user-avatar`	Host avatar circle in the sidebar
`.event-info-item`	Each info row (duration, location, price)
`.event-info-icon`	Icon circle in each info row
`.calendar-day`	Each day cell in the calendar grid
`.calendar-day.selected`	The currently selected calendar day
`.calendar-day.available`	Days with available slots (dot indicator)
`.calendar-day.disabled`	Days that cannot be selected
`.time-slot`	Each available time slot button
`.time-slot.selected`	The currently selected time slot
`.step-indicator`	The 3-step progress bar at the top
`.step`	Each step in the progress bar
`.step-number`	The numbered circle in each step
`.booking-step`	Each step content panel
`.form-input`	Form fields (name, email, custom fields)
`.powered-by`	The "Powered by Meetario" footer

CSS Custom Property

On the profile page, the primary brand color is available as a CSS custom property:

:root {
    --brand-color: #4F46E5; /* your primary color */
}

Use it in your custom CSS to keep things consistent:

.event-type-card {
    border-color: var(--brand-color);
}
.event-detail-badge {
    background-color: color-mix(in srgb, var(--brand-color) 10%, white);
    color: var(--brand-color);
}

Examples

Hide the "Powered by Meetario" footer

.powered-by {
    display: none;
}

Round event cards with a shadow

.event-type-card {
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

Change the calendar selected-day color

.calendar-day.selected {
    background-color: #E11D48 !important;
    border-radius: 50%;
}

Style time slots with rounded borders

.time-slot {
    border-radius: 999px;
    font-weight: 600;
}
.time-slot:hover {
    transform: scale(1.02);
}

Custom background and font size

body {
    background-color: #FAFAF9;
}
.booking-widget {
    font-size: 15px;
}

Tips

Use your browser's DevTools (F12) to inspect elements and find the exact class you want to style.
Use !important sparingly — only when you need to override inline styles set by the event type color.
Test your CSS on both desktop and mobile — open your booking link on your phone after saving.
Keep custom CSS concise. Complex CSS can break on future Meetario updates.
The --brand-color property is available on the profile page. On the booking page, colors are set via the event type's own color setting.