Implementierung als Angular Elements.
Bitte versuchen Sie die Booking-Engine (IBE) der FOCloud als Angular Elements auf einer Web-Seite ihrer Onlinepräsenz einzubauen.
In seltenen Fällen kann es zu Komplikationen zwischen verwendeten Frameworks und Css-, bzw. Javascript-Libraries kommen. In diesen Fällen besteht auch die Möglichkeit, die IBE in einen iFrame auf einer Web-Seite einzubauen.
Kopieren Sie bitte folgende Zeilen Code (vorzugsweise) in den Head-Bereich Ihrer Web-Seite:
<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">
Kopieren Sie folgende Zeilen in den Content Bereich Ihrer Seite. (Innerhalb der <body></body> Tags):
<fo-booking-engine id="be" dbname="DEMO" azure="true"></fo-booking-engine>
<script src="https://fo.sitec.com/be/fo-booking-engine-es2015.js" type="module"></script>
Wobei DEMO mit Ihrem Datenbanknamen ersetzt werden muss.
Will man über die URL auch Parameter übergeben, bitte zusätzlich auch noch folgendes JavaScript einbauen:
<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', 'autooffer', 'rooms', 'house'];
para.forEach(p => {
setPara(el, p);
});
</script>Beispiel:
Zeige mir Angebote für die Kategorie DZ vom 01.12.2025 bis 06.12.2025
https://www.simplify-hospitality.com/foc-bookingengine-testseite/?from=01.12.2025&to=06.12.2025&category=DZ
Folgende zusätzliche Parameter stehen für die Ausgabe der IBE zur Verfügung:
| Parameter | Funktion | Notwendig |
|---|---|---|
| dbname | DEMO für Testsystem, Name der Kunden-Datenbank für Echtsystem | J |
| house | Nummer des Hauses zum Filtern, leer = alle Häuser | N |
| request | true für Anfrage, false für Online-Buchung | N |
| rooms | true für zur Anzeige der Zimmertypen (keine Buchungs-Funktion) | N |
| autooffer | true wenn bei einer Anfrage das Angebot direkt erstellt und versendet werden soll | N |
| language | 2-stelliger Sprachcode (DE, EN, HU,..) Übersetzungen müssen in FOCloud eingepflegt werden. | N |
| perscount | Anzahl der (erwachsenen) Personen ODER | N |
| persons | String mit den Personenkategorien z.B. 0011 = 2 Erw. + 2 Kinder der Kategorie 1 | N |
| from | Anreisedatum (z.B. 31.11.2024) | N |
| to | Abreisedatum | N |
| category | Bezeichnung der Zimmerkategorie (z.B. DZ) | N |
| arrangement | Bezeichnung des vorausgefüllten Arrangements (z.B. VP) | N |
| promocode | Promocode (voreingestellt) entsprecht der Referenz des auszubuchenden Kontingents | N |
| promobutton | true zur Anzeige des Promocode Buttons rechts oben | N |
| checkcc | true zur Abfrage der Kreditkarte auch ohne Anzahlung | N |
| azure | true wenn die Instanz auf dem Azure Server liegt | N |
| request=”true” | Nur Anfragen – keine Buchungen über die IBE |
| autooffer=”true” | Der Gast erhält automatisch das Angebot-E-Mail. Ohne diese Funktion muss die E-Mail manuell versendet werden. |
| language=”DE” | Bei mehrsprachigen Webseiten wird jeweils der Sprachparameter gesetzt: (language=”DE”, language=”EN”, language=”IT” …) WICHTIG: Übersetzungen müssen zuerst in der FO-Cloud eingepflegt werden. |
| perscount=”4″ | Vorauswahl: 4 Erwachsene |
| persons=”0012″ | Vorauswahl der Personen, bzw. Kinderkategorien. 0012 – 2 Erwachsene, 1 Kind Kategorie 1, 1 Kind Kategorie 2 persons=“0“ – standardmäßig wird nur 1 Erwachsener ausgewählt 0 steht für 1 Erwachsener (000 – 3 Erwachsene) 1 steht für 1 Kind Alterskategorie 1 (111 – 3 Kinder 0 bis 3 Jahre) 2 steht für 1 Kind Alterskategorie 1 (222 – 3 Kinder 4 bis 7 Jahre) … 001122 – 2 Erw., 2 Kinder 0 bis 3 Jahre, 2 Kinder 4 bis 7 Jahre |
| promobutton=”true” | Button Promocode wird angezeigt. |
Beispiel für eine Vorauswahl:
Sprache EN / 2 Erwachsene, 1 Kind 0 bis 3 Jahre, 1 Kind 4 bis 7 Jahre /
Kategorie: Apartment / Halbpension
<fo-booking-engine id="be" dbname="DEMO" language="EN" persons="0012" category="APP" arrangement="HP" azure="true"></fo-booking-engine>