Integrating Recras with an iFrame
A 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 with an iFrame on your website. This allows you to display bookable arrangements and contact forms online. For a seamless integration, there are various options available, including adding a custom stylesheet (CSS) and setting an automatic height for the iFrame. You can find the instructions in the article below.
Using Your Own Corporate Design with CSS
Of course, you want the Recras integration on your website to match your corporate design. You have the option to customize the layout of contact forms, online booking, and the availability calendar. This can be done using a custom stylesheet.
Adding a Custom Stylesheet (CSS)
In a CSS file, you can define the design of texts and tables, such as fonts, font sizes, and colors. Most website builders allow you to create such a file. For an iFrame, the CSS code must be added in Recras under the following path:
Settings → Other → Other Settings → Custom CSS
If integrating via the library, the code must be added directly to the website.
To avoid starting from scratch, you can use this CSS file, which is also used in the WordPress plugin.
Making the iFrame Transparent
If fully customizing the CSS is too time-consuming but you still want iFrames to blend in better, you can add the following line to your CSS:
body { background: transparent; }
Automatically Assigning the Correct Height to the iFrame
To ensure that the integrated content on your website is fully visible, it is recommended to automatically assign the correct height to the iFrame. You can do this using the following 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\.com/)) { document.getElementById(‘UNIQUE ID FOR THE IFRAME’).style.height = e.data.iframeHeight + ‘px’; } }); </script>
After you’ve added the code, you need to adjust three parts that apply to your own Recras environment.
The URL of the Iframe
This must be the address of the Iframe, for example: https://demo.recras.com/booking.
The unique ID for the Iframe
Create a unique identifier here, such as recrasiframe1. Note: The ID must not contain spaces and must be adjusted in two places. Use exactly the same identifier in both places.
Your Recras name
You can find the Recras name in the address bar when you are logged in. For https://demo.recras.nl/, the name is “demo.”