Recras mit einem iFrame integrieren
Anleitung zur Integration von Recras mit einem iFrame.
Integrieren Sie Recras mit einem Iframe auf Ihrer Website
Neben dem WordPress-Plugin oder einer maßgeschneiderten Integration können Sie sich auch dafür entscheiden, Recras mit einem Iframe auf Ihrer Website zu integrieren. So können Sie online buchbare Arrangements und Kontaktformulare anzeigen. Für eine gelungene Integration gibt es verschiedene Optionen, darunter das Hinzufügen eines benutzerdefinierten Stylesheets (CSS) und das Festlegen einer automatischen Höhe für das Iframe. Die Anleitung dazu finden Sie im untenstehenden Artikel.
Verwendung deines eigenen Corporate Designs mit CSS
Natürlich möchtest du, dass die Recras-Integration auf deiner Website zu deinem Corporate Design passt. Du hast die Möglichkeit, das Layout der Kontaktformulare, der Online-Buchung und des Verfügbarkeitskalenders anzupassen. Dafür verwendest du ein Custom Stylesheet.
Custom Stylesheet (CSS) hinzufügen
In einer CSS-Datei kannst du das Design von Texten und Tabellen definieren, zum Beispiel Schriftarten, Schriftgrößen und Farben. Die meisten Website-Builder können eine solche Datei erstellen. Für ein Iframe muss der CSS-Code dann in Recras unter folgendem Pfad hinzugefügt werden: Einstellungen→ Sonstiges → Sonstige Einstellungen → Eigene CSS. Bei der Integration über die Library muss dieser Code in die Website integriert werden.
Um nicht bei null anzufangen, kannst du diese CSS-Datei verwenden, die auch im WordPress-Plugin verwendet wird.
Iframe transparent machen
Wenn die vollständige Anpassung der CSS zu aufwendig ist, aber du dennoch möchtest, dass Iframes besser integriert werden, kannst du folgende Zeile in deine CSS einfügen:
body { background: transparent; }
Iframe automatisch die richtige Höhe zuweisen
Um sicherzustellen, dass das, was du auf deiner Website integrierst, auch gut sichtbar ist, ist es ratsam, dem Iframe automatisch die richtige Höhe zuzuweisen. Dafür verwendest du den folgenden Code.
<iframe src=“URL DES IFRAME“ style=“width:100%;height:450px“ frameborder=“0″ scrolling=“auto“ id=“EINZIGARTIGE ID FÜR DAS IFRAME“></iframe>
<script>
window.addEventListener(‚message‘, function(e) {
var origin = event.origin || event.originalEvent.origin;
if (origin.match(/DEIN RECRASNAME\.recras\.de/)) {
document.getElementById(‚EINZIGARTIGE ID FÜR DAS IFRAME‘).style.height = e.data.iframeHeight + ‚px‘;
}
});
</script>
Nachdem du den Code hinzugefügt hast, musst du drei Teile anpassen, die auf deine eigene Recras-Umgebung zutreffen.
Die URL des Iframes
Dies muss die Adresse des Iframes sein, zum Beispiel: https://demo.recras.de/buchen.
Die eindeutige ID für das Iframe
Erfinde hier eine einzigartige Identifikation, zum Beispiel recrasiframe1. Achtung: Die ID darf keine Leerzeichen enthalten und muss an zwei Stellen angepasst werden. Verwende exakt dieselbe Identifikation an beiden Stellen.
Dein Recras-Name
Den Recras-Namen findest du in der Adressleiste, wenn du eingeloggt bist. Für https://demo.recras.nl/ lautet der Name „demo“.