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

Erforderlich

Beschreibung

Beispiel-Wert

Customer

:check_mark:

Bestimmt die Datenbank-Grundlage und das dazugehörige Style-Sheet.

demo

RedirectUrl

:check_mark:

Ziel-Link für den "Auto suchen" Button

https://demo.rentoffice.de/cms/buchung/fahrzeugwahl

DateStart

:cross_mark:

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

:cross_mark:

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.