Blokkenschema in een iframe tonen

Mocht je een blokkenschema van ons willen tonen op je eigen website gebruik dan deze instructies. Dat is de aanbevolen manier. Maar mocht het onverhoopt toch niet werken, dan beschrijven we hier een workaround.

Het is mogelijk zelf een iframe naar ons blokkenschema te maken. Dit werkt op dezelfde wijze als hoe Spotify, YouTube of Issuu hun embeds aanbieden. Dus als zulke implementaties voor jou wel werken, dan gaat deze workaround ook werken.

Let op, er zitten wel wat haken en ogen aan deze manier. Lees die dus eerst en als je dan nog steeds wilt doorgaan, volg dan pas de workaround instructie.

• Nadeel 1: De afmetingen van het iframe worden niet automatisch ingesteld
  Je moet zelf de hoogte van het iframe instellen zodat de inhoud volledig getoond wordt. Kies niet een te kleine hoogte, want dan zal het iframe zelf scrollbalken tonen en dat is niet mooi. Zeker als de omringende website ook al scrollbars heeft. Dubbele scrollbalken, dubbel niet mooi.

• Nadeel 2: Blok detail informatie kan buiten beeld verschijnen
  Wanneer een bezoeker een blok aanklikt dan verschijnt er detail informatie over dat blok bovenaan het blokkenschema. Wanneer je bezoeker zich onderin het blokkenschema bevindt, dan moet hij/zij dus scrollen om die detail informatie te zien. Dit is niet ideaal en niet elke bezoeker snapt dit.

• Nadeel 3: Updates moet je handmatig doorvoeren
  De widget.min.js uit stap 3 zorgt ervoor dat als er in de toekomst browser updates of updates aan onze kant zijn, de implementatie zich automatisch hierop aanpast (denk aan cookies binnen iframes die nodig zijn om favorieten op te slaan).

Deze nadelen heb je niet als je onze aanbevolen manier gebruikt, die nadelen worden door de widget.min.js automatisch ondervangen.

Iframe workaround instructie

1. Plak deze html op de pagina waar het blokkenschema moet komen:

   <iframe src="https://blokkenschema.nl/embed/<slug>/dag-<dag>?embedder=<embedder_host>" width="100%" height="800" frameborder="0" allow="web-share" loading="eager" seamless></iframe>

2. Het src-attribuut begint met https://blokkenschema.nl/embed/
   Let op vergeet /embed/ in de url niet!

3. Vervang <slug> in de url van de src door de evenement slug zoals die in het beheer is te vinden.

4. Indien het een eendaags evenement is, verwijder dan /dag-<dag> uit de url.
   Bij een meerdaags evenement kan je naar een specifieke dag linken; vervang <dag> voor de juiste dag, bijvoorbeeld: /dag-3.
   Tip: Verwijder /dag-<dag> en het iframe zal automatisch de juiste dag tonen op basis van de huidige datum.

5. Vervang de <embedder_host> GET-waarde door de hostname van de website waar de embed wordt geplaatst. Geen https:// of http:// voor de hostname en geen / (slash) na de hostname. Niet https://example.com/ maar enkel example.com of www.example.com.

6. Pas de width- en height-attributen van het iframe aan zodat er geen scrollbalken verschijnen.
   Inspect de height van de html in het iframe nadat het uit-gerenderd is en neem die height over.
   Of neem als vuistregel: 150px per area. Dus bij een blokkenschema met zes area's geef 900px height aan het iframe.

Leeg iframe? Check de status code

• 404 -De evenement slug is fout. Of andere spelfout in de url van de iframe src gemaakt. Controleer stap 1-4 opnieuw.

• 403 - De hostname die als embedder GET-waarde is ingevuld aan het einde van url van de iframe src is bij ons niet ge-whitelist of verkeerd gespeld. Zie stap 5. Let op of de hostname van de website daadwerkelijk met of zonder www is.

Tot slot: op deze workaround geven we geen garantie. Zaken kunnen op deze manier niet of deels werken of er anders dan bedoeld uitzien.

Published 2024-06-26