Integrér jeres aktiviteter på hjemmeside

Med en “embed” kan I vise jeres kommende aktiviteter på jeres egen hjemmeside.
Jeres kunder ser, hvad I tilbyder, og kommer videre til tilmelding med ét klik.

For at bruge funktionen, I skal have adgang til hjemmesidens kode / CMS-system.
Passer en anden jeres hjemmeside, så send dem denne artikel.

Kode

<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>

Husk ved brug af koden:

1. Udskift XXXXXXXXX med jeres location-id.
   LokationID kan du finde ved bruge Booklis linkgenerator
   

2. Scriptet skal med
   Det sørger for, at kalenderen automatisk tilpasser sin højde til indholdet. Uden det får kalenderen en fast højde og sin egen scrollbar.
   

3. Minimumsbredde på container
   Det fungerer bedst, hvis containeren, som embed’et indsættes i, har en minimumsbredde på 1540 pixels på desktop.

Indstillingsmuligheder

Farvetema

variant= styrer kalenderens farve. Skift tallet ud med det tema, der passer til jeres hjemmeside:

Mangler I en farve, der passer bedre til jeres design, så skriv til os — vi kan lave flere temaer.

Flere lokationer

Har I flere lokationer, kan I vise dem samlet i én kalender.
Skriv location-id'erne efter hinanden adskilt af komma — uden mellemrum:

locationIds=XXXXXXXXXXX,YYYYYYYYYYY

Sprog

Kalenderen kan vises på fire sprog. Skift koden i locale= ud med den, I vil bruge:

Prøv koden af, før den ryger på hjemmesiden

Vil I se, hvordan kalenderen tager sig ud med jeres farve og sprog, kan I teste koden på codepen.io/pen.

Indsæt hele koden i HTML-feltet, så vises kalenderen med det samme.