Recras integreren met een iframe

Handleiding voor het integreren van Recras met een iframe

Integreer Recras met een iframe op je website

Naast de WordPress plugin of een maatwerk integratie, kun je er ook voor kiezen om Recras op je website te integreren met een iframe. Hiermee kan je online te boeken arrangementen en contactformulieren weergeven. Voor een mooie integratie zijn er een aantal opties, waaronder het toevoegen van een custom stylesheet (CSS) en het meegeven van een automatische hoogte van het iframe. De handleiding hiervoor vind je in onderstaand artikel.

Gebruik van je eigen huisstijl met CSS

Natuurlijk wil je dat de Recras integratie op je website past bij jouw huisstijl. Zo heb je de mogelijkheid om de layout van de contactformulieren, het online boeken en beschikbaarheidskalender aan te passen. Hiervoor gebruik je een Custom Stylesheet.

 

Custom Stylesheet (CSS) toevoegen

In een CSS-bestand kun je opmaak definiëren van onder andere teksten en tabellen, bijvoorbeeld lettertypen, lettergroottes en kleuren. De meeste websitebouwers kunnen een dergelijk bestand opstellen. Voor een iframe moet vervolgens de CSS-code in Recras worden toegevoegd bij: Beheer → Overig → Overige instellingen → Eigen CSS. Voor integratie via de library moet deze code in de website geïntegreerd worden.

Om niet vanaf nul te beginnen zou je gebruik kunnen maken van dit CSS-bestand dat ook in de WordPress-plugin gebruikt wordt.

 

iframe doorzichtig maken

Als het volledig aanpassen van de CSS teveel werk is, maar je wel wilt dat iframes beter geïntegreerd worden, kun je de volgende regel in je CSS plaatsen:

body { background: transparent; }

iframe automatisch de juiste hoogte meegeven

Om te zorgen dat wat je op jouw website integreert ook goed zichtbaar is, is het raadzaam om het iframe automatisch de goede hoogte mee te geven. Hiervoor gebruik je de volgende code.

<iframe src=”URL VAN HET IFRAME” style=”width:100%;height:450px” frameborder=0 scrolling=”auto” id=”UNIEK ID VOOR HET IFRAME”></iframe>
<script>
window.addEventListener(‘message’, function(e) {
var origin = event.origin || event.originalEvent.origin;
if (origin.match(/JOUW RECRASNAAM\.recras\.nl/)) {
document.getElementById(‘UNIEK ID VOOR HET IFRAME’).style.height = e.data.iframeHeight + ‘px’;
}
});
</script>

Nadat je de code hebt toegevoegd, moet je drie onderdelen aanpassen die van toepassing zijn op jouw eigen Recras omgeving.

  1. De URL van het iframe
    Dit moet het adres van het iframe worden; https://demo.recras.nl/onlineboeking bijvoorbeeld.
  2. Het unieke ID voor het iframe
    Verzin hier een unieke identificatie, recrasiframe1 bijvoorbeeld. Let op: het ID mag geen spaties bevatten en moet op twee locaties worden aangepast. Gebruik exact dezelfde identificatie op beide plekken.
  3. Jouw Recras-naam
    De Recras-naam vind je in de adresbalk wanneer je bent ingelogd. Voor https://demo.recras.nl/ is dat ‘demo’.