Een widget toont je Unitlify-shop rechtstreeks op je eigen website. De gast blijft op je pagina, zoekt een aanbod, kiest datum en tickets en betaalt, zonder naar unitlify.de over te stappen. Technisch gezien is de widget je shop in een kader: alle aanbiedingen, prijzen, betaalmethoden en juridische teksten komen uit Unitlify, kleuren en lettertypen uit de shopontwerper.

Je beheert widgets onder Boekingssysteem → Website-integratie. Je hebt hiervoor het recht "Website-integratie" nodig.

Stap 1: domein toestaan

Voordat een widget op je website werkt, moet het domein van de website onder Toegestane domeinen zijn ingevoerd. Zonder vrijgave toont de widget een foutmelding in plaats van de aanbiedingen.

Invoeren zonder https://, bijvoorbeeld mijn-bedrijf.nl. Met of zonder www. maakt niet uit.
Draait de widget op een subdomein zoals shop.mijn-bedrijf.nl of tickets.mijn-bedrijf.nl, voer dan dat subdomein in. mijn-bedrijf.nl alleen is daarvoor niet voldoende.
De website moet via https draaien.
Na het invoeren kan het tot een minuut duren voordat de vrijgave overal werkt.

Klik op Nieuwe widget. De editor leidt je in vijf stappen: widgettype, instellingen, ontwerp, zichtbare inhoud, opslaan.

De vier widgettypes

Type	Toont	Aanbiedingen
Catalogus	Meerdere aanbiedingen als tegels of lijst. De gast klikt een aanbod aan en boekt in de widget.	Alle aanbiedingen, alle van één locatie of een eigen selectie
Product	De volledige pagina van een aanbod met afbeeldingen, beschrijving en boekingsvak.	Precies één aanbod
Booking	Alleen het boekingsvak: kalender, tijden, ticketcategorieën, kassa. Voor pagina's waarop je het aanbod zelf beschrijft.	Precies één aanbod
Knop	Een knop die het boekingsvak, de productpagina of de catalogus in een venster boven je pagina opent.	Afhankelijk van het doel

Instellingen

Taal: Duits, Engels, Frans of Spaans. Dit is de terugvaltaal. De widget richt zich eerst naar de taal van je website (het lang-attribuut van de pagina), dan naar de browsertaal van de gast, dan naar deze instelling.
SUB-ID: een vrij te kiezen code van maximaal 60 tekens, waarop je boekingen later kunt analyseren. Meer daarover hieronder.
Naam en beschrijving: alleen voor jou; ze verschijnen in de widgetlijst en in de boekingsdetails.
Knop: tekst van de knop (maximaal 40 tekens, anders "Nu boeken"), doel (boekingsvak, productpagina, catalogus) en of de knop zwevend rechtsonder of aan de rechterkant staat.

Ontwerp

Breedte in pixels (leeg = volledige breedte), uitlijning, hoogte (groeit mee met de inhoud of vast), rand en hoekradius. Bij de catalogus bovendien tegels of lijst, tegels per rij en of het eerste aanbod wordt uitgelicht. Op de smartphone staat altijd één tegel per rij.

Een vaste hoogte zorgt voor een eigen schuifbalk in de widget. "Groeit mee met de inhoud" is bijna altijd de betere keuze.

Kleuren, lettertype en tegelvorm stel je niet hier in, maar in de Shopontwerper. Ze gelden voor de shop en alle widgets samen.

Zichtbare inhoud

Bij catalogus en product bepaal je wat te zien is: afbeelding, prijs, duur en plaats op de tegel; kop, zoekbalk, filters, aantal resultaten, cadeaubonnen en vertrouwensbalk eromheen; galerij, beschrijving en hoogtepunten op de productpagina. In de widget staan de elementen eromheen standaard uit, behalve cadeaubonnen. Filters verschijnen pas als er iets te filteren valt (minstens twee locaties, talen of prijzen). Cadeaubonnen toont de widget alleen bij "Alle aanbiedingen".

Bij de Booking-widget kies je alleen of kalender, resterende tickets en uitverkochte categorieën worden getoond.

Stap 3: insluitcode invoegen

Na het opslaan toont de editor de insluitcode:

<unitlify-katalog widget-id="JOUW-WIDGET-ID"></unitlify-katalog>
<script src="https://unitlify.de/widget/v1/katalog.js" defer></script>

Voeg beide regels in op de plek van je website waar de widget moet verschijnen.

WordPress, Elementor, Wix, Squarespace: code in een HTML-element (niet in een tekstblok) invoegen.
Meerdere widgets op één pagina: elke widget krijgt zijn eigen <unitlify-katalog>-element. Het script hoeft maar één keer op de pagina te staan, maar een tweede keer kan geen kwaad.
Snelheidsplugins zoals WP Rocket, LiteSpeed Cache of Autoptimize: sluit katalog.js uit van "JavaScript vertraagd uitvoeren", anders verschijnt de widget pas na een klik op de pagina.

Instellingen in de code overschrijven

Je kunt ontwerpinstellingen rechtstreeks op het element overschrijven, zonder in het dashboard een tweede widget aan te maken:

<unitlify-katalog widget-id="…" max-width="640" align="center" frame="border" lang="en"></unitlify-katalog>

Attribuut	Waarden
`max-width`	Getal in pixels, `full` of `100%`
`align`	`left`, `center`, `right`
`height-mode` / `height`	`auto` of `fixed` plus getal
`frame`	`none`, `border`, `shadow`
`radius`	Getal in pixels
`lang`	`de`, `en`, `fr`, `es`, legt de taal vast
`button-text`	Tekst van de knop (alleen Knop)
`floating`	`false` schakelt de zwevende knop uit (alleen Knop)
`partner`	Code van een affiliatepartner, zie Affiliatepartners

Het attribuut lang="de" is de snelste weg als de widget in de verkeerde taal verschijnt, bijvoorbeeld omdat je website lang="en-US" heeft ingesteld.

Wat er na de boeking gebeurt

De gast blijft op zijn bevestiging in de widget; je website wordt niet verlaten. Bij de Knop-widget begint het volgende openen weer opnieuw.

Voor je webbureau: de widget activeert na een afgeronde boeking op het element de gebeurtenis unitlify:booking, zonder persoonsgegevens. Daarmee kun je bijvoorbeeld een conversiedoel in Analytics activeren. De gebeurtenis betekent "boeking aangemaakt", niet "betaald": ze komt ook bij overboeking en betalen ter plaatse. Bij betaalmethoden met doorsturing naar de aanbieder (Klarna, iDEAL) wordt ze niet geactiveerd.

SUB-ID's: boekingen naar herkomst analyseren

Elke widget kan een SUB-ID dragen, bijvoorbeeld startpagina, landingspagina-zomer of partner-hotel-x. Bij elke boeking en elke cadeaubonaankoop via de widget wordt de SUB-ID bij de boeking opgeslagen. Meerdere widgets mogen dezelfde SUB-ID dragen; ze worden dan samen geanalyseerd.

Je ziet de resultaten op drie plekken:

Website-integratie: per widget boekingen, deelnemers en omzet voor 30 dagen, 90 dagen, 12 maanden of totaal, daaronder de tabel "Per SUB-ID". De omzet bevat alle niet-geannuleerde boekingen, dus ook nog onbetaalde.
Boekingenlijst: filters "Alle widgets" en "Alle SUB-ID's". De filters verschijnen pas als er widgets respectievelijk SUB-ID's bestaan.
Export: kolommen "Widget (insluiting)" en "SUB-ID".

De SUB-ID wordt bij het boeken gekopieerd. Wijzig je hem later, dan behouden oude boekingen de oude code. Verwijder je een widget, dan verliezen zijn boekingen de koppeling aan de widget; de SUB-ID blijft bij de boeking staan, maar staat niet meer in het filter zolang geen andere widget hem draagt.

In de widget gelden dezelfde betaalmethoden en regels als in de shop, zie Betaalmethoden instellen. Voor Apple Pay moet je bovendien het domein van je website onder Betaalmethoden → Geregistreerde domeinen invoeren.

Voorbeeld

Het voorbeeld in de editor toont de opgeslagen stand. Niet-opgeslagen wijzigingen zie je noch in het voorbeeld, noch op je website. Na het opslaan kan het op je website tot een minuut duren voordat de nieuwe versie verschijnt.

Checklist bij problemen

Foutmelding in plaats van aanbiedingen: domein niet toegestaan, of alleen het hoofddomein in plaats van het subdomein ingevoerd. De melding noemt het domein dat ontbreekt.
Widget blijft leeg: website draait via http in plaats van https, of een snelheidsplugin vertraagt het script.
Verkeerde taal: lang-attribuut van je website controleren of lang="de" op het element zetten.
Wijziging niet zichtbaar: niet opgeslagen, of nog binnen de minuut cache.
Geen cadeaubonnen in de catalogus: cadeaubonnen verschijnen alleen bij "Alle aanbiedingen".
Apple Pay ontbreekt in de widget: domein onder Betaalmethoden → Geregistreerde domeinen toevoegen.
Boekingen ontbreken in de widgetstatistiek: de boeking kwam niet via de widget, maar via de shoplink of een ander kanaal.

Je beheert widgets onder Boekingssysteem → Website-integratie. Je hebt hiervoor het recht "Website-integratie" nodig.

Stap 1: domein toestaan

Voordat een widget op je website werkt, moet het domein van de website onder Toegestane domeinen zijn ingevoerd. Zonder vrijgave toont de widget een foutmelding in plaats van de aanbiedingen.

Invoeren zonder https://, bijvoorbeeld mijn-bedrijf.nl. Met of zonder www. maakt niet uit.
Draait de widget op een subdomein zoals shop.mijn-bedrijf.nl of tickets.mijn-bedrijf.nl, voer dan dat subdomein in. mijn-bedrijf.nl alleen is daarvoor niet voldoende.
De website moet via https draaien.
Na het invoeren kan het tot een minuut duren voordat de vrijgave overal werkt.

Klik op Nieuwe widget. De editor leidt je in vijf stappen: widgettype, instellingen, ontwerp, zichtbare inhoud, opslaan.

De vier widgettypes

Type	Toont	Aanbiedingen
Catalogus	Meerdere aanbiedingen als tegels of lijst. De gast klikt een aanbod aan en boekt in de widget.	Alle aanbiedingen, alle van één locatie of een eigen selectie
Product	De volledige pagina van een aanbod met afbeeldingen, beschrijving en boekingsvak.	Precies één aanbod
Booking	Alleen het boekingsvak: kalender, tijden, ticketcategorieën, kassa. Voor pagina's waarop je het aanbod zelf beschrijft.	Precies één aanbod
Knop	Een knop die het boekingsvak, de productpagina of de catalogus in een venster boven je pagina opent.	Afhankelijk van het doel

Instellingen

Taal: Duits, Engels, Frans of Spaans. Dit is de terugvaltaal. De widget richt zich eerst naar de taal van je website (het lang-attribuut van de pagina), dan naar de browsertaal van de gast, dan naar deze instelling.
SUB-ID: een vrij te kiezen code van maximaal 60 tekens, waarop je boekingen later kunt analyseren. Meer daarover hieronder.
Naam en beschrijving: alleen voor jou; ze verschijnen in de widgetlijst en in de boekingsdetails.
Knop: tekst van de knop (maximaal 40 tekens, anders "Nu boeken"), doel (boekingsvak, productpagina, catalogus) en of de knop zwevend rechtsonder of aan de rechterkant staat.

Ontwerp

Een vaste hoogte zorgt voor een eigen schuifbalk in de widget. "Groeit mee met de inhoud" is bijna altijd de betere keuze.

Kleuren, lettertype en tegelvorm stel je niet hier in, maar in de Shopontwerper. Ze gelden voor de shop en alle widgets samen.

Zichtbare inhoud

Bij de Booking-widget kies je alleen of kalender, resterende tickets en uitverkochte categorieën worden getoond.

Stap 3: insluitcode invoegen

Na het opslaan toont de editor de insluitcode:

<unitlify-katalog widget-id="JOUW-WIDGET-ID"></unitlify-katalog>
<script src="https://unitlify.de/widget/v1/katalog.js" defer></script>

Voeg beide regels in op de plek van je website waar de widget moet verschijnen.

WordPress, Elementor, Wix, Squarespace: code in een HTML-element (niet in een tekstblok) invoegen.
Meerdere widgets op één pagina: elke widget krijgt zijn eigen <unitlify-katalog>-element. Het script hoeft maar één keer op de pagina te staan, maar een tweede keer kan geen kwaad.
Snelheidsplugins zoals WP Rocket, LiteSpeed Cache of Autoptimize: sluit katalog.js uit van "JavaScript vertraagd uitvoeren", anders verschijnt de widget pas na een klik op de pagina.

Instellingen in de code overschrijven

Je kunt ontwerpinstellingen rechtstreeks op het element overschrijven, zonder in het dashboard een tweede widget aan te maken:

<unitlify-katalog widget-id="…" max-width="640" align="center" frame="border" lang="en"></unitlify-katalog>

Attribuut	Waarden
`max-width`	Getal in pixels, `full` of `100%`
`align`	`left`, `center`, `right`
`height-mode` / `height`	`auto` of `fixed` plus getal
`frame`	`none`, `border`, `shadow`
`radius`	Getal in pixels
`lang`	`de`, `en`, `fr`, `es`, legt de taal vast
`button-text`	Tekst van de knop (alleen Knop)
`floating`	`false` schakelt de zwevende knop uit (alleen Knop)
`partner`	Code van een affiliatepartner, zie Affiliatepartners

Het attribuut lang="de" is de snelste weg als de widget in de verkeerde taal verschijnt, bijvoorbeeld omdat je website lang="en-US" heeft ingesteld.

Wat er na de boeking gebeurt

De gast blijft op zijn bevestiging in de widget; je website wordt niet verlaten. Bij de Knop-widget begint het volgende openen weer opnieuw.

SUB-ID's: boekingen naar herkomst analyseren

Je ziet de resultaten op drie plekken:

Website-integratie: per widget boekingen, deelnemers en omzet voor 30 dagen, 90 dagen, 12 maanden of totaal, daaronder de tabel "Per SUB-ID". De omzet bevat alle niet-geannuleerde boekingen, dus ook nog onbetaalde.
Boekingenlijst: filters "Alle widgets" en "Alle SUB-ID's". De filters verschijnen pas als er widgets respectievelijk SUB-ID's bestaan.
Export: kolommen "Widget (insluiting)" en "SUB-ID".

Voorbeeld

Checklist bij problemen

Foutmelding in plaats van aanbiedingen: domein niet toegestaan, of alleen het hoofddomein in plaats van het subdomein ingevoerd. De melding noemt het domein dat ontbreekt.
Widget blijft leeg: website draait via http in plaats van https, of een snelheidsplugin vertraagt het script.
Verkeerde taal: lang-attribuut van je website controleren of lang="de" op het element zetten.
Wijziging niet zichtbaar: niet opgeslagen, of nog binnen de minuut cache.
Geen cadeaubonnen in de catalogus: cadeaubonnen verschijnen alleen bij "Alle aanbiedingen".
Apple Pay ontbreekt in de widget: domein onder Betaalmethoden → Geregistreerde domeinen toevoegen.
Boekingen ontbreken in de widgetstatistiek: de boeking kwam niet via de widget, maar via de shoplink of een ander kanaal.

Widgets op je eigen website

Wat een widget is

Stap 1: domein toestaan

Stap 2: widget aanmaken

De vier widgettypes

Instellingen

Ontwerp

Zichtbare inhoud

Stap 3: insluitcode invoegen

Instellingen in de code overschrijven

Wat er na de boeking gebeurt

SUB-ID's: boekingen naar herkomst analyseren

Betaalmethoden in de widget

Voorbeeld

Checklist bij problemen

Widgets op je eigen website

Wat een widget is

Stap 1: domein toestaan

Stap 2: widget aanmaken

De vier widgettypes

Instellingen

Ontwerp

Zichtbare inhoud

Stap 3: insluitcode invoegen

Instellingen in de code overschrijven

Wat er na de boeking gebeurt

SUB-ID's: boekingen naar herkomst analyseren

Betaalmethoden in de widget

Voorbeeld

Checklist bij problemen