Customize widgets
You set how a widget looks on your website in three places: in the integration's design, in the default settings for all widgets and under Dimensions. Some of your booking page settings also affect the widgets.
Widget colors: use the booking page design
A new integration takes over the colors of your published booking page. If you change the colors there, the widgets change automatically along with them.
You find the design in the integration under Colors (on your phone) or in the Design tab (on a computer). There you find the Use the booking page design switch. When it's on, the Manager only displays the colors that were taken over.
Custom colors for a widget
If you switch off Use the booking page design, you set your own values for this widget:
- Primary color: highlights, active elements and prices
- Background
- Surface: cards and tiles
- Text
- Border
- Corners: the rounding of the corners in pixels
After that, changes to the booking page no longer apply automatically to this widget. Save after making changes.
Default settings for all widgets
Under Manager → Website Integration → Default settings, you set colors that apply to all integrations without their own colors: Primary color, Background, Surface, Text color, Border color and Border radius. They take precedence over the booking page design. Empty fields use the booking page color. Then Save.
So the order is: the integration's own colors, then the default settings, then the booking page.
Width and spacing: a widget's dimensions
Under Dimensions in the integration, you set how the widget sits in your website:
- Width: for example
100%(default). - Maximum width: the largest width, for example
1200px. - Padding: the distance to the edge, for example
24px.
Then Save. You find Dimensions in the integration below the list of blocks, which the Manager shows on a phone and in narrow browser windows.
Show or hide prices and tabs in the info window
Under Dimensions → Display, there are three switches:
- Show prices: shows the prices in an offering's info window.
- Show course tabs: shows the Overview and Details & Trainer tabs in the info window.
- Show block courses: currently has no effect on the widgets.
Important for new integrations: prices only appear in the widget after you have saved Dimensions once with Show prices switched on. If prices are missing, open Dimensions, check the switch and tap Save.
Booking page settings that also apply to widgets
You set these once, and they apply to both the booking page and the widgets:
- Show occupancy under Settings → Bookings: when switched off, it hides free spots.
- Hide categories and Hide detail page link in the display options of the offering blocks on your booking page.
- Show first names only under My Booking Page → Design → Privacy.
- Use difficulty levels under Settings → General → Features.
- your own terms under Settings → General → Terminology.
The widgets' language and currency follow the language of the booking page and your studio's currency.
Frequently asked questions
My widget has different colors from my website. How do I adjust them? In the integration, switch off Use the booking page design and set your own colors. Or set colors for all widgets under Default settings.
Why doesn't my widget show prices? Open Dimensions in the integration, switch on Show prices and tap Save.
How do I make the widget narrower?
Enter a Maximum width under Dimensions, for example 900px.
Can I change the widget's font? No, there's no font selection for widgets. You set colors, corners and dimensions.
Can I hide the free spots in the widget? Yes, with Show occupancy under Settings → Bookings. This then also applies to your booking page.