Implementierung als iFrame
Sollte es beim Einbau der Booking-Engine zu Komplikationen von verwendeten Frameworks und Css-, bzw. Javascript-Libraries kommen, besteht die Möglichkeit, die IBE per iFrame auf einer Web-Seite einzubauen.
Erstellen Sie eine Web-Seite (z.B.: be.html) mit folgendem Code und laden Sie diese auf ihren Server:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SiTec Booking Engine iFrame</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="https://fo.sitec.com/be/assets/favicon.ico" />
<link href="https://fo.sitec.com/be/assets/open-sans.css" rel="stylesheet">
<link href="https://fo.sitec.com/be/assets/material-icons.css" rel="stylesheet">
<link href="https://fo.sitec.com/be/styles.css" rel="stylesheet">
</head>
<body>
<fo-booking-engine id="be" dbname="DEMO" azure="true"></fo-booking-engine>
<script>
function getPara(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results == null) {
return null;
}
else {
return decodeURI(results[1]) || 0;
}
}
function setPara(el, para) {
const val = getPara(para);
if (val)
el.setAttribute(para, val);
}
var el = document.getElementById('be');
var para = ['dbname', 'language', 'perscount', 'persons', 'from', 'to', 'category',
'arrangement', 'promocode', 'promobutton']; para.forEach(p => {
setPara(el, p);
});
</script>
<script src="https://fo.sitec.com/be/fo-booking-engine-es2015.js" type="module"></script>
<script src="https://fo.sitec.com/be/fo-booking-engine-es5.js" nomodule defer></script>
</body>
</html>Binden Sie nun diesen iFrame in eine bestehende Seite ein.
...
<iframe src="be.html" class="be"></iframe>
...Ob Sie den iFrame per Inline Styles oder CSS stylen, bleibt natürlich Ihre Entscheidung.
Ein iFrame hat unter anderem den Nachteil, dass dieser eine fixe Höhe haben muss und sich deshalb sehr oft ein Scrolling mitten auf einer Webseite nicht vermeiden lässt.