Integrating recras with an iframe

Guide to integrating Recras with an iframe

Integrate Recras with an iframe on your website

In addition to the WordPress plugin or a custom integration, you can also choose to integrate Recras on your website with an iframe. This allows you to display online bookable packages and contact forms. For a nice integration, there are a number of options, including adding a custom stylesheet (CSS) and including an automatic height of the iframe. The tutorial for this can be found in the article below.

Using your own corporate identity with CSS

Of course you want the Recras integration on your website to match your corporate identity. So you have the ability to customize the layout of the contact forms, online booking and availability calendar. For this you use a Custom Stylesheet.

 

Adding Custom Stylesheet (CSS)

In a CSS file, you can define formatting for texts and tables, among other things, such as fonts, font sizes and colors. Most Web site builders can prepare such a file. For an iframe, the CSS code should then be added in Recras at: Administration → Other → Other settings → Custom CSS. For integration via the library, this code must be integrated into the website.

To avoid starting from scratch, you could use this CSS file that is also used in the WordPress plugin.

 

make iframe transparent

If completely modifying the CSS is too much work, but you do want iframes to be better integrated, you can place the following line in your CSS:

body { background: transparent; }

iframe automatically give the correct height

To ensure that what you integrate on your website is also properly visible, it is advisable to automatically give the iframe the correct height. To do this, use the following 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>

After you add the code, you need to modify three sections that apply to your own Recras environment.

  1. The URL of the iframe
    This should be the address of the iframe; https://demo.recras.nl/onlineboeking for example.
  2. The unique ID for the iframe
    Make up a unique identifier here, recrasiframe1 for example. Note that the ID must not contain spaces and must be modified in two locations. Use the exact same identifier in both locations.
  3. Your Recras-name
    The Recras name can be found in the address bar when you are logged in. For     https://demo.recras.nl/ it is 'demo'.