Online-Reservierung in eine Webseite einbinden
Im Folgenden wird Ihnen erklärt, wie Sie die Online-Reservierung der Swoppen Soferu® Hotelsoftware in Ihre bestehende externe Webseite einbinden. Hierfür stehen Ihnen mehrere Varianten bereit. Wir empfehlen Ihnen Aufgrund der Kompatibilitätsprobleme mit Safari Variante 1 oder 2 zu benutzen.
Variante 1 Weiterleitung
Sie können einen Button generieren und diesen auf die Online-Reservierung weiterleiten. Einen Button können Sie im folgenden Link generieren:
Alternativ können Sie einen unserer fertigen Buttons verwenden, hierfür müssen Sie lediglich die URL zu Ihrer Online-Reservierung anpassen.
<!-- Hellgrauer Button --><a href="__RESERVIERUNG_URL__" rel=”nofollow” class="simple_btn_or" target="_blank">Online-Reservierung</a> <style>a.simple_btn_or {padding: 15px;background: #e7e7e7e7;border: 1px solid #afafaf;font-family: "Arial";transition: all 0.3s ease;cursor: pointer;}a.simple_btn_or:hover {background: #cecece;}</style>
<!-- Dunkler Button --><a href="__RESERVIERUNG_URL__" rel=”nofollow” class="grey_btn_or" target="_blank">Online-Reservierung</a> <style>a.grey_btn_or {padding: 15px;background: #4c4c4ce7;border: 1px solid #868686;font-family: "Arial";transition: all 0.3s ease;color: white;cursor: pointer;}a.grey_btn_or:hover {background: #828282;/* color: black; */}</style>
<!-- Runder Button --><a href="__RESERVIERUNG_URL__" rel=”nofollow” class="round_btn_or" target="_blank">Online-Reservierung</a> <style>a.round_btn_or {padding: 15px;background: #1369a9e7;border: 1px solid #5f5f5f;font-family: "Arial";transition: all 0.3s ease;color: white;cursor: pointer;border-radius: 9px;}a.round_btn_or:hover {background: #1369a9b8;}</style>
<!-- Hellroter button --><a href="__RESERVIERUNG_URL__" rel=”nofollow” class="colored_btn_or" target="_blank">Online-Reservierung</a> <style>a.colored_btn_or {padding: 15px;background: #c15e58e7;border: 1px solid #d2d2d2;font-family: "Arial";transition: all 0.3s ease;color: white;cursor: pointer;}a.colored_btn_or:hover{background: #982828;}</style>Variante 2 Formular mit Weiterleitung
Hierbei fügen Sie ein gewöhnliches Formular an, welches dann auch von uns oder Ihrem Webdesigner der Darstellung Ihrer Homepage enstprechend angepasst werden kann. Bezüglich der Darstellung des Formulars können Sie sich bei Ihrem Webmaster oder auch an uns wenden.
Hierfür müssen Sie den unten stehenden HTML-Code "__IHRE_ONLINE_RESERVIERUNG__" gegen Ihre Online-Reservierung Url austauschen (z.B. mein-hotel.hoteldesk.cloud ) und an die gewünschte Stelle in Ihrer Homepage einfügen.
<div class="formular"> <h3>Online-Reservierung </h3> <form action="__IHRE_ONLINE_RESERVIERUNG__" autocomplete="off" method="GET" target="_blank"> <label> Anreise <input type="date" name="date_from" class="date_from" /> </label> <label> Abreise <input type="date" name="date_until" class="date_until" /> </label> <label> Anz. Zimmer <input type="number" name="room_quantity" min="1" placeholder="1"/> </label> <label> Anz. Personen <input type="number" name="adults[]" min="1" /> </label> <input type="submit" name="submit" value="Buchen" /> <input type="hidden" name="step" value="1" /> </form> <div>Beispiel 1:
Quellcode:
<div class="or-widget-formular"> <h3>Online-Reservierung </h3> <form action="__RESERVIERUNG_URL" method="GET" target="_blank" autocomplete="off"> <label> Anreise <input type="date" name="date_from" class="date_from" /> </label> <label> Abreise <input type="date" name="date_until" class="date_until" /> </label>
<label> Anz. Zimmer <input type="number" name="room_quantity" min="1" placeholder="1"/> </label> <label> Anz. Personen <input type="number" name="adults[]" min="1" /> </label>
<input type="submit" name="submit" value="Buchen" class="or_widget_button" /> <input type="hidden" name="step" value="1" /> </form> <style> .or-widget-formular{width:50%;padding:15px;background:#f5f5f5;border:2px solid #dcdcdc}input.submit_btn_or{background:#0c6588;color:#fff;border:none;padding:15px;font-size:20px;transition:all .3s ease;cursor:pointer}input.submit_btn_or:hover{box-shadow:2px 2px 10px 0 #888}.or-widget-formular label{width:100%;float:left;font-size:13pt;border-bottom:1px solid #80808040;margin-bottom:15px}.or-widget-formular label input{width:100%;margin-bottom:15px;padding:8px;border:1px solid #e9e9e9;background:#fff;box-shadow:0 2px 7px 0 #0000f}.or-widget-formular h3{text-transform:uppercase;font-family:sans-serif;font-weight:lighter;color:#0c6588;font-size:17pt;padding-bottom:5px;text-align:center;border-bottom:1px solid #b7b7b7}.or-widget-formular .or_widget_button {border: none;width: 100%;padding: 15px;transition: all 0.3s ease;cursor: pointer;}.or-widget-formular .or_widget_button:hover{background: #3a3a3a;color: white;} </style> </div>Beispiel 2:
<div class="or-widget-formular-2"> <h3>Online-Reservierung </h3> <p>Einfach bequem, sicher, günstig.Online buchen und entspannen.</p> <form action="__RESERVIERUNG_URL" method="GET" target="_blank" autocomplete="off"> <label> Anreise <input type="date" name="date_from" placeholder="Anreise" class="date_from"> </label> <label> Abreise <input type="date" name="date_until" placeholder="Abreise" class="date_until"> </label> <label> Anz. Zimmer <input type="number" name="room_quantity" min="1" placeholder="1"> </label> <label> Anz. Personen <input type="number" name="adults[]" min="1"> </label> <input type="submit" name="submit" value="Jetzt Buchen" class="or_widget_button"> <input type="hidden" name="step" value="1"> </form> <style>.or-widget-formular-2{padding:15px;background:#f5f5f5;float:left}input.submit_btn_or{background:#0c6588;color:#fff;border:none;padding:15px;font-size:20px;transition:all .3s ease;cursor:pointer}input.submit_btn_or:hover{box-shadow:2px 2px 10px 0 #888}.or-widget-formular-2 label{width:19%;float:left;font-size:13pt;margin-bottom:15px;margin-right:1%}.or-widget-formular-2 label input{width:100%;margin-bottom:15px;padding:8px;border:1px solid #e9e9e9;background:#fff;box-shadow:0 2px 7px 0 #0000f;height:35px;margin-right:20px;float:left}.or-widget-formular-2 h3{font-family:sans-serif;font-weight:lighter;color:#0c6588;font-size:17pt;padding-bottom:5px;margin:10px 0}.or-widget-formular-2 *{font-family:Arial}.or-widget-formular-2 p{margin:5px 0}.or-widget-formular-2 .or_widget_button{border:none;width:20%;padding:9px;transition:all .3s ease;cursor:pointer;margin-top:22px}.or-widget-formular-2 .or_widget_button:hover{background:#3a3a3a;color:#fff} </style> </div>Beispiel 3:
Quellcode
<div class="or-widget-formular-3"> <h3>Online-Reservierung </h3> <p>Einfach bequem, sicher, günstig.Online buchen und entspannen.</p> <form action="__RESERVIERUNG_URL" method="GET" target="_blank" autocomplete="off" > <label> Anreise <input type="date" name="date_from" placeholder="Anreise" class="date_from"> </label> <label> Abreise <input type="date" name="date_until" placeholder="Abreise" class="date_until"> </label> <label> Anz. Zimmer <input type="number" name="room_quantity" min="1" placeholder="1"> </label> <label> Anz. Personen <input type="number" name="adults[]" min="1"> </label> <input type="submit" name="submit" value="Jetzt Buchen" class="or_widget_button"> <input type="hidden" name="step" value="1"> </form> <style>.or-widget-formular-3{padding:15px;background:#f5f5f5;float:left}input.submit_btn_or{background:#0c6588;color:#fff;border:none;padding:15px;font-size:20px;transition:all .3s ease;cursor:pointer}input.submit_btn_or:hover{box-shadow:2px 2px 10px 0 #888}.or-widget-formular-3 label{width:48%;float:left;font-size:13pt;margin-bottom:0;margin-right:1%}.or-widget-formular-3 label input{width:100%;margin-bottom:15px;padding:8px;border:1px solid #e9e9e9;background:#fff;box-shadow:0 2px 7px 0 #0000f;height:35px;margin-right:20px;float:left}.or-widget-formular-3 h3{font-family:sans-serif;font-weight:lighter;color:#0c6588;font-size:17pt;padding-bottom:5px;margin:10px 0}.or-widget-formular-3 *{font-family:Arial}.or-widget-formular-3 p{margin:12px 0}.or-widget-formular-3 .or_widget_button{border:none;width:100%;padding:9px;transition:all .3s ease;cursor:pointer;margin-top:0}.or-widget-formular-3 .or_widget_button:hover{background:#3a3a3a;color:#fff} </style> </div>Variante 2 um Kalender erweitern
Sollten Sie einen erweiterten Kalender in dem Widget benötigen. So kann hierfür der jQuery-ui Datepicker eingefügt werden. Hierfür können Sie folgenden Code verwenden:
Dieser Code fügt die jQuery Ui Bibliothek ein, welcher den Kalender unterstützt. Diese sollte ins Template oder zumindest auf der jeweiligen Seite hinzugefügt werden.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
Der folgende Code muss auf der jeweiligen Seite eingefügt werden. Bitte bachten Sie, dass nicht jedes Homepage System derartigen Code unterstüzt. Sollte dies nicht möglich sein, so können Sie diesen auch ins Template einfügen.
<script>$(document).ready(function(){ if($('input[name="date_from"],input[name="date_from"]').length != 0) { $('input[name="date_from"],input[name="date_from"]').datepicker();});}</script>Variante 3 Widget einbinden
Entnehmen Sie den Quellcode des Reservierung-Blocks und fügen Sie ihn an die gewünschte Stelle in Ihrem Quellcode Ihrer Webseite ein. Bearbeiten Sie den Quellcode an der Stelle " __RESERVIERUNG_URL__". Dort muss die URL von der Online-Reservierung eingetragen werden. Beispiel: "musterkunde.hoteldesk.cloud/" Bitte beachten Sie, dass die Online-Reservierung im System bereits eingerichtet sein muss.
Voraussetzung: jQuery ab Version 1.12.4
Hinweis: Safari wird in diesem Beispiel aufgrund der Third Party Cookie Regelungen, nicht unzerstützt.
Quellcode des Reservierungs-Blocks
<div id="my-online-reservation" class=""></div>
<script>
(function(d, s) {
var js, rjs = d.getElementsByTagName(s)[0];
js = d.createElement(s);
js.src = "//app.swoppen.com/apps/online-reservation/widget.php#id=my-online-reservation&uri=__RESERVIERUNG_URL__";
rjs.parentNode.insertBefore(js, rjs);
}(document, "script"));
</script>
Variante 4 Widget mit eigenem Formular einbinden
Falls Sie auf Ihrer eigenen Homepage bereits eine eigene Buchungsmaske besitzen und diese weiter verwenden möchten, dann sollten Sie bezüglich der Einbindung folgende Dinge beachten.
Voraussetzungen:
Ihr Formular muss ein Standart HTML Formular sein. Hinzu kommen folgende Voraussetzungen für das Formular: Felder wie "Datum von", "Datum bis" und "Anzahl Personen" müssen vorgegeben sein. Zudem muss jQuery ab Version 1.12.4 eingebunden sein.
Bitte beachten Sie, dass Safari aufgrund der Third Party Cookie Regelung nicht unterstützt wird. Somit wird die Online-Reservierung als iFrame ohne Funktion angezeigt.
Zudem müssen die Felder folgende Namen haben:
Datum von = name="date_from"
Datum bis = name="date_until"
Anz. Personen = name="persons"
Zusätzlich muss ein Button (submit), welches das Formular ausführt, im Formular vorhanden sein.
Beispiel für das Formular:
<form id="mein-formular" autocomplete="off"> <input type="date" name="date_from"> <input type="date" name="date_until"> <input type="text" name="persons" value="1"> <input type="hidden" name="step" value="1"> <input type="submit" name="Verfügbarkeit Prüfen"></form><!-- Beispiel Quellcode des Reservierungsblocks:__ID_DES_FORMULARS__ = Die ID des Formulars (id="mein-formular")__RESERVIERUNG_URL__ = URL zur Online-Reservierung (z.B. meinhoel.hoteldesk.cloud) -->
<div id="my-online-reservation"></div> <script> (function(d, s) { var js, rjs = d.getElementsByTagName(s)[0]; js = d.createElement(s); js.src = "//app.swoppen.com/apps/online-reservation/widget.php#id=my-online-reservation&"+"uri=__RESERVIERUNG_URL__&src_form_id=__ID_DES_FORMULARS__"; rjs.parentNode.insertBefore(js, rjs); }(document, "script")); </script>Bitte prüfen Sie ob die genannten Felder die Namen besitzen und fügen den Quellcode des Reservierungsblocks mit den entsprechenden Platzhaltern unter das Formular ein. Sobald Sie das getan haben, können Sie wie gewohnt Ihr Formular ausfüllen und starten. Ist die Reservierung efolgreich eingebunden, dann wird sich das Widget der Online-Reservierung als Fenster in der Homepage öffnen.
Hinweis: Safari wird in diesem Beispiel aufgrund der Third Party Cookie Regelungen, nicht unterstützt.