Adjust your booking page with CSS
In meetergo, you can customize the appearance of the booking page to perfectly match your needs.
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.
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 colors". 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.
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:
You can add more CSS rules to customize the other elements of the booking page by using the corresponding CSS classes.
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 colors". 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.
Updated on: 02/07/2024
Thank you!