INHALT

Einleitung

Ergänzend zur klassischen Buchungsstrecke in RentOffice Booking (Beispiel: https://demo.rentoffice.de/?cms=0) stellen wir auch ein Booking Widget zur Verfügung, das als Einstieg für eine Buchung auf einer anderen Seite verwendet werden kann. Dieses wird, so wie die Buchungsstrecke selbst ebenfalls über einen iFrame in die Kundenwebsite integriert.

Technische Implementierung

iFrame URL

Die Basis-URL für das Widget lautet wie folgt und muss durch entsprechender Parameter ergänzt werden.

https://search-rent-widget.azurewebsites.net/

Parameter Input

Folgende Parameter sind in der URL zu ergänzen:

Parameter	Beschreibung	Beispiel-Wert
Customer	Bestimmt die Datenbank-Grundlage und das dazugehörige Style-Sheet.	demo
RedirectUrl	Ziel-Link für den "Auto suchen" Button	https://demo.rentoffice.de/cms/buchung/fahrzeugwahl
DateStart	ISO Datestring für initiale Werte für DateStart und TimeStart. Wenn der Parameter nicht übergeben wird, verwendet das Widget die gleiche Einstellung wie die Buchungsseite selbst beim erstmaligen Aufruf.	2023-03-01T08:00:00.000Z
DateStop	ISO Datestring für initiale Werte für DateStop und TimeStop. Wenn der Parameter nicht übergeben wird, verwendet das Widget die gleiche Einstellung wie die Buchungsseite selbst beim erstmaligen Aufruf.	2023-03-08T08:00:00.000Z

Beispiel URL

https://search-rent-widget.azurewebsites.net/?Customer=demo&RedirectUrl=https://demo.rentoffice.de/cms/buchung/fahrzeugwahl

In diesem Fall wird die Demo-Datenbank angesprochen und zur Booking Seite in den Schritt Fahrzeugwahl weitergeleitet, wenn man auf "Auto suchen" klickt. Da die DateStart und DateStop Parameter nicht gesetzt sind, wird die gleiche Zeitvorauswahl wie auf der normalen Booking Seite verwendet.

Ausgabe

Der im Widget angegebene Mietzeitraum und die Station werden an die RedirectURL übergeben und dort ins Formular übertragen.

Beispiel:

https://demo.rentoffice.de/cms/buchung/fahrzeugwahl?ROType=demo&Station=XXXXXXXX2009032712165825DBAZXX&DateStart=2023-04-29T13:00:00.000Z&DateStop=2023-05-01T05:00:00.000Z

Einbindung via iFrame

Mit dem folgenden iFrame Tag wird die angepasste Widget-URL in den HTML-Code integriert:

<iframe src="https://search-rent-widget.azurewebsites.net/?Customer=demo&RedirectUrl=https://demo.rentoffice.de/cms/buchung/fahrzeugwahl" width="100%" height="100%">

Weiterreichen der Parameter ins Booking-iFrame

Wenn RentOffice Booking ebenfalls als iFrame eingebunden ist, müssen die an die RedirectURL weiterleiteten Parameter nun noch an den Booking-iFrame durchgereicht werden. Dazu kann beispielhaft folgender Code verwendet werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>IFrame test</title>
        <script>
            window.setTimeout(function(){
                if(window.location.search){
                    document.getElementById('ro-onlinereservation').src = "<BookingURL>"+window.location.search;
                }
            }, 100);
        </script> 
    </head>
    <body style="height: 100%;">
        <h1>DEMO page for iframe test</h1>
        <div id="container" style="margin: 2rem; width: 70%; height: 100%;">
    	    <iframe id="ro-onlinereservation" src = "<BookingURL>" width="100%" height="100%" />
        </div>
    </body>
</html>

CSS

Die CSS für das Widget hinterlegen wir derzeit pro Kunde separat in unserem System. Senden Sie uns die gewünschte CSS dazu bitte an support@rentoffice.de.

Booking Widget Drucken