Timetable/blokkenschema op je website

Het zelf bouwen van een interactief, gebruiksvriendelijk en beheersbaar blokkenschema dat in elke browser en op elk schermgrootte en device goed werkt, is een tijdrovende en kostbare klus dat snel in de papieren gaat lopen. Dat weten wij als geen ander, want die investering hebben wij al gedaan en die onverwachte kosten en valkuilen zijn wij allang ingestapt (en weer uitgeklommen)! Dus waarom niet gebruik maken van onze kant-en-klare oplossing op je bestaande website en flink besparen op de ontwikkelkosten? Deze integratie heb je zo aan de praat!

Ondersteun je mijn CMS of programmeertaal ook?

Ja, alle CMS-en zoals Wix, Wordpress, Drupal, Typo3 en elk platform PHP (Laravel, Symfony), Python (Django) .NET, Java of Javascript worden ondersteund. Staat die hier niet tussen? Welke technieken of CMS je ook gebruikt; Kan je website een iframe tonen? Dan is het mogelijk een blokkenschema van ons te integreren.

Het is ook mogelijk blokkenschema.nl te gebruiken binnen een iPhone app of Android app.

Show me some code

Het insluiten of embedden van een blokkenschema is een eitje met onderstaande embed html/js code instructie.

  1. Plaats onderstaande hyperlink in de body van je website op de plek waar je het blokkenschema wilt gaan tonen. Bij voorkeur in een 
    div
    waar jij de hoogte en breedte van bepaalt :
  2. Vervang de naam 
    Blokkenschema Bevrijdingspop 2022
    met jouw evenement naam.
    Vervang de url in de 
    href
    met de url van jouw blokkenschema. Heb je een meerdaags evenement? Plak 
    /dag-2
    achter de url om voor die dag het blokkenschema te tonen.
    Moet het blokkenschema een vaste hoogte krijgen? Vul de gewenste hoogte dan in pixels of percentage in bij 
    data-height
    attribuut en 
    data-full-height
    op 
    false
    .
    Of wil je geen scrollbars en dat de iframe automatisch de benodigde hoogte wordt, zet dan 
    data-full-height
    op 
    true
    .
  3. Voeg onderop in jouw pagina (vlak voor de sluitende 
    </body>
    tag) deze javascript regel toe :

    Dit zorgt ervoor dat op de plaats van de hyperlink uit stap 1 een iframe met het blokkenschema (met de breedte en hoogte van de 
    data-width
    en 
    data-height
    attributen) wordt neergezet.
  4. Klaar. Wil je de integratie weer ongedaan maken, verwijder dan de code uit stap 1 en 3.

Wat kan ik nog meer instellen?

Op de settings demo pagina staan alle configuratie mogelijkheden toegelicht met doorkliks naar standalone live demo's.

Wil je maatwerk vormgeving? Dat is via CSS te regelen. De blokkenschema markup in het iframe hebben duidelijke id's en classnames die je kunt targetten. Nog specifiekere wensen? Neem onderop contact op.

Voorbeelden in het wild

Hieronder staan twee demo's die het resultaat van bovenstaande embed instructie laten zien. Doe vooral view-source!

Let op referer en Content Security Policy

Wanneer je het uitgeklede of aangeklede voorbeeld copyeert en ter test serveert dan zal het blokkenschema niet worden geladen! Wij stellen per integratie in vanaf welke domeinnamen de integratie is toegestaan en zal je browser weigeren het iframe in te laden. Voor deze twee voorbeelden mag dit alleen vanaf maketime.nl (waar de voorbeelden draaien). Dit is om ongeoorloofd gebruik te voorkomen.

Het embed code voorbeeld bovenaan (met bevrijdingspop-2022) werkt wel vanaf elk domein en zou je wel ter test kunnen gebruiken vanaf andere domeinen (zolang het maar https is).

Standalone

Het is ook mogelijk het blokkenschema in een popin of nieuw venster en zonder onze headers en footers te tonen. Het blokkenschema ziet er dan net zo uit in de iframe weergave, maar dan in een nieuwe venster. Je ontvangt hiervoor van ons de juiste URL.

Gebruik maken van deze integratie op je website, andere wensen of andere vragen? Neem contact met ons op.