Booking widget

The Booking widget allows visitors to book appointments, sessions, or services directly on your website.

It connects to an existing booking configuration and presents it in a guided, step-by-step booking flow that can be fully styled to match your brand.

Because the Booking widget reflects how your booking is configured (operators, services, availability, etc.), some options and steps may vary depending on setup.

Important Prerequisite: Create a Booking First

Before you can add a Booking widget to a page, at least one booking must already exist.

You can create a booking in two ways:

• Go to Bookings > All bookings > Create booking
• Or click Create New Booking directly from the Booking widget settings

For full details on creating and managing bookings, see the separate article: How to Create a Booking.

Adding the Booking Widget

1. Drag the Booking widget onto your page.
2. Click on Edit.
3. Select an existing booking from Select Your Booking, or click Create New Booking.
4. Once selected, the widget loads the booking flow and design options.

Select Your Booking

Select Booking

Choose which booking configuration this widget should display.

• The list shows all bookings you’ve created.
• Each widget instance can display a different booking.

Edit Booking

Click Edit booking to open the booking configuration for an existing booking.

Create New Booking

Click Create New Booking to go to the booking configuration to create a new booking from scratch.

Booking Design

Change Booking Layout

The Booking widget offers four layout options. Each layout presents the same booking flow but emphasizes different parts of the experience (calendar, time slots, service summary). Choosing the right layout helps improve clarity, usability, and conversion.

1. Top Left – Calendar Left, Summary Right (Card-style)

Description:

• The calendar and time selection appear on the left.
• The service summary (service name, date, time, details) is displayed in a separate card on the right.
• The layout feels balanced and clearly divided into “selection” and “summary”.

Best for:

• Desktop-focused pages
• Professional services (coaching, consulting, appointments)
• Bookings where clarity and reassurance are important

Why use this layout:

• Users always see what they’re booking while selecting time
• The summary card reinforces confidence before continuing
• Works very well when there is enough horizontal space

UX tip:

This is often the safest and most universally understandable layout. If you’re unsure, start here.

2. Top Right – Summary Header Above Calendar

Description:

• The service summary is placed prominently at the top as a wide header.
• The calendar and time selection appear below.
• Creates a strong visual introduction to the booking.

Best for:

• Single-service bookings
• Brand-driven or visually expressive designs
• Pages where the service itself should stand out first

Why use this layout:

• Immediately communicates what the user is booking
• Strong hierarchy: service → date → time
• Good for storytelling or premium offerings

UX tip:

Works best when the service name and description are short and clear. Avoid overly long summaries in this layout.

3. Bottom Left – Full-Height Summary Panel (Left)

Description:

• The service summary takes up a large vertical panel on the left.
• The calendar and time slots are placed on the right.
• The summary feels persistent and dominant.

Best for:

• Multi-step or higher-value bookings
• Services that benefit from more explanation
• Bookings with multiple available time slots

Why use this layout:

• Keeps context visible throughout the entire booking process
• Ideal when users may hesitate and need reassurance
• Feels structured and guided

UX tip:

Pair this layout with clear step labels and a visible progress bar for a strong guided-flow experience.

4. Bottom Right – Compact Summary Panel (Left), Calendar Focus

Description:

• A narrower summary panel is placed on the left.
• The calendar and time slots take visual priority on the right.
• Feels lighter and more action-focused.

Best for:

• Fast bookings
• Returning users
• Internal bookings or repeat customers

Why use this layout:

• Reduces visual friction
• Encourages quick decision-making
• Keeps attention on date and time selection

UX tip:

Great when users already know what they’re booking. Combine with minimal text and a clear call-to-action.

Fonts

Headline Font

Controls fonts used for:

• Step headings
• Service titles
• Section labels

General Font

Controls fonts used for:

• Descriptions
• Form fields
• Time slots
• Supporting text

💡 Best practice:

Use fonts that match your global site typography for consistency.

Booking Flow Structure (Important)

The number of steps shown in the booking flow depends on your booking setup.

Step visibility depends on:

• Number of operators
• Number of services

Examples:

• Only one operator and one service → Operator/service selection steps are skipped automatically
• Multiple operators or services → Selection steps are shown

This means:

• You may see 2–4 steps depending on configuration
• The widget automatically adapts to simplify the user experience

Booking Starts With

Operator or Service

This setting controls what the visitor selects first when multiple options exist.

Available only if:

• You have more than one operator, or
• You have more than one service

Options:

• Operator first – user chooses who they’re booking with first
• Service first – user chooses what they’re booking first

📌 If only one option exists, this setting is hidden and skipped automatically.

Step Settings

Controls the visual styling of the booking steps.

Colors

• Background color – background of step sections
• Font color – text color
• Active color – highlights current step, selected items, buttons

Show Progress Bar

• Shows or hides the step progress indicator

Shadow Settings

Adds visual depth to the step container:

• No shadow
• Outer shadow
• Inner shadow

Box Styling (Operator & Service Selection)

Controls the appearance of selectable boxes for operators and services.

Options include:

• Background color
• Font color
• Active color

Services Per Row

Controls how many services are shown per row:

• 1 per row
• 2 per row
• 3 per row

Edit Step Labels

Allows you to customize the text shown at each step.

Editable labels (depending on how many steps you have):

• Operator step heading
• Service step heading
• Date & time step heading
• Details step heading

Example customizations:

• “Choose your coach”
• “Select a session”
• “Pick a date & time”
• “Your details”

This helps align the booking flow with your tone and use case.

Summary Styling

Controls the appearance of the booking summary panel.

Colors

• Background color
• Font color
• Active color

Shadow Settings

Adds visual depth to the summary container:

• No shadow
• Outer shadow
• Inner shadow

Location Display

The Booking widget allows you to control when the event location is visible during the booking flow. This is especially important depending on whether the meeting is physical or online.

• You can control this via:
  • Show event location on the summary screen
  • Show event location on the confirmation screen

These settings affect how and when the location is shown to the customer.

When to Show Location Early (Summary Screen)

Recommended for physical, in-person bookings

If your booking involves a physical location (for example an office, clinic, studio, or meeting place), it’s often important that the customer clearly understands where the meeting will take place before completing the booking.

• The summary panel clearly displays the location alongside date and time
• Reduces uncertainty for in-person meetings
• Builds trust and avoids confusion about where to show up

Typical examples:

• Clinics or medical appointments
• Beauty or wellness treatments
• Office meetings
• Workshops or local events

In these cases, enabling “Show event location on the summary screen” is strongly recommended.

When to Hide Location Until Confirmation

Recommended for online meetings with a shared link

If your booking uses a generic online meeting link (such as Zoom, Google Meet, or Teams) that is the same for all bookings, you may not want to display the meeting link during the booking process.

Why this works well:

• Keeps the booking flow clean and focused
• Prevents exposing meeting links before booking is completed
• Reduces the risk of links being shared or accessed without booking

Typical examples:

• Coaching sessions
• Sales demos
• Discovery calls
• Online consultations
• Internal or recurring meetings

For these scenarios:

• Disable “Show event location on the summary screen”
• Enable “Show event location on the confirmation screen”

This ensures:

• The location (meeting link) is shown after booking is completed
• The customer still receives full details when it matters

Form Styling

Controls how the final details form looks.

Form Colors

• Background color
• Font color

Submit Button

• Button text (e.g. Book Appointment)
• Button font color
• Button background color

Member & Marketing Options

Create Member Profile on New Event

When enabled:

• A website member profile is created for the customer
• An email is sent asking them to set a password

Add New Members to Group

Assigns newly created members to a selected group.

Email Marketing Integration

Connect to Email Marketing

Allows you to:

• Add contacts to selected email lists
• Trigger automations

Tag Contacts on New Booked Session

Automatically tags users when they complete a booking.

You can assign one or multiple tags at the widget level, and also define additional tags at the service level when configuring the booking.

This allows you to trigger different automations, workflows, or follow-ups based on which service was booked, even when multiple services are booked through the same booking widget.

Best Practices

• Keep the booking flow as short as possible
• Avoid unnecessary steps if only one option exists
• Use clear step labels and button text
• Test the booking flow on mobile and desktop
• Match colors and fonts to your global brand styles
• Start simple, then add styling once the flow works perfectly

Summary

• The Booking widget displays an existing booking configuration
• Booking steps adapt automatically based on operators and services
• Four layout styles control visual structure
• Extensive styling options are available for steps, boxes, summary, and forms
• Supports member creation, email marketing, and tagging
• Designed to create a smooth, guided booking experience

Used correctly, the Booking widget turns your booking setup into a polished, user-friendly experience that converts visitors into confirmed appointments with minimal friction.