Accessing customization settings
Navigate to Calendars > Calendar Settings, select the calendar you want to customize, and go to Advanced Settings > Customizations.Color and branding options
| Setting | What it controls |
|---|---|
| Primary color | Buttons, selected date highlight, and action elements |
| Background color | The backdrop behind the booking form |
| Calendar logo | Displayed at the top of the booking widget |
| Cover image | Appears in group and Neo widget views |
| Button text | Replace the default “Schedule Meeting” text with custom copy |
Widget styles
HoopAI offers two widget layouts:- Classic
- Neo
The classic widget displays a traditional calendar date picker on the left and available time slots on the right. It is compact and familiar to most users.
Reordering widget elements
You can reorder the elements that appear on the booking page:- Calendar name and description
- Date and time picker
- Custom form fields
- Payment step (if enabled)
- Confirmation screen
Show or hide details
Toggle visibility for these widget elements:- Calendar name — show or hide the calendar title
- Description — show or hide the calendar description
- Duration — display or hide the appointment length
- Timezone — show or hide the timezone selector
Custom CSS
For advanced styling beyond the built-in options, add custom CSS to your booking widget:- In Advanced Settings > Customizations, find the Custom CSS field
- Enter your CSS rules to override default widget styles
- Save and preview your changes
Embedding options
The customized widget can be shared in several ways:- Direct link — a standalone booking page URL
- Iframe embed — paste the embed code into any website
- Hoop funnel/website — add via Custom Code element in the page builder
- Calendar group — the widget style applies when the calendar appears in a group page
Mobile responsiveness
Both Classic and Neo widget styles are fully responsive. The widget automatically adjusts its layout for smaller screens, stacking date and time pickers vertically and enlarging touch targets on mobile devices.FAQs
Does the customization apply to embedded widgets too?
Does the customization apply to embedded widgets too?
Yes. All color, branding, and layout customizations apply to both the direct link and the iframe embed. The widget renders identically regardless of where it is displayed.
Can I use different styles for different calendars?
Can I use different styles for different calendars?
Yes. Each calendar has its own customization settings. You can use Classic for one calendar and Neo for another.