Adjust your booking page with CSS
Want your booking page to look and feel exactly like your brand? This article shows you how to customize the design using your brand colors or CSS. If you want your meetergo booking page to match your style, this is the place to start.
You can adjust your corporate colors (Corporate Identity) in the settings. Additionally, you have the option to change the design and formatting of the booking page using CSS classes.
How to change the appearance of your booking page
For simple adjustments, we offer some settings to customize the brand colors. Advanced users can customize the entire booking page using CSS!
- Go to your company settings
- In the middle column under "Branding", you can make design changes
3. Upload your company logo (optional - only for business cards/round-robin appointment types)
- Check the box next to "Use brand color in Booking". Click on the circle next to "Primary color" to select your color in the color picker
- Click on "Edit booking page CSS" to insert CSS. Read this article to learn more about how this works
The full class reference is also built into the booking page designer itself. Open the CSS editor and expand "CSS Class Reference" to browse all classes. Click any class to copy it to your clipboard.
Practical examples
Every element on the booking page carries a stable CSS class. Add your rules to the CSS editor and they apply to all your booking pages.
Hide the 12/24 hour time format toggle:
.booking-time-format-tabs {
display: none;
}
Change the background of the main container:
#bookingContainer {
background-color: #f2f2f2;
}
Round the time slot buttons and highlight the selected one:
.booking-time-slot-button {
border-radius: 9999px;
}
.booking-time-slot-button-selected {
font-weight: 700;
}
If a rule doesn't seem to apply, add !important to the value, for example color: white !important;. This overrides the page's default styles.
CSS class reference
These are the classes you can target, grouped by area of the booking page.
Layout & structure
#bookingContainer.booking-left-panel-wrapper.booking-left-panel.booking-left-panel-inner.booking-right-panel-wrapper.booking-right-panel.booking-right-panel-tabs
Funnel / routing forms
.booking-funnel.booking-funnel-card.booking-funnel-header.booking-funnel-footer.booking-funnel-steps-wrapper.booking-funnel-steps.booking-funnel-step-dot.booking-funnel-step-dot--active.booking-funnel-steps-count.booking-funnel-back-button.booking-funnel-next-button.booking-funnel-submit-button.booking-funnel-button-loading.booking-funnel-slide.booking-funnel-slide-header.booking-funnel-slide-title.booking-funnel-slide-description.booking-funnel-slide-back.booking-funnel-slide-content.booking-funnel-infobox-wrapper.booking-funnel-infobox.booking-funnel-options.booking-funnel-option.booking-funnel-option-selected.booking-funnel-option-card.booking-funnel-option-row.booking-funnel-option-image.booking-funnel-option-icon.booking-funnel-option-label.booking-funnel-option-content.booking-funnel-option-indicator.booking-funnel-option-text.booking-funnel-checkbox.booking-funnel-radio.booking-funnel-radio-selected.booking-funnel-form-wrapper.booking-funnel-form
Meeting information
.booking-title.booking-description-content.booking-company-logo-wrapper.booking-host-avatar.booking-host-name.booking-host-info-wrapper.booking-duration-info.booking-location-text.booking-location-info.booking-legal-details
Calendar & time selection
.booking-calendar.booking-calendar-month.booking-month-text.booking-calendar-weekday.booking-calendar-date-cell.booking-calendar-disabled-overlay.booking-calendar-disabled-tooltip.booking-calendar-disabled-text.booking-time-format-tabs.booking-time-scroll-inner.booking-time-tab-content.booking-time-slot-button.booking-time-slot-button-selected.booking-day-header.booking-timezone-picker.booking-pagination-buttons
Duration & channel selection
.booking-duration-selection.booking-duration-button.booking-duration-scroll-area.booking-channel-selection.booking-channel-button.booking-channel-scroll-area
Host selection
.booking-host-item.booking-host-item-text.booking-host-search.booking-fastest-option.booking-fastest-text.booking-specific-host-header
Form fields
.booking-form.booking-form-field.booking-form-label.booking-input.booking-input-text.booking-input-email.booking-input-url.booking-input-number.booking-input-error.booking-textarea.booking-textarea-error.booking-phone-input.booking-form-error
Select & dropdown
.booking-select-trigger.booking-select-content.booking-select-item
Checkboxes
.booking-checkbox.booking-checkbox-label.booking-checkbox-group.booking-checkbox-wrapper.booking-form-field-checkbox
Radio buttons
.booking-radio.booking-radio-label.booking-radio-group.booking-radio-wrapper
Buttons
.booking-submit-button.booking-submit-button-loading.booking-confirm-button.booking-confirm-button-loading.booking-continue-button.booking-change-host-button
Confirmation page
.booking-confirmation.booking-confirmation-card.booking-confirmation-content.booking-confirmation-content-inner.booking-confirmation-status.booking-confirmation-header.booking-confirmation-title.booking-confirmation-subtitle.booking-confirmation-details.booking-confirmation-meta.booking-confirmation-what.booking-confirmation-when.booking-confirmation-who.booking-confirmation-where.booking-confirmation-manage.booking-confirmation-add-to-calendar.booking-confirmation-calendar-buttons.booking-confirmation-legal
Cancellation page
.cancellation-page-wrapper.cancellation-policy-violation.booking-cancellation-card.booking-cancellation-content.booking-cancellation-form.booking-cancellation-reason-group.booking-cancellation-notice.booking-cancellation-button.booking-cancellation-current-appointment.booking-cancellation-current-appointment-icon.booking-cancellation-current-appointment-date.booking-cancellation-series-info.booking-cancellation-series-list.booking-cancellation-series-list-label.booking-cancellation-series-items.booking-cancellation-series-item.booking-cancellation-series-item-info.booking-cancellation-series-item-icon.booking-cancellation-series-item-date.booking-cancellation-series-item-button.booking-cancellation-series-choice.booking-cancellation-series-choice-label.booking-cancellation-radio-group.booking-cancellation-option-single.booking-cancellation-option-single-label.booking-cancellation-option-single-date.booking-cancellation-option-all.booking-cancellation-option-all-label.booking-cancellation-option-all-info
Reschedule page
#reschedule.reschedule-page-wrapper.reschedule-policy-violation.booking-reschedule-series-panel.booking-reschedule-current-appointment.booking-reschedule-current-appointment-icon.booking-reschedule-current-appointment-label.booking-reschedule-current-appointment-date.booking-reschedule-series-info.booking-reschedule-series-list.booking-reschedule-series-list-label.booking-reschedule-series-items.booking-reschedule-series-item.booking-reschedule-series-item-info.booking-reschedule-series-item-icon.booking-reschedule-series-item-date.booking-reschedule-series-item-button.booking-reschedule-series-overflow
Policy violation notice
.policy-violation-card.policy-violation-title.policy-violation-description.policy-violation-advice-box.policy-violation-advice-title.policy-violation-advice-text.policy-violation-button
Bundle booking page
.bundle-booking-wrapper.bundle-booking-header.bundle-booking-step-header.bundle-card.bundle-category-header.bundle-category-icon.bundle-category-icon-text.bundle-selected-count.bundle-divider.bundle-search-container.bundle-search-input.bundle-clear-search.bundle-meeting-list.bundle-meeting-item.bundle-meeting-item-selected.bundle-meeting-accent.bundle-selection-checkbox.bundle-option-button-selected.bundle-price-badge.bundle-sidebar.bundle-sidebar-header.bundle-sidebar-content.bundle-sidebar-item.bundle-sidebar-divider.bundle-continue-button.bundle-mobile-bar.bundle-footer
Loading states
.booking-skeleton-buttons.booking-calendar-loading-date-cell.booking-calendar-loading-weekday
Miscellaneous
.booking-divider.booking-spots-left
Legacy selectors
Generic selectors like input[type="text"], input[type="email"], input[type="tel"], label, textarea, select, and button still work, but they are less precise. Prefer the booking-* classes above for better targeting.
Older articles and setups may reference class names like bookingTimeContainer or bookingTimePicker. Those belong to the previous version of the booking page and no longer apply. Use the classes listed on this page instead.
FAQ
What can I customize with CSS?
Almost everything. You can change fonts, colors, sizes, layouts, and even hide or rearrange elements. If it's on the booking page, CSS can probably adjust it.
Do I need to know coding?
Only if you want to use CSS. For basic branding, no coding is needed. Just pick your brand color and logo.
Will changes affect existing appointments?
Nope. Customizing your booking page only changes how the page looks. It doesn't affect your appointment types or availability.
Was this article helpful?
Let us know if this article answered your questions.