Einbindung als Popup
Auf dieser Seite finden Sie eine Anleitung zum Einbau der Buchungsmaske als Popup.
Wie das Ganze am Ende aussehen kann, sehen Sie mit Klick auf folgenden Button:
Anleitung zum Einbinden der Buchungsmaske als Popup
Sie haben zwei verschiedene Möglichkeiten, die Buchungsmaske als Popup einzubinden. Entweder Sie verlinken auf einen Button oder Sie verlinken auf ein Bild. Sowohl der Button als auch das Bild sind selbstverständlich frei anpassbar.
Popup mit Klick auf einen Button
Fügen Sie die folgenden Zeilen als ungefilterten HTML-Code ein:
<a id="Link_Ibe" href="https://ibe.hotels-online-buchen.de/Home/Index/de-DE/DemoSonthofen" target="_blank" style="display: none;"></a>
<input type="button" value="Zur Buchung" style="cursor:pointer; height: 74px; width: 300px; background-color: #00305e; color: white; font-size: 30px; border: none; border-radius: 10px;" onclick="OnClickBuchung()" />
<div id="Overlay" onclick="document.getElementById('Overlay').style.display = 'none';document.getElementById('iframeVorschau').src = document.getElementById('iframeVorschau').src;" style="position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);z-index: 99;cursor: pointer;">
<div style="position: fixed;width: 80%;height: 80%;top: 10%;left: 10%;right: 10%;bottom: 10%;background-color: white;cursor: pointer;border: none;-webkit-overflow-scrolling: touch">
<div onclick="document.getElementById('Overlay').style.display = 'none';document.getElementById('iframeVorschau').src = document.getElementById('iframeVorschau').src;" style="position: relative;width: 35px;height: 35px;color: white;z-index: 1;font-family: Verdana;font-size: 25px;font-weight: bold;text-align: center;right: -100%;top: -40px;cursor: pointer;">
<label style="cursor: pointer;">x</label></div>
<iframe id="iframeVorschau" src="https://ibe.hotels-online-buchen.de/Home/Index/de-DE/DemoSonthofen" style="width: 100%;height: 100%;border: none;-webkit-overflow-scrolling: touch; position: absolute; top: 0"></iframe>
</div>
</div>
<script> function OnClickBuchung() {var ios = navigator.userAgent.match(/iPhone|iPod|iPad/i); if(ios){ document.getElementById("Link_Ibe").click(); } else { document.getElementById("Overlay").style.display = "block"; } }</script><style>@media only screen and (max-width: 530px) { #Overlay > div:last-child { width: 95% !important; height: 96% !important; top: 3% !important; left: 1% !important; right: 4% !important; bottom: 1% !important; }#Overlay > div:first-child { right: -91% !important; top: -7px !important; } }</style>Anpassung des Codes
Hotel-ID
Bitte fügen Sie an Stelle von „DemoSonthofen“ Ihre Hotel-ID ein.
Sprache
Sollten Sie die Buchungsmaske auf anderen Sprachen anzeigen lassen wollen, ändern Sie den Link dementsprechend ab.
Button-Text
An Stelle von „Zur Buchung“ können Sie natürlich auch einen anderen Text auf dem Button stehen haben.
Button-Style
Definieren Sie im Code die Blau-markierten Stellen nach Belieben.
Popup-Größe
Stellen Sie an den Lila-markierten Stellen die Größe des Popups ein.
Popup-Position
An dieser Stelle können Sie die Position des Popups definieren.
Ergebnis mit Klick auf einen Button
Popup mit Klick auf ein Bild
Fügen Sie die folgenden Zeilen als ungefilterten HTML-Code ein:
<a id="Link_Ibe" href="https://ibe.hotels-online-buchen.de/Home/Index/de-DE/DemoSonthofen" target="_blank" style="display: none;"></a>
<img alt="ZurBuchung" height="74" src="https://www.caesar-data.de/wp-content/uploads/2019/05/Button_ZurBuchung.jpg" width="301" style="cursor:pointer" onclick="OnClickBuchung()">
<div id="Overlay" onclick="document.getElementById('Overlay').style.display = 'none';document.getElementById('iframeVorschau').src = document.getElementById('iframeVorschau').src;" style="position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5);z-index: 99;cursor: pointer;">
<div style="position: fixed;width: 80%;height: 80%;top: 10%;left: 10%;right: 10%;bottom: 10%;background-color: white;cursor: pointer;border: none;-webkit-overflow-scrolling: touch">
<div onclick="document.getElementById('Overlay').style.display = 'none';document.getElementById('iframeVorschau').src = document.getElementById('iframeVorschau').src;" style="position: relative;width: 35px;height: 35px;color: white;z-index: 1;font-family: Verdana;font-size: 25px;font-weight: bold;text-align: center;right: -100%;top: -40px;cursor: pointer;">
<label style="cursor: pointer;">x</label></div>
<iframe id="iframeVorschau" src="https://ibe.hotels-online-buchen.de/Home/Index/de-DE/DemoSonthofen" style="width: 100%;height: 100%;border: none;-webkit-overflow-scrolling: touch; position: absolute; top: 0"></iframe>
</div>
</div>
<script> function OnClickBuchung() {var ios = navigator.userAgent.match(/iPhone|iPod|iPad/i); if(ios){ document.getElementById("Link_Ibe").click(); } else { document.getElementById("Overlay").style.display = "block"; } }</script><style>@media only screen and (max-width: 530px) { #Overlay > div:last-child { width: 95% !important; height: 96% !important; top: 3% !important; left: 1% !important; right: 4% !important; bottom: 1% !important; }#Overlay > div:first-child { right: -91% !important; top: -7px !important; } }</style>Anpassung des Codes
Hotel-ID
Bitte fügen Sie an Stelle von „DemoSonthofen“ Ihre Hotel-ID ein.
Sprache
Sollten Sie die Buchungsmaske auf anderen Sprachen anzeigen lassen wollen, ändern Sie den Link dementsprechend ab.
Link zum Bild
Fügen Sie an dieser Stelle den Link zum Bild hinzu. Wichtig ist nur, dass, falls Sie auf ein Bild verlinken möchten, sich das Bild bereits auf Ihrer Homepage oder auf einem Server befindet, da man den Link des Bildes benötigt.
Bild-Größe
Definieren Sie im Code die Blau-markierten Stellen nach Belieben.
Popup-Größe
Stellen Sie an den Lila-markierten Stellen die Größe des Popups ein.
Popup-Position
An dieser Stelle können Sie die Position des Popups definieren.
Ergebnis mit Klick auf ein Bild
