Hide Meeting Type Details with the Visual Branding Editor

The Visual Branding Editor lets you hide elements on your booking page — like the meeting description, channel selection, duration, or host info — using a few lines of CSS, with a live preview of the result.

Open the Visual Branding Editor

You can open the editor in two places, depending on the scope you want:

• Company-wide — affects every booking page. Open Branding and click Open Editor.
• One meeting type only — open the meeting type, go to the Branding & Styling tab, and click Open Editor in the Visual Branding Editor section.

The editor opens in a new tab with a live preview of your booking page on the right and the controls on the left.

Hide elements via the CSS tab

There are no on/off toggles for individual booking page elements — visibility is controlled with custom CSS. The editor includes a CSS tab and a built-in class reference so you don't have to guess the selectors.

1. In the editor, switch to the CSS tab
2. Scroll to the bottom and expand CSS Class Reference — every supported class is listed and grouped by section (Meeting Information, Calendar & Time Selection, Duration & Channel Selection, etc.). Click any class to copy it.
3. Add a display: none rule for the element you want to hide
4. Watch the preview on the right update in real time
5. Use the device toggle (Desktop / Tablet / Mobile) to confirm it looks right on every screen size
6. Click Save

Common elements you can hide

Paste any of these snippets into the CSS tab.

Hide the meeting description:

.booking-description-content {
  display: none;
}

Hide the channel (video provider) selection:

.booking-channel-selection {
  display: none;
}

Hide the duration info or duration selector:

/* Hide the duration shown next to the meeting title */
.booking-duration-info {
  display: none;
}

/* Hide the duration picker (when multiple durations are offered) */
.booking-duration-selection {
  display: none;
}

Hide the location:

.booking-location-info,
.booking-location-text {
  display: none;
}

Hide the host avatar and name:

.booking-host-info-wrapper {
  display: none;
}

/* Or hide them individually */
.booking-host-avatar { display: none; }
.booking-host-name { display: none; }

Hide the meeting title:

.booking-title {
  display: none;
}

Hide the legal/privacy details under the booking:

.booking-legal-details {
  display: none;
}

Hide the timezone picker on the calendar:

.booking-timezone-picker {
  display: none;
}

Hide the "spots left" indicator on group bookings:

.booking-spots-left {
  display: none;
}

You can combine as many rules as you want — just list them in the same CSS block.

Apply to one meeting type or all of them

When you open the editor from a single meeting type, the changes only affect that meeting type. You can also choose how the meeting type uses CSS in the Branding & Styling tab:

• No custom CSS — default appearance, ignores company CSS
• Use company CSS — inherits whatever you set company-wide
• Custom CSS for this meeting type only — overrides the company defaults

If you want the same elements hidden everywhere, set the CSS at the company level and switch each meeting type to Use company CSS.

Find a class name that isn't listed

The class reference covers every standard element, but if you need to target something more specific:

1. Open the booking page in your browser
2. Right-click the element you want to hide and choose Inspect
3. Copy the class name (it usually starts with booking-) and add a display: none rule for it in the CSS tab