General info

Style the meeting rooms & booking pages in line with your brand using the advanced customization options.

These advanced customization options require basic knowledge of CSS styling & JavaScript and HTML.

The following information is provided with illustrative examples. Be aware that using custom CSS and Javascript might cause inconsistencies for the end-user if not applied correctly and is subject to change in the future.

The custom HTML head block can be found in "team settings" under the "custom domain" tab. A custom domain is required to change the CSS settings of your meeting rooms and booking pages.

Add custom styling directly in the Custom HTML head block or use external stylesheets

You can change any of the CSS classes to reflect your branding.

The head block is limited to 2000 characters. You can also refer to an externally hosted file to mitigate the 2000 character limit.

<link href="https://linktoyourstylesheet.css" media="all" rel="stylesheet" type="text/css"/>

Meeting room customization

Meeting room customization enables you to easily hide elements or change the global styling of the meeting room.

Example: You can change the main colors

<style>
:root {
--brand-color: #d32f2f;
--brand-color-hover: #dc5959;
--brand-color-active: #c22828;
}
</style>

This results in the following meeting room and invitation screen

Javascript can be added as well. These Javascript elements can bring additional functionality to the meeting rooms. For instance, you can add a support bubble from your organization to assist users in the meetings.

More info can be found in the main article about the custom HTML block.

Booking pages customization

When embedding the booking pages - having a customized experience is of great importance. The entire styling of the booking pages can be changed: Button colors, line thickness, background, etc.

! The stylesheet is different from the general meeting room stylesheet. A refactoring of the booking pages and alignment of the stylesheets in accordance to the meeting room stylesheets is foreseen in Q4 2021.

Example: you can change the colors of appointment types on your booking page

<style>
a {
color: #138468;
}
a:hover, a:focus, a:active {
color: #650048;
}
.scheduler .btn-block {
box-shadow: none;
border: solid 1px #138468;
}
.scheduler .btn-block:hover,
.scheduler .btn-block:focus,
.scheduler .btn-block:active {
background-color: #13846836 !important;
}
.scheduler #appointments .appointment .appointment-header .details img {
filter: grayscale(100%);
}
.scheduler #appointments .appointment .button {
background: #138468;
box-shadow: none;
}
.scheduler #appointments .appointment .button:hover,
.scheduler #appointments .appointment .button:focus,
.scheduler #appointments .appointment .button:active {
background-color: #138468;
}
.scheduler #timeslotpicker .timeslots {
background-color: #138468;
}
.scheduler #timeslotpicker .ui-datepicker-title {
color: #138468;
}
.scheduler .btn-block:hover,
.scheduler .btn-block:focus,
.scheduler .btn-block:active {
background-color: #9fd6c8 !important;
}
.scheduler #contact-form .title .scheduled-appointment,
.scheduler #done .title .scheduled-appointment {
background-color: #138468;
}
.scheduler #contact-form .data form .btn-submit,
.scheduler #done .data form .btn-submit {
background: #138468;
}
.scheduler #contact-form .data form .btn-submit:hover,
.scheduler #contact-form .data form .btn-submit:focus,
.scheduler #done .data form .btn-submit:hover,
.scheduler #done .data form .btn-submit:focus {
background: #9fd6c8 !important;
}
</style>

This results in the following booking page


The Vectera team is looking forward to your feedback. Our main goal still is to improve your experience in creating online meeting rooms. Eager to get going? Log into your account or get started with a free, fully-featured trial of Vectera!

Did this answer your question?