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

• 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

Custom CSS for booking links

Here are the CSS classes you can use:

• bookingContainer: This is the main container of the booking page that contains all other elements
• bookingTopContainer: The container that encompasses the top part of the booking page
• bookingTopBar: The top bar where, for example, the logo or page title can be placed
• bookingLanguageSwitcher: Switch to change the language of the booking page
• bookingCallbackContainer: The container for the callback area, if displayed
• bookingTypeSelect: The dropdown menu or buttons for selecting the booking type
• bookingTypeMeetingButton: Button for selecting a meeting type
• bookingTypeInstantCallButton: Button for selecting an instant call
• bookingTypeRequestCallbackButton: Button for selecting a callback request
• bookingTypeEmailButton: Button for selecting an email request
• bookingInstantVideoContainer: The container for the instant video call area, if displayed
• bookingTimeContainer: The container for the time area of the booking page
• bookingTimePicker: The time selection element that allows users to choose an appointment
• bookingTimezoneSelect: The dropdown menu for selecting the timezone
• bookingTimeOption: A single option in the time selection element
• bookingFormContainer: The container for the booking form
• bookingFormTitle: The title or heading of the booking form
• bookingFormMeetingInfo: Meeting information that can be displayed
• bookingForm: The actual booking form containing fields like name, email, etc
• bookingFormDataPolicyContainer: The container for data privacy policies in the booking form
• bookingFormSubmitButton: Button to submit the booking form
• customPageContent: Content of a custom page route of a routing form

For example, you could use CSS to change the background color, adjust fonts, set spacing, or modify other CSS properties to achieve the desired appearance.

Here's an example of how you can change the background color of the main container:

.bookingContainer {
    background-color: #f2f2f2;
}

You can add more CSS rules to customize the other elements of the booking page by using the corresponding CSS classes.

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.

Updated on: 10/08/2025