Einbindung von recras in einen iframe

Anleitung zur Integration von Recras mit einem iframe

Integrieren Sie Recras mit einem iframe auf Ihrer Website

Neben dem WordPress-Plugin oder einer benutzerdefinierten Integration können Sie sich auch dafür entscheiden, Recras mit einem iframe in Ihre Website zu integrieren. So können Sie online buchbare Pakete und Kontaktformulare anzeigen. Für eine schöne Integration gibt es eine Reihe von Optionen, darunter das Hinzufügen eines benutzerdefinierten Stylesheets (CSS) und das automatische Anpassen der Höhe des iframe. Die Anleitung dazu finden Sie in dem unten stehenden Artikel.

Verwendung eines eigenen Hausstils mit CSS

Natürlich möchten Sie, dass die Recras-Integration auf Ihrer Website zu Ihrem Hausstil passt. Daher haben Sie die Möglichkeit, das Layout der Kontaktformulare, der Online-Buchung und des Verfügbarkeitskalenders anzupassen. Hierfür verwenden Sie ein Custom Stylesheet.

 

Benutzerdefiniertes Stylesheet (CSS) hinzufügen

In einer CSS-Datei können Sie u. a. Formatierungen für Texte und Tabellen festlegen, z. B. Schriftarten, Schriftgrößen und Farben. Die meisten Website-Builder können eine solche Datei vorbereiten. Für einen iframe sollte der CSS-Code dann in Recras hinzugefügt werden unter: Verwalten → Andere → Andere Einstellungen → Benutzerdefiniertes CSS. Für die Integration über die Bibliothek muss dieser Code in die Website integriert werden.

Um nicht bei Null anfangen zu müssen, können Sie diese CSS-Datei verwenden, die auch im WordPress-Plugin verwendet wird.

 

iframe transparent machen

Wenn eine vollständige Änderung des CSS zu viel Arbeit ist, Sie aber eine bessere Integration der iframes wünschen, können Sie die folgende Zeile in Ihr CSS einfügen:

body { background: transparent; }

iframe gibt automatisch die richtige Höhe an

Damit das, was Sie auf Ihrer Website einbinden, auch gut sichtbar ist, ist es ratsam, dem iframe automatisch die richtige Höhe zu geben. Verwenden Sie dazu den folgenden 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>

Sobald Sie den Code hinzugefügt haben, müssen Sie drei Abschnitte anpassen, die für Ihre eigene Recras-Umgebung gelten.

  1. Die URL des iframe
    Dies sollte die Adresse des iframe sein; zum Beispiel https://demo.recras.nl/onlineboeking.
  2. Die eindeutige ID für den iframe
    Geben Sie hier einen eindeutigen Bezeichner ein, z. B. recrasiframe1. Beachten Sie, dass die ID keine Leerzeichen enthalten darf und an zwei Stellen geändert werden muss. Verwenden Sie an beiden Stellen genau denselben Bezeichner.
  3. Ihr Recras-Name
    Den Recras-Namen finden Sie in der Adressleiste, wenn Sie eingeloggt sind. Für     https://demo.recras.nl/ lautet er"demo".