Embedding

This guide shows you step by step how to embed Bookicorn widgets on your website.

Embed Code

Getting the Code

  1. In the admin area, go to Marketing → Integrations
  2. Select your integration (or create a new one)
  3. The embed code is displayed directly
  4. Click "Copy code"

Code Structure

The embed code consists of two parts:

<!-- 1. Bookicorn Loader (once per page) -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

<!-- 2. Widget element (where it should appear) -->
<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>
PartDescription
<script>Loads the widget loader. Only needs to be inserted once per page.
<bookicorn-widget>The actual widget. Appears exactly where you place it.
studio="..."The slug of your studio (found in settings)
integration="..."The slug of your integration (assigned when created)
<a> (backlink)"Powered by Bookicorn" link – please do not remove

Step-by-Step Guide

1. Copy the Code

Copy the complete embed code from the admin area.

2. Insert the Script

Add the <script> tag to your website. The ideal location is somewhere that is loaded on all relevant pages – e.g. in your website's footer or header.

3. Place the Widget

Insert the <bookicorn-widget> element exactly where the widget should appear.

4. Done

The widget loads automatically and displays your data live from Bookicorn.

Example: Simple HTML Page

<!DOCTYPE html>
<html>
<head>
  <title>My Yoga Studio</title>
</head>
<body>
  <h1>Welcome to our studio</h1>
  <p>Find our current course schedule here:</p>

  <!-- Bookicorn Widget -->
  <bookicorn-widget studio="my-yoga-studio" integration="course-schedule"></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>

  <!-- Bookicorn Loader (before </body>) -->
  <script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
</body>
</html>

Platform Guides

WordPress

Option 1: Custom HTML block (recommended)

  1. Edit the desired page
  2. Add a "Custom HTML" block
  3. Insert the complete embed code
  4. Publish the page

Option 2: Script globally in footer

If you need the widget on multiple pages, you can load the script once globally. Add the following to your functions.php:

function bookicorn_widget_script() {
  echo '<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>';
}
add_action('wp_footer', 'bookicorn_widget_script');

After that, you only need to insert the <bookicorn-widget> element on the individual pages.

Wix

  1. Open the page editor
  2. Click Add (+) → Embeds → Embed HTML
  3. Click "Enter code"
  4. Insert the complete embed code
  5. Adjust the size of the container
  6. Publish

Squarespace

  1. Edit the page
  2. Add a Code block
  3. Insert the embed code
  4. Save and publish

Webflow

  1. Drag an Embed element to the desired location
  2. Insert the embed code
  3. Optional: Insert script globally under Site Settings → Custom Code → Footer
  4. Publish

Jimdo

  1. Add a Widget/HTML element
  2. Insert the embed code
  3. Save

Other Platforms

The embed code works on any website that allows JavaScript. Look in your website builder for an option like "Insert HTML", "Code block", or "Embed".

Multiple Widgets on One Page

You can embed multiple integrations on the same page. The script only needs to be loaded once:

<!-- Course schedule widget -->
<bookicorn-widget studio="my-studio" integration="course-schedule"></bookicorn-widget>

<!-- Packages widget -->
<bookicorn-widget studio="my-studio" integration="packages"></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>

<!-- Script only ONCE! -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

How It Works Technically

  1. The loader script is loaded asynchronously and does not block your page
  2. It registers <bookicorn-widget> as a custom element
  3. Once a widget element is detected, it loads the configuration of your integration
  4. Then the widget bundle is loaded (cached by the browser)
  5. The widget renders in a Shadow DOM – completely isolated from your website
  6. Your data is loaded live from Bookicorn

Shadow DOM – What Does That Mean?

The widget runs in what is called a Shadow DOM. This has two major advantages:

  • Your styles are safe: Your website's CSS cannot influence the widget
  • No conflicts: The widget CSS does not change anything on your website

You don't need to do anything – it works automatically.

What Happens on Click?

Visitors can view courses in the widget (opens a detail modal with all info) and browse trainer profiles. Actions like booking or buying packages redirect the visitor to the Bookicorn platform, where the transaction is processed securely. The link opens in a new tab – your website stays open in the background.

Performance

  • The script loads asynchronously (async defer) and does not block your page
  • The widget bundle is cached by the browser after the first load
  • Data is only loaded when the widget becomes visible

Troubleshooting

Widget Not Loading

Check the following:

  1. Is the <script> tag present on the page?
  2. Is the <bookicorn-widget> element correctly inserted?
  3. Are the studio and integration slugs correct?
  4. Is the integration active in the admin area?
  5. Is the "Website Integration" add-on activated?

Widget Shows an Error

MessageSolution
No dataCheck if courses/packages/trainers exist in Bookicorn
Integration not foundCheck slug in integration="..."
Studio not foundCheck slug in studio="..."

Widget is Cut Off

  • Check if the container on your website has enough space
  • Remove overflow: hidden from the parent element
  • The widget automatically adjusts its height to the content

Check Browser Console

Open your browser's developer tools (F12) and look for errors in the console:

  • 404 error: Slug is misspelled
  • 403 error: Add-on not active or integration disabled

Frequently Asked Questions

Do I need to insert the script on every page?

If you embed the script once globally (e.g. in the footer template), that is enough. You then only need to place the <bookicorn-widget> element on the individual pages.

Can I show the widget in a popup or modal?

Yes. Make sure the script is already loaded before the popup opens. The easiest way is to have the script in the global footer.

Does it work with cookie consent tools?

Bookicorn widgets do not set tracking or marketing cookies. Strictly speaking, no consent is required. For maximum compliance, you can still load the script only after consent.

Can I control the width of the widget?

The widget takes the full width of the container it is placed in. You can therefore control the width via the surrounding HTML container. Additionally, you can set a maximum width in the Widget Builder.

Do I need technical knowledge?

No. You only need access to your website's HTML. With most website builders, this is done through an "HTML block" or "code embed".

Next Steps

ZurückWidget builderWeiterCustomize

Fragen oder Feedback?

Wir helfen dir gerne weiter. Kontaktiere unser Support-Team.