All Collections
Use Cases
Customize your Booking Page (with CSS)
Customize your Booking Page (with CSS)

Here's how you adjust the design of your booking page and customize it according to CI.

Richard Gödel avatar
Written by Richard Gödel
Updated over a week ago

In meetergo, you can customize the appearance of your booking page to perfectly suit your needs.

You can adjust your company colors (corporate identity) in the settings.

Additionally, you have the option to change the design and formatting of the booking page using CSS classes.

Here's how to change the appearance of your booking page

For simple customization, we provide some settings to adjust the brand colors. Advanced users can customize the entire booking page using CSS!

  1. Go to your company settings.

  2. In the middle column below "Branding," you can make design changes.

  3. Upload your company logo (optional - only for business card/round-robin appointment types).

  4. Check the box for "Use brand colors." Click on the circle next to "Primary color" to select your color using the color picker.

  5. Click on "Edit CSS of the booking page" to insert CSS. Read this article to learn more about how it 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 you can place the logo or page title, for example.

  • .bookingLanguageSwitcher: Switch to change the language of the booking page.

  • .bookingCallbackContainer: The container for the callback section if displayed.

  • .bookingTypeSelect: The dropdown menu or buttons for selecting the appointment 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 section if displayed.

  • .bookingTimeContainer: The container for the time section of the booking page.

  • .bookingTimePicker: The time picker element that allows users to select an appointment time.

  • .bookingTimezoneSelect: The dropdown menu for selecting the timezone.

  • .bookingTimeOption: An individual option within the time picker 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 that includes fields such as name, email, etc.

  • .bookingFormDataPolicyContainer: The container for the data privacy policy in the booking form.

  • .bookingFormSubmitButton: Button for submitting the booking form.

For example, you could use CSS to change the background color, adjust font styles, set margins, or customize 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 additional CSS rules to customize the other elements of the booking page using the respective CSS classes.

Did this answer your question?