Adjust your booking page with custom CSS
Where to add custom CSS for booking pages, confirmation pages and forms, how to change font without Google Fonts, and why your CSS is not working on the live page even though the editor preview looks right.
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
- 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.
Where you can add CSS
There is more than one CSS box, and each one covers a different set of pages. Adding a rule in the wrong place is the most common reason it "doesn't work".
| What you want to style | Where to add the CSS |
|---|---|
| Every booking page in your account | Branding → Edit Booking page CSS |
| The confirmation ("thank you") page | Branding → Edit Confirmation Page CSS |
| Only the booking pages of one team | Branding Editor → Apply to (below the tabs) → Specific teams, then edit on the CSS tab |
| Only one meeting type | Meeting type → Branding & Styling → Customize for this meeting type → Custom CSS for this meeting type |
| One form | Form editor → design/theme panel → CSS tab → Custom CSS |
Custom CSS is a Suite plan feature (Growth on legacy plans). On Free and Light you can still use the Visual Branding Editor — colors, corners, shadows, buttons, fonts and templates — but the CSS tab is not shown and saving CSS is refused. See Plan Comparison.
The meeting type decides whether company CSS applies
On a meeting type, Branding & Styling offers three CSS options, and one of them switches your company CSS off for that page:
- Use company CSS — inherit the company (or team) stylesheet. This is the default.
- No custom CSS — the default booking page appearance. Your company CSS is not applied here.
- Custom CSS for this meeting type — only the CSS you write in this box applies; it replaces the company stylesheet for this page.
If one booking page ignores styling that every other page has, check this setting first.
Change the font without CSS
Do not load a font with @import url('https://fonts.googleapis.com/...'). meetergo removes external @import rules before the page is served, because loading a font from Google would send your visitors' IP addresses to Google. The rule is stripped, the page falls back to the default font, and it looks as though nothing was saved.
A font-family rule that names a font installed on your own computer has the same effect for a different reason: it renders correctly for you and for nobody else.
Use the built-in font pickers instead:
- Open the Branding Editor
- Go to the Style tab
- Under Typography, choose a Heading font and a Body font
The fonts are hosted by meetergo, so no visitor data reaches a third party. Available families: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Source Sans Pro, Nunito, Mulish, Playfair Display, Merriweather, IBM Plex Sans, IBM Plex Serif, Space Grotesk, DM Sans, JetBrains Mono, Plus Jakarta Sans, Sora, Cormorant Garamond, Fraunces and Libre Franklin. Leave a picker on Default (theme font) to keep the standard font.
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.
My CSS doesn't work on the live page
Your CSS is checked for unsafe rules before it is put on the page. The preview in the Branding Editor runs the same check, so what you see there is what visitors get. If your styles are missing on the live page, work through this list.
| Symptom | Cause | Fix |
|---|---|---|
| The whole stylesheet is ignored, nothing at all applies | Your CSS contains one of the blocked patterns below. When one is found, the entire stylesheet is discarded, not just that rule | Remove the pattern, including from comments |
| Everything applies except the font | An external @import (for example Google Fonts) was removed | Pick the font in the Style tab instead, see above |
| A background image or icon is missing | url() pointed at an http:// address | Use https://, a data: URI or a path starting with / |
| Nothing was saved, or the CSS tab is missing | Custom CSS needs the Suite plan | Upgrade, or use the Visual Branding Editor |
| One booking page is unstyled, the rest are fine | That meeting type is set to No custom CSS or has its own inline CSS | Meeting type → Branding & Styling |
| The rule is there but the default style wins | Specificity | Add !important |
These patterns discard the whole stylesheet, and they are matched as plain text — a mention inside a /* comment */ counts:
expression(javascript:behavior:-moz-binding<script</style- an
@importthat is missing its closing;
Writing a note like /* no javascript: URLs here */ at the top of your stylesheet is enough to switch off every rule below it. If your CSS stops working all at once, search your comments for these words first.
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.
Which plan do I need for custom CSS?
The Suite plan (called Growth on legacy plans). The Visual Branding Editor — colors, corners, shadows, button styles, fonts and design templates — is available from Light (Essentials). Removing the meetergo branding is also a Suite feature.
Can I use a Google Font?
Not via @import. External stylesheet imports are removed before the page is served, so visitor IP addresses never reach Google. Most popular Google Fonts are available in the Style tab's font pickers, hosted by meetergo.
Can I hide an element I don't want, like the coupon code field?
Yes. Find the element's class in the reference below (or open the browser inspector), then set display: none. For example:
.booking-time-format-tabs {
display: none;
}
Can I rename the "Book now" button?
Yes, and it is a setting rather than CSS. On the meeting type, open Booking form → Settings → Submit Button Text and type your wording; it is stored per language and also replaces Pay & Book now. Steps and limits: Change the text on the booking button. The same field styles a form, where it sits in the form settings.
The only label with no setting is the small Confirm button next to a selected time slot. That one can be overwritten with CSS:
.booking-confirm-button {
font-size: 0;
}
.booking-confirm-button::after {
content: 'Take this time';
font-size: 16px;
}
Replacement text written in CSS is not translated, so use it only on a page you offer in a single language.
Does custom CSS also work on forms and selection pages?
Yes, but each has its own CSS box. A form is styled in the form editor's CSS tab, not in the company booking page CSS. Selection pages follow the company or team stylesheet.
Related Articles
- Customize Branding — logo, brand color, design templates and removing the meetergo branding
- Hide meeting type details on the booking page
- Hide confetti on the thank you page
- Plan Comparison
Was this article helpful?
Let us know if this article answered your questions.