Boekingspagina insluiten in je website

Je boekingspagina werkt in Univents als zelfstandige openbare pagina. Je kunt hem ook direct insluiten in je bestaande website, bijvoorbeeld op een subpagina voor catering, evenementen of tastings. Univents maakt de benodigde iFrame-code kant-en-klaar voor je, je hoeft zelf niets te schrijven.

Wat je vooraf nodig hebt

Voordat je kunt insluiten, heb je een kant-en-klare boekingspagina nodig. Heb je er nog geen, maak dan eerst een pagina aan. Open daarvoor je overzicht met boekingspagina’s en klik rechtsboven op Nieuwe boekingspagina. Daar geef je een naam op, kies je een ontwerp (Webshop, Aanvraag of Stepper) en de boekbare producten en locaties, en bepaal je welke vragen je klanten moeten beantwoorden.

Om de ingesloten pagina zichtbaar te maken voor je klanten, moet hij actief zijn. In het overzicht zie je dat aan de statusbadge naast de naam: Live betekent gepubliceerd, Concept betekent nog niet zichtbaar. Klik op de badge om tussen beide statussen te wisselen. Een pagina in conceptmodus wordt niet weergegeven in de iFrame.

Embed-code ophalen

De insluitcode vind je direct in het overzicht met boekingspagina’s. Elke pagina heeft daar aan de rechterkant een rij actiepictogrammen.

1. Open je overzicht met boekingspagina’s.
2. Zoek de rij van de gewenste boekingspagina.
3. Klik rechts op het codepictogram met de tooltip Embed-snippet kopiëren.
4. Univents kopieert de kant-en-klare iFrame-code naar je klembord en bevestigt dit met de melding Embed-code gekopieerd.

De gekopieerde code ziet er ongeveer zo uit:

<iframe
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

Heb je alleen de directe link nodig in plaats van de iFrame-code, gebruik dan het pictogram met de tooltip Boekingslink kopiëren.

Code in je website plaatsen

Nu plak je de gekopieerde code op de plek in je website waar de boekingspagina moet verschijnen.

1. Open in je websitebouwer de pagina waarop de boeking moet verschijnen.
2. Voeg een element voor eigen HTML-code toe. In WordPress heet dit blok vaak „Aangepaste HTML”, in andere systemen „Code”, „Insluiten” of „HTML”.
3. Plak de gekopieerde iFrame-code in dit element.
4. Sla de pagina op en publiceer hem.

De breedte staat in de code op width="100%", dus de boekingspagina past zich automatisch aan je inhoudsgebied aan. Met min-height:700px leg je de minimale hoogte vast. Is je boekingspagina lang en lijkt hij onderaan afgesneden, verhoog dan deze waarde.

Voor ontwikkelaars: hoogte automatisch laten meegroeien in plaats van vast instellen

De vaste waarde min-height:700px in de embed-code is slechts een minimale hoogte. Is er niet genoeg ruimte, dan wordt de boekingspagina onderaan afgesneden. Heb je zelf toegang tot de code van je website (of je webbouwer), dan kun je de hoogte in plaats daarvan automatisch laten meegroeien: de ingesloten pagina stuurt bij elke formaatwijziging zelfstandig een bericht naar het bovenliggende venster.

Een klein script op je website vangt dit bericht op en past de iFrame-hoogte live aan:

<iframe
  id="univents-booking-iframe"
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'univents-embed-resize') {
      var iframe = document.getElementById('univents-booking-iframe');
      if (iframe) iframe.style.height = event.data.height + 'px';
    }
  });
</script>

Zonder dit script blijft alles werken zoals gewoonlijk. Je moet dan alleen zo nodig de vaste min-height-waarde met de hand verhogen (zie de veelgestelde vragen hieronder).

Cookies in het ingesloten gedeelte

De ingesloten boekingspagina toont geen eigen cookiebanner en plaatst geen cookies. Dat is bewust zo: twee banners boven elkaar, die van jou op de website en nog een in de iFrame, zouden je bezoekers alleen maar in verwarring brengen. De toestemming ligt daarmee volledig bij je eigen website; voor de ingesloten boekingspagina hoef je niets extra’s te vragen.

Opent iemand de boekingspagina op zijn eigen adres, dus niet ingesloten, dan is het andersom: daar toont Univents een eigen cookiebanner.

Testen en controleren

Controleer het resultaat eerst een keer voordat je de ingesloten pagina aan klanten geeft.

1. Open de pagina van je website waarop je de code hebt geplaatst.
2. Controleer of de boekingspagina volledig en zonder afsnijding wordt weergegeven.
3. Wil je het gedrag vooraf in Univents bekijken, klik dan in het overzicht op het pictogram met de tooltip Live-voorbeeld openen om de pagina in een nieuw tabblad te zien.
4. Doe als test een voorbeeldaanvraag, zodat je zeker weet dat de boeking netjes bij je binnenkomt.

Wil je daarna nog iets aan de inhoud, het ontwerp of de vragen wijzigen, klik dan in de rij van de boekingspagina op Configureren. Wijzigingen verschijnen automatisch ook in de al ingesloten versie, je hoeft de iFrame-code niet opnieuw te kopiëren.

Veelgestelde vragen

Moet ik de code na elke wijziging opnieuw kopiëren? Nee. De iFrame toont altijd de actuele stand van je boekingspagina. Inhoudelijke wijzigingen via Configureren zijn direct ook zichtbaar in de ingesloten versie.

De pagina wordt onderaan afgesneden, wat nu? Verhoog in de geplakte code de waarde bij min-height:700px, bijvoorbeeld naar 1000px. Zo krijgt de boekingspagina meer ruimte. Wie toegang heeft tot de code van de website, kan de hoogte in plaats daarvan automatisch laten meegroeien. Zie de sectie „Voor ontwikkelaars” hierboven.

Mijn klanten zien niets in de iFrame. Controleer of de boekingspagina de status Live heeft. Staat hij op Concept, dan wordt hij niet openbaar weergegeven. Klik op de statusbadge om hem te activeren.

Waar vind ik de handleiding ook alweer? In het overzicht staat per pagina een boekpictogram met de tooltip Handleiding voor insluiten openen, dat je direct hierheen brengt.