Widget Builder
In the Widget Builder, you visually assemble what should appear on your website.
Creating an Integration
When you create a new integration, a modal with templates opens first:
| Template | Description |
|---|---|
| Course Schedule | Heading with weekly view |
| Full | Course schedule, packages, and trainers in 2-column layout |
| Packages Only | Credit packages in focus |
| Trainer Focus | Team presentation with grid |
| Quick-View | Compact list of upcoming courses |
| Empty | Start from scratch and build everything yourself |
Give your integration a name (e.g. "Homepage", "Courses page"), choose a template, and click "Create". The template serves as a starting point – you can freely customize everything in the builder afterwards.
Layout
The builder has three areas:
| Area | Position | Function |
|---|---|---|
| Widget Catalog | Left | All available widgets to add |
| Canvas | Center | Your integration – live preview |
| Settings | Right | Configuration of the selected widget |
Rows and Columns
Widgets are organized in rows. Each row can have a specific column layout:
| Layout | Description |
|---|---|
| 1 Column | Full width (100%) |
| 2 Columns (50/50) | Two equal-width columns |
| 2 Columns (33/66) | Narrow left, wide right column |
| 2 Columns (66/33) | Wide left, narrow right column |
| 3 Columns (33/33/33) | Three equal-width columns |
Creating a Layout
- Click "Add row" in the canvas
- Select the desired column layout
- Drag widgets into the individual columns
On mobile devices, all column layouts are automatically displayed stacked vertically.
Adding Widgets
Via Drag and Drop
- Select a widget in the catalog (left)
- Drag it into a column in the canvas
- Release at the desired position
Changing Order
Drag widgets up or down within a column to change the order.
Removing a Widget
Select the widget and click the delete icon (trash can).
Available Widgets
Core Widgets
Course Schedule
Interactive course schedule with all your studio's appointments.
| Setting | Options |
|---|---|
| View | Week, list, tiles, or grouped by trainer |
| Show filters | Yes / No – shows category and trainer filters |
| Weeks ahead | 1 to 8 – how many weeks are displayed |
| Tiles per row | 2, 3, or 4 (tile view only) |
| Booking button | Yes / No |
| Category filter | Optionally show only specific categories |
| Trainer filter | Optionally show only specific trainers |
When a visitor clicks on a course, a detail modal opens with description, trainer info, time, capacity, and more. From there, the visitor can book the course on the Bookicorn platform (opens in a new tab).
Credit Packages
Shows all credit packages with prices, credits, and features. Via the "Buy now" button, the visitor is taken to the Bookicorn platform to purchase the package.
| Setting | Options |
|---|---|
| Layout | Grid, list, or carousel |
| Max. packages | 1 to 12 |
| Sorting | Popularity, price, or credits |
| "Popular" badge | Yes / No – marks popular packages |
Trainer Overview
Shows your team with profile pictures, bio, and specializations.
| Setting | Options |
|---|---|
| Layout | Grid, list, or carousel |
| Max. trainers | 1 to 20 |
| Show bio | Yes / No |
| Specializations | Yes / No |
When a visitor clicks on a trainer, a profile modal opens with bio, specializations, social media links, and upcoming courses.
Advanced Widgets
Upcoming Courses
Compact list of the next course appointments.
| Setting | Options |
|---|---|
| Count | 1 to 20 |
| Show trainer | Yes / No |
| Category filter | Optionally only specific categories |
Quick Book
Highlights a single course – with date, capacity, and "Book now" button. Ideal for promoting a specific offering.
| Setting | Options |
|---|---|
| Course | Dropdown to select the course |
| Button text | Freely customizable (default: "Book now") |
Categories
Filterable course categories to browse.
| Setting | Options |
|---|---|
| Style | Pills (buttons) or cards |
| Show count | Yes / No – shows number of courses per category |
Trainer Spotlight
A single trainer in focus – perfect for introducing a coach.
| Setting | Options |
|---|---|
| Trainer | Dropdown to select |
| Show courses | Yes / No |
| Max. courses | Number of upcoming courses |
Marketing
Reviews
Customer reviews from your studio.
| Setting | Options |
|---|---|
| Count | 1 to 20 |
| Minimum rating | 1 to 5 stars |
| Style | Cards or carousel |
| Allow reviews | Yes / No – shows "Write a review" button |
Member Widgets
These widgets are intended for logged-in members.
Login Button
Button to log in to Bookicorn.
| Setting | Options |
|---|---|
| Button text | Freely customizable |
| Redirect | URL after login (optional) |
Credit Status
Shows the logged-in member their current credit balance.
| Setting | Options |
|---|---|
| Style | Compact or detailed |
My Bookings
List of the member's upcoming bookings.
| Setting | Options |
|---|---|
| Count | Bookings displayed |
| Show past | Yes / No |
Location
Location Map
Map with your studio location.
| Setting | Options |
|---|---|
| Height | In pixels |
| Zoom | Map zoom level |
| Show directions | Yes / No |
Layout Widgets
Layout widgets help you structure your integration.
Heading
| Setting | Options |
|---|---|
| Text | Freely customizable |
| Size | H1, H2, H3, or H4 |
| Alignment | Left, center, or right |
Text Block
| Setting | Options |
|---|---|
| Content | Free text (HTML) |
| Alignment | Left, center, or right |
Spacer
| Setting | Options |
|---|---|
| Height | 8 to 200 pixels |
Divider
| Setting | Options |
|---|---|
| Style | Solid, dashed, or dotted |
| Color | Optional custom color |
Saving and Preview
Saving
Click "Save" in the top right. Changes are immediately live – the updated version appears on your website.
If there are unsaved changes, you will be warned when leaving the builder.
Preview
Click "Preview" to see the integration in a new tab at full size. The preview shows real live data from your studio.
Tips
Recommended Setup for the Homepage
- Heading ("Our Courses")
- Upcoming Courses (3–5)
- Spacer
- Heading ("Credit Packages")
- Credit Packages
- Spacer
- Heading ("Our Team")
- Trainer Overview
For a Course Schedule Page
- Course Schedule (weekly view, filters active)
For a Pricing Page
- Heading ("Our Packages")
- Credit Packages (grid layout)
- Spacer
- Reviews (carousel)
Performance Tip
Less is more. A widget with course schedule and packages loads faster than ten different widgets on one page. Use separate integrations for different pages of your website.
Frequently Asked Questions
Can I use a widget more than once?
Within an integration, each widget type can only appear once. Create separate integrations for different pages.
Why don't I see any data in the builder?
Make sure you have created courses, packages, or trainers in your studio. The builder displays live data.
What happens when I change the order?
After saving, the new order is immediately visible on your website.
Responsive – how does it look on mobile?
All widgets are fully responsive. Multi-column layouts are automatically stacked vertically on small screens. You can use the preview function to test different screen sizes.