Website Integration
With website integration, you display Bookicorn content directly on your own website. Your customers can see the course schedule, browse packages, and get to know your team. For bookings and purchases, they are seamlessly redirected to the Bookicorn platform.
What Are Widgets?
Widgets are interactive building blocks that you can combine freely. Each widget shows a specific part of your studio:
| Widget | What it shows |
|---|---|
| Course Schedule | Interactive weekly schedule with filtering and course details |
| Credit Packages | All packages with prices, credits, and "Buy" link |
| Trainer Overview | Your team with profiles and upcoming courses |
| Upcoming Courses | Compact list of the next appointments |
| Quick Book | A single course highlighted with "Book" link |
| Categories | Course categories to browse |
| Trainer Spotlight | A single trainer in focus |
| Reviews | Customer reviews |
| Login Button | Member login |
| Credit Status | Credit balance display for logged-in members |
| My Bookings | Upcoming bookings of a member |
| Location Map | Map with your studio location |
In addition, there are layout widgets (headings, text blocks, spacers, dividers) that help you structure the layout.
How It Works
Step 1: Create an Integration
- In the admin area, go to Marketing → Integrations
- Click "New Integration"
- Enter a name (e.g. "Homepage", "Courses page")
- Choose a template as a starting point (Course Schedule, Full, Packages Only, Trainer Focus, Quick-View, or Empty)
- Click "Create" – the Widget Builder opens
Step 2: Assemble Your Widgets
In the Widget Builder, you use drag and drop to put together what should appear on your website. You can arrange widgets in rows with multiple columns and customize the colors to match your design.
→ More about the Widget Builder
Step 3: Insert the Embed Code
You get a short HTML code that you insert on your website:
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
<bookicorn-widget studio="your-studio" integration="your-integration"></bookicorn-widget>
<a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>
Step 4: Done
The widget appears immediately on your website. All data comes live from Bookicorn – courses, trainers, packages, availability. Changes in Bookicorn are automatically visible on your website.
Advantages
| Description | |
|---|---|
| Adapts to your site | Colors, font, and style adapt to your website |
| Always up to date | Data comes live from Bookicorn – no manual maintenance |
| Responsive | Works perfectly on desktop, tablet, and mobile |
| Isolated | Widget styles don't affect your website and vice versa |
| Fast | Loads asynchronously and doesn't block your page |
| Secure | Data is transmitted encrypted over HTTPS |
Requirements
Add-on Required
Website integration is a paid add-on (€29/month).
To activate:
- Go to Settings → Add-on Store
- Select "Website Integration"
- Click "Activate"
Technical Requirements
Your website only needs to allow JavaScript. This is the case for all modern websites and website builders (WordPress, Wix, Squarespace, Webflow, Jimdo, etc.).
Multiple Integrations
You can create as many integrations as you like – for different pages or purposes:
| Integration | Page | Example Widgets |
|---|---|---|
| Homepage | Start page | Upcoming courses, packages, reviews |
| Course Schedule | /courses | Full course schedule with filters |
| Team | /team | Trainer overview |
| Pricing | /pricing | Credit packages |
Each integration has its own embed code and can be styled separately.
Dynamic Terminology
The widgets automatically use the labels you have set in your studio. If you prefer "Coach" instead of "Trainer" and "Workshops" instead of "Courses" – the widget will display those terms.
You can find this setting under Settings → General → Terminology.