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 extend the CSS stylesheet of your meeting rooms and booking pages.

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

General 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

Customization of specific buttons in the meeting room

It's also possible to customize specific buttons in your meeting rooms. Below you can find all the possible elements that can be changed for desktop and phone layout.

Desktop layout:

Content elements
- "meeting__whiteboard"
- "meeting__upload"
- "meeting__share"
- "meeting__cobrowse"

Footer elements
- "meeting__cam"
- "meeting__mic"
- "meeting__leave"
- "meeting__separator-left"
- "meeting__settings"
- "meeting__recordings"
- "meeting__invite"
- "meeting__separator-right"
- "meeting__chat"
- "meeting__privatenotes"

Header elements
- "meeting__release-notes"
- "meeting__fullscreen"
- "meeting__profile"

Phone layout:

Footer elements
- "meeting__cam-phone"
- "meeting__mic-phone"
- "meeting__leave-phone"
- "meeting__settings-phone"
- "meeting__chat-phone"

Header elements
- "meeting__knockers-phone"
- "meeting__release-notes-phone"
- "meeting__profile-phone"

All these elements can be customized. For most of the above elements, it's possible to customize the icon and label separately, like in this example below:

<style>
#meeting__recordings > .btn {
color: #ffbe09;
background-color:#2199b8;
}

#meeting__recordings > .btn > .btn__icon {
display: none;
}

#meeting__recordings > .btn > .btn__label {
text-decoration: underline;
}
</style>

This will result in

You can also add different colors for Hover, Active and Focus for an improved experience. For example, add a light color when hovering over the button.

<style>
#meeting__recordings > .btn {
color: #ffbe09;
background-color:#2199b8;
}

#meeting__recordings > .btn:hover {
color: #ffbe09;
background-color:#2199b824;
}

#meeting__recordings > .btn > .btn__icon {
display: none;
}

#meeting__recordings > .btn > .btn__label {
text-decoration: underline;
}
</style>

When hovering the button, this will result in

Important notes and exceptions!

  • The Vectera team recommends not to change the Background colors of the Cam and Mic buttons, so the activation status remains clear

  • If you'd like to give an Icon* a different color, you will have to use the following declaration { Fill: <color>; }

  • To customize the chat button you'll have to use the" Element Element" descendant selector instead of the "Element > Element" child selector:

#meeting__chat .btn {
display: none;
}

instead of

#meeting__chat > .btn {
display: none;
}

Example

I would like to give the Chat icon a color so I will add the following CSS in the Custom HTML head block:

<style>
#meeting__chat .btn {
fill: #ffbe09;
}
</style>

This will result in

  • It's not possible to customize the color of the Leave Icon for mobile phones!

  • If you'd like to customize the Release notes button, which is only visible for hosts after a new Vectera update, you will have to use the following code

<style>
#meeting__release-notes .btn:not(:disabled):not(.disabled),
#meeting__release-notes .btn:not(:disabled):not(.disabled) .far {}
</style>

Example

I would like to give the release notes a background and icon color similar to recordings in the example above

<style>
#meeting__release-notes .btn:not(:disabled):not(.disabled),
#meeting__release-notes .btn:not(:disabled):not(.disabled) .far {
color: #ffbe09;
background-color:#2199b8;
fill: #ffbe09;
}
</style>

This will result in

Add functionality with Javascript

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

Note: It's not possible to change the color of the date picker!


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?