> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendar widget customization

> Customize the colors, fonts, layout, and branding of your HoopAI calendar booking widget.

The booking widget is the public-facing interface contacts use to schedule appointments. HoopAI provides extensive customization options so the widget matches your brand identity across every touchpoint — whether embedded on your website, shared as a link, or displayed in a calendar group.

## 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:

<Tabs>
  <Tab title="Classic">
    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.
  </Tab>

  <Tab title="Neo">
    The Neo widget uses a modern card-based layout with larger touch targets, rounded corners, and a more spacious design. It works especially well on mobile devices and in calendar group pages.
  </Tab>
</Tabs>

Switch between styles in **Advanced Settings > Customizations > Widget Style**.

## 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

Drag elements into your preferred order within the customization panel.

## 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:

1. In **Advanced Settings > Customizations**, find the **Custom CSS** field
2. Enter your CSS rules to override default widget styles
3. Save and preview your changes

<Warning>
  Custom CSS is applied directly to the booking widget. Test thoroughly across browsers and devices before going live, as CSS changes can break the layout if selectors are incorrect.
</Warning>

## 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.

<Tip>
  Preview your widget on both desktop and mobile before sharing. Use the direct booking link on your phone to verify the mobile experience firsthand.
</Tip>

## FAQs

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>