Integreren met Recras (voor devs)

De volgende zaken vanuit Recras zijn te integreren met je website:

  • Contactformulier
  • Arrangementen
  • Activiteiten (Producten)
  • Prijzen
  • Beschikbaarheid
  • Online boeken (en betalen via Mollie)

Hoe kan dit worden geïntegreerd?

Er zijn 4 manieren om Recras te integreren op je website

 

Een link naar Externe Recras pagina

De meest eenvoudige variant is een link plaatsen naar een externe pagina. Zo kan je een link plaatsen naar:

  • Een contactformulier
  • Een online te boeken arrangement of alle arrangementen

 

iframe

Bijna net zo makkelijk als een link naar een externe pagina is een iframe plaatsen in je website. Dit kan ook voor de volgende zaken:

  • Een contactformulier
  • Een online te boeken arrangement of alle arrangementen

 

Automatisch hoogte aanpassen

Het is mogelijk om een iframe automatisch de goede hoogte te geven. Hiervoor moet je (of je websitebouwer) dit stukje code gebruiken:

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

Hierin moeten nog 3 dingen aangepast worden:

  • URL VAN HET IFRAME – dit moet het adres van het iframe worden, bijvoorbeeld https://demo.recras.nl/onlineboeking
  • UNIEK ID VOOR HET IFRAME – verzin een unieke identificatie, bijvoorbeeld recrasiframe1. Deze identificatie mag geen spaties bevatten. Dit moet op 3 plekken aangepast worden, zorg ervoor dat je op beide plekken dezelfde identificatie gebruikt.
  • JOUW RECRASNAAM – als je inlogt op https://demo.recras.nl/ dan is jouw Recrasnaam demo.

 

De WordPress-plugin

Als je eigen website op WordPress draait, is het heel eenvoudig om je Recras te koppelen hieraan via de WordPress-plugin. Zo kun je makkelijk arrangementen, contactformulieren, producten en online boeken op je eigen website integreren. Dit alles precies in de opmaak van je eigen website.

 

API

Via onze API kan je alle te koppelen onderdelen perfect integreren op je website. Hiervoor is een kundige websitebouwer nodig die verstand heeft van programmeren.

 

Je eigen huisstijl gebruiken

Om een iframe in je eigen huisstijl te gebruiken moet je een custom stylesheet instellen.

 

Voor de websitebouwer

Het is mogelijk om een eigen CSS-bestand te laden als je via een iframe contactformulieren en/of online boeken integreert op je website. Zo kun je bijvoorbeeld de kalender aanpassen aan de stijl van je website. Je websitebouwer kan je helpen dit bestand te maken, dit kun je daarna invoeren in Recras via Beheer → Instellingen/standaardteksten → Overige instellingen → Eigen CSS.

 

Snelle trucjes

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

body { background: transparent; }