Implementierung

Recras-Implementierungen

Auf dieser Seite erklären wir, was implementiert werden kann und wie man das erreichen kann. Die Informationen auf dieser Seite sind für Entwickler / Webdesigner geschrieben. Diese Seite ist nur in englischer Sprache verfügbar.

What can be implemented?

The following aspects of Recras can be integrated with your website:

  • Contact forms
  • Packages
  • Activities/Products
  • Prices
  • Availability
  • Online bookings (and payments through Mollie)

How can this be implemented?

There are 4 ways of integrating Recras with your website

A link to an external Recras page

The easiest way is placing a link to an external page. You can add links to:

  • A contact form
  • A online bookable package or all packages

Iframe

Almost as easy as an external link is placing an iframe on your website. This can also be done for the following things:

  • A contact form
  • A online bookable package or all packages

Adjust height automatically

It is possible to automatically give an iframe the correct height. You (or your website builder) should use this piece of code:

<iframe src="URL OF THE IFRAME" style="width:100%;height:450px" frameborder=0 scrolling="auto" id="UNIQUE ID FOR THE IFRAME"></iframe>';
<script>
window.addEventListener('message', function(e) {
var origin = event.origin || event.originalEvent.origin;
if (origin.match(/YOUR RECRAS NAME\.recras\.nl/)) {
document.getElementById('UNIQUE ID FOR THE IFRAME').style.height = e.data.iframeHeight + 'px';
}
});
</script>

Three adjustments are needed here:

  • URL OF THE IFRAME – this must be the address of the iframe, i,e. https://demo.recras.nl/onlineboeking
  • UNIQUE ID FOR THE IFRAME – create a unique identification, i.e. recrasiframe1. This identification cannot contain spaces. This needs to be changed in 2 places, make sure you use the same identification in both places.
  • YOUR RECRAS NAME – if you log in at https://demo.recras.nl/ then your Recras name is demo.

This only works if there is only 1 Recras iframe on the page. If there are multiple Recras iframes on the page, this method does not work unfortunately.

The WordPress plugin

If your own website runs WordPress, it is very easy to link your Recras to your website using the WordPress-plugin. This way you can easily integrate packages, contact forms, products and online booking in your website. This all uses the styling of your own website.

API

Using our API you can perfectly integrated all parts in your website. A capable website builder that knows programming is needed for this.

Use your own corporate identity

To use an iframe in your own corporate identity you must use a custom stylesheet.

For your website builder

It is possible to load your own CSS file when integrating contact forms and/or online booking in your website using an iframe. This way you can, for example, adjust the calendar to the style of your website. Your website builder can help you create this file, you can then enter this in Recras via Settings → heading Other → Other settings → Custom CSS.

Quick trick

When fully adjusting the CSS is too much work, but you still want your iframes to integrate better, you can put the following line in your CSS:

body { background: transparent; }