Embed widgets
To make an integration appear on your website, you paste its code into your website. This page shows where to find the code, how it's structured and what to do if the widget doesn't load. How to build an integration is explained under Create and edit an integration.
Copy an integration's code
- Open Manager → Website Integration.
- Tap the integration's card and choose Copy code. On your phone, you also find Copy code in the integration itself, below the list of blocks.
- In the Embed code window, tap Copy. "Embed code copied to clipboard" appears.
The same window shows the widget's Language (the language of your booking page), the Primary color and where Clicking an offering opens (default: Info panel).
How the code is structured
The code looks like this, with the identifier of your studio and your integration:
<!-- Bookicorn Widget -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
<bookicorn-widget studio="your-studio" integration="your-integration"></bookicorn-widget>
<a class="bookicorn-credit" href="https://www.bookicorn.net" target="_blank" rel="noopener">Powered by Bookicorn</a>
- The
<script>loads the widget. It doesn't wait for the rest of your page. <bookicorn-widget>is the spot where the widget appears.- The "Powered by Bookicorn" link is part of the code. If you remove it, the widget adds it back itself.
The widget appears directly in your page, not in a separate frame. Your styles and the widget's styles don't affect each other.
Paste the code into WordPress, Wix, Squarespace, Jimdo or Webflow
Paste the complete code at the spot on your website where the widget should appear. Your website builder needs an element that accepts custom HTML code with JavaScript. Depending on the builder, it's called "HTML", "Code", "Embed" or similar:
- WordPress: a block for custom HTML, called "Custom HTML" in the block editor.
- Wix: an element for embedding custom code.
- Squarespace: a code block.
- Jimdo: an element for widgets or HTML.
- Webflow: an embed element.
- Your own website: put the code directly into the page's HTML.
If your builder shows the code in a box with a fixed height, set the height so that the whole widget is visible. If your builder can't include custom code, simply link to your booking page instead.
Embed several widgets on one page
You can embed several integrations on the same page. To do this, add each integration's <bookicorn-widget> element. The <script> is needed only once per page.
What visitors can do in the embedded widget
- View offerings, sessions, packages and trainers, all live from Bookicorn.
- Click an offering: an info window opens with Overview and Details & Trainer.
- Book now, buying packages, vouchers and signing in: opens your booking page in a new tab. When booking, the chosen session is already selected.
So the actual booking and payment happen on your booking page, not on your website.
Allowed domains: let the widget run only on your website
Under Dimensions → Allowed domains in the integration, enter the addresses where your widget may run, for example www.my-studio.com, and tap Add. Then Save. The widget then only runs on these domains and their subpages. On other websites, it shows the German system message "Domain nicht autorisiert" (domain not authorized).
If you don't enter a domain, Bookicorn doesn't check the address, and the widget runs on any website. The note in the Manager ("Without an entry the widget runs nowhere.") currently doesn't apply.
If you remove a domain, the widget stops running there. That's why the Manager asks first.
You find Dimensions in the integration below the list of blocks. The Manager shows this list on a phone and in narrow browser windows.
Privacy notice for your website
Below the code, the Embed code window has a Privacy policy snippet. It explains that your page embeds the widget from Bookicorn, which data is processed and that booking takes place on the booking platform. Tap Copy snippet and paste it into your privacy policy.
The widget doesn't load or shows an error message
Instead of the content, the widget shows a message. The first three are fixed German system messages:
| Message | Cause | Solution |
|---|---|---|
| Widget nicht gefunden (widget not found) | the identifier in the code is wrong, or the integration is deactivated or deleted | copy the code again, switch the integration on with Activate now |
| Widget nicht verfügbar (widget not available) | the Website Integration addon isn't active | activate the addon in the Addon Store |
| Domain nicht autorisiert (domain not authorized) | your website isn't listed under Allowed domains | add the domain and Save |
| Widget "…" will be available soon | the block isn't implemented in the embedded widget yet (Memberships, Member home, Profile, Wallet) | remove the block from the integration |
If nothing appears at all, check:
- Did you paste the complete code, including the
<script>? - Does your website builder allow JavaScript in this element?
- Did you save the integration after your last change?
Frequently asked questions
Where do I find the code for my website? Under Website Integration: tap the integration's card, Copy code.
Do I have to paste the code again after every change? No. After you Save, the widget shows the latest version.
Can I remove "Powered by Bookicorn"? The link is part of the code. If you remove it, the widget adds it back.
My widget shows "Domain nicht autorisiert". Add your website under Dimensions → Allowed domains or remove all entries there, and tap Save.
Can I paste the code into Wix? Yes, using an element for embedding custom code. Make the element's height large enough.