Integrate your activities on your website

With an “embed”, you can display your upcoming activities on your own website.
Your customers can see what you offer and proceed to registration with a single click.

To use this feature, you need access to the website’s code / CMS system.
If someone else manages your website, send them this article.

Code

<iframe id="bookli-embed" src="https://bookli.app/embeds/workshop-calendar?locationIds=XXXXXXXXXXX&variant=0&locale=da-DK" style="width: 100%; display: block; border: none;"></iframe>

<script>
    (function () {
        var bookliEmbedFrame = document.getElementById('bookli-embed')

        if (!bookliEmbedFrame) {
            return
        }

        function onMessage(event) {
            var data = event && event.data

            if (data && data.type === 'bookli-embed-resize' && typeof data.height === 'number') {
                bookliEmbedFrame.style.height = data.height + 'px'
            }
        }

        window.addEventListener('message', onMessage, false)
    })()
</script>

Please note when using the code:

1. Replace XXXXXXXXX with your location ID.
   You can find the Location ID using Bookli’s link generator
   

2. Include the script
   This ensures that the calendar automatically adjusts its height to fit its content. Without it, the calendar will have a fixed height and its own scrollbar.
   

3. Minimum container width
   It works best if the container into which the embed is inserted has a minimum width of 1540 pixels on desktop.

Configuration options

Color theme

variant= controls the calendar’s color. Replace the number with the theme that suits your website:

Missing a color that better matches your design? Write to us — we can create more themes.

Multiple locations

If you have multiple locations, you can display them together in one calendar.
Write the location IDs one after another, separated by commas — with no spaces:

locationIds=XXXXXXXXXXX,YYYYYYYYYYY

Language

The calendar can be displayed in four languages. Replace the code in locale= with the one you want to use:

Try out the code before it goes on the website

If you’d like to see what the calendar looks like with your color and language, you can test the code at codepen.io/pen.

Insert the entire code in the HTML field, and the calendar will appear immediately.