Customizing
Adapt the look of your widgets to match your website's design. All settings can be found in the Widget Builder under the Integration Settings (gear icon).
Themes
Themes are predefined color combinations that change the entire appearance of your widget with a single click.
Available Themes
| Theme | Description |
|---|---|
| Modern Blue | Classic blue – professional and trustworthy |
| Dark Elegant | Dark background with light text |
| Fresh Green | Natural and fresh – ideal for yoga and wellness |
| Warm Orange | Energetic and inviting |
| Premium Gold | Refined and high-end |
| Ocean | Calming blue-turquoise tones |
| Nature | Earthy, natural colors |
| Violet | Modern and creative |
| Custom Colors | Set everything manually |
Selecting a Theme
- Open the Widget Builder
- Click on the gear icon (Integration Settings)
- Select the desired color scheme under "Theme"
- Colors are automatically applied
Custom Colors
Select "Custom Colors" to set each color individually. Or choose a theme as a starting point and then adjust individual colors afterwards.
Colors
You can configure the following colors individually:
| Color | Used for |
|---|---|
| Primary color | Buttons, links, accents, hover states |
| Background color | Widget background |
| Text color | Headings and main text |
| Secondary text color | Descriptions, labels, additional info |
| Border color | Borders, dividers, card outlines |
| Success color | Available indicator, confirmations |
| Error color | Fully booked indicator, error messages |
Changing a Color
- Click on the color swatch next to the respective color
- Choose a color with the color picker or enter a hex code (e.g.
#84CC16) - The preview in the canvas updates immediately
Tip: Use the same primary color as on your website – this way the widget blends in seamlessly.
Container Settings
These settings affect the outer frame of the entire widget.
Width
| Option | Description |
|---|---|
| 100% | Full width of the surrounding element |
| 90% | With a small margin left and right |
| 80% | With a larger margin |
| 800px | Fixed width (800 pixels) |
| 1000px | Fixed width (1000 pixels) |
Maximum Width
Limits the width even with a percentage setting:
| Option | Description |
|---|---|
| 800px | Compact – ideal for sidebar widgets |
| 1000px | Standard |
| 1200px | Wide |
| 1400px | Very wide |
| None | Unlimited |
Inner Spacing (Padding)
| Option | Description |
|---|---|
| 0px | No inner spacing |
| 8px | Minimal |
| 16px | Small |
| 24px | Standard |
| 32px | Large |
Corner Rounding (Border Radius)
Controls the rounding of corners of cards and elements within the widget. Values from 0px (square) to 32px (strongly rounded).
Shadow
Toggles a subtle shadow around the widget on or off.
Widget-Specific Layouts
Some widgets offer different layout options:
Grid
- Automatic responsive grid
- Elements fill the available space
- Automatically becomes single-column on small screens
List
- Vertical listing
- Each element uses the full width
- Ideal for detailed representations
Carousel
- Horizontal scrolling
- Touch-optimized for mobile devices
- Arrow navigation on desktop
Responsive Behavior
All widgets automatically adapt to the screen size:
| Device | Behavior |
|---|---|
| Desktop | Multi-column layouts, grid display |
| Tablet | Fewer columns, adjusted spacing |
| Mobile | Single column, elements stacked |
You don't need to configure anything – the responsive behavior works automatically.
Dynamic Terminology
The widgets automatically use the labels you have set in your studio:
- Instead of "Trainer", you can use Coach, Instructor, or Therapist
- Instead of "Courses", you can use Workshops, Seminars, or Sessions
Changing Terminology
- Go to Settings → General → Terminology
- Select the appropriate terms for your studio
- Widgets adopt the change automatically – no re-embedding necessary
Branding
Automatically Applied
Widgets automatically inherit:
- Your studio name
- Your chosen terminology
- The configured colors
Isolation from Your Website
The widget runs in an isolated area (Shadow DOM). This means:
- Your website CSS has no influence on the widget appearance
- The widget CSS does not change anything on your website
- Colors and styling are controlled exclusively through the widget settings
Best Practices
Match Your Website
- Use the same primary color as on your website
- Choose a similar corner rounding
- Adjust the background (transparent usually works best)
Less is More
- The default settings are optimized for most websites
- Start with a suitable theme and only adjust the primary color
- Always test on desktop and mobile
Testing
- Use the preview function in the builder
- Check the widget on your actual website
- Test on different devices and browsers
- Click through: click on courses, use filters, view trainers
Frequently Asked Questions
Can I add custom CSS to the widget?
No. The widget runs in an isolated Shadow DOM that cannot be addressed from outside via CSS. All visual customizations are made through the settings in the Widget Builder.
Why does the widget look different on my website than in the preview?
The widget adapts to the width of the container it sits in on your website. If the container is narrower than in the builder, the layout looks slightly different. The content adapts automatically though.
Can I change the font?
Widgets use system fonts for fast loading times. A custom font is not currently configurable.
Are changes visible immediately?
Yes. As soon as you click "Save" in the Widget Builder, changes are immediately visible on your website. You do not need to re-insert the embed code.
Do I need to update the embed code when I make changes?
No. The embed code always stays the same. All changes to design, widgets, and content are applied automatically.