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

  1. De afmetingen van het iframe moet je handmatig vastzetten
    Let op dat je niet een te kleine hoogte neemt want dan zal het iframe zelf scrollbalken tonen en dat is niet mooi. Zeker als je eigen website ook al scrollbars heeft. Dubbele scrollbalken, dubbel niet mooi.

  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.

  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 (geen garantie)

Kan het echt niet anders, dan volgt hier een instructie hoe jezelf een iframe kunt maken naar ons blokkenschema plus de benodigde stappen.

  1. Plak deze html op de pagina waar het blokkenschema moet komen:
  2. De src begint met https://blokkenschema.nl/embed/ (let op /embed/, vergeet je dit dan werkt het niet)
  3. Vervang <slug> door de slug zoals die in het beheer is te vinden. Maak je hierin een fout, dan krijg je een lege pagina met 404 http status code terug. Krijg je een 403, zie punt 5.
  4. Indien het een eendaags evenement is, verwijder dan /dag-<dag> uit de src. Bij meerdaags evenement kan je naar een specifieke dag linken; vervang <dag> voor de juiste dag, bijvoorbeed: /dag-3. Verwijder /dag-<dag> en het iframe zal automatisch de juiste dag tonen. Bestaat de doorgegeven dag niet, dan krijg je een lege pagina een 404 http status code terug.
  5. Vervang <website_url> door de hostname van je website die aan ons is doorgegeven. Doe je dit niet, dan krijg je een lege pagina en 403 http status code terug. Let op geen https:// of http:// voor de hostnaam en geen / (slash) na de hostname. Dus geen https://example.com/ maar example.com.
  6. Pas de width en height aan zodat er geen scrollbalken in het iframe verschijnen. Kijk naar de height van de html un het iframe nadat het uitgerenderd is en neem die height over. Of neem als vuistregel: 150px per area. Dus met zes area's geef 900px height.

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