Wichtig: dieser Code muss nur einmal pro Seite oberhalb des ersten Widgets eingefügt werden. Auch wenn mehrere verschiedene Widgets auf einer Seite verwendet werden, wird dieser Code nur einmal benötigt.
Tags ein.
<script type="text/javascript">
(function(w,d,o,f,js,fjs){w["conWidgets"]=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
js=d.createElement("script"),fjs=d.getElementsByTagName("script")[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs)
})(window,document,"_conWidgets","https://widgets.secure.consisto.net/js/modules/widget.min.js");
</script>
<con-pricecalendar id="pricecalendar"></con-pricecalendar>
<script type="text/javascript">
_conWidgets('init', document.querySelector("#pricecalendar"), {
lang: 'de',
widgetId: "[Domain]",
bookingUrl: "BookingURL",
requestUrl: "RequestURL"
});
</script>
Argument | Typ | Standartwert | Beschreibung |
lang | string | "" | Sprache vom Widget |
widgetId | string | "" | Festgelegter Wert, der das Widget identifiziert. |
bookingUrl | string | "" | URL zur Buchungsseite (falls leer, wird der Button ausgeblendet). Siehe auch "getBookingUrl()". |
requestUrl | string | "" | URL zur Anfrageseite (falls leer, wird der Button ausgeblendet). Siehe auch "getRequestUrl()". |
room | string | "" | Codex des Zimmers, das im Zimmer-Dropdown vorausgewählt sein soll. |
hideRoomDropDown | bool | false | Blendet die Zimmerauswahl im Widget aus. |
arrival | string | "" | Die Anreise im Format yyyy-MM-dd (z.b. 2021-05-10) |
departure | string | "" | Die Abreise im Format yyyy-MM-dd (z.b. 2021-05-16) |
guests | int[] | null | Array mit dem jeweiligen Alter der vorausgewählten Zimmerbelegung. Kinder und Erwachsene werden automatisch erkannt, ab 18 zählt auf jeden Fall als Erwachsener, der Punkt kann je nach Definition aber auch unter 18 liegen. Z.B. [18, 18, 14, 8] |
mealPlan | string | "" | Einer von folgenden Strings: AllInclusive, BedAndBreakfast, FullBoard, HalfBoard, RoomOnly |
promotion | string[] | [null, null, null] | UTM-Parameter für Buchungs- und Anfragelink. Beispiel: ['medium', 'source', 'campaign'] |
layoutBreakpoints | int[] | [1200, 1024, 768, 414] | Breiten in px, an denen das Widget auf eine andere Ansicht umschaltet. Achtung, hierbei handelt es sich um Breiten des Containers, in dem das Widget integriert ist. (dreispaltig, zweispaltig, einspaltig, einspaltig kleiner) |
getBookingUrl | function(object) | null | Kann verwendet werden, um den Buchungs-Link dynamisch zu generieren. Der Rückgabewert dieser Funktion ist ein Objekt mit 'url' und 'target', das 1:1 für href sowie target des Buchungs-Buttons verwendet wird. Der Übergabewert der Funktion ist das gleiche Objekt, wie von "getSelectedData()" zurückgegeben wird. (Siehe API->getSelectedData() in dieser Dokumentation) Der Wert von 'bookingUrl' wird ignoriert, falls diese Funktion gesetzt ist, der Wert darf aber kein leerer String sein (damit wird der Button ausgeblendet). Siehe Beispiel unterhalb der Tabelle. |
getRequestUrl | function(object) | null | Kann verwendet werden, um den Anfrage-Link dynamisch zu generieren. Der Rückgabewert dieser Funktion ist ein Objekt mit 'url' und 'target', das 1:1 für href sowie target des Anfrage-Buttons verwendet wird. Der Übergabewert der Funktion ist das gleiche Objekt, wie von "getSelectedData()" zurückgegeben wird. (Siehe API->getSelectedData() in dieser Dokumentation) Der Wert von 'requestUrl' wird ignoriert, falls diese Funktion gesetzt ist, der Wert darf aber kein leerer String sein (damit wird der Button ausgeblendet). Siehe Beispiel von getBookingUrl() unterhalb der Tabelle. |
activeTab | string | PriceCalendar | Definiert eine Vorauswahl des aktiven Tabs. Mögliche Werte: 'PriceCalendar', 'LastMinute', 'Offers' |
visibleTabs | string[] | null | Array von Tabs, die angezeigt werden sollen. Kann verwendet werden, um angezeigte Tabs einzuschränken. Es können hiermit keine Tabs eingeblendet werden, die standardmäßig nicht angezeigt werden. Die Reihenfolge der Tabs im Array wird zur Sortierung verwendet. Ein leeres Array blendet alle Tabs aus. Sollte nur ein Tab vorhanden sein, wird es nicht angezeigt. Mögliche Werte sind gleich wie für den Parameter 'activeTab'. |
offerView | string | null | Falls auf einen passenden Wert gesetzt, wird die Angebotsansicht aktiviert. Mögliche Werte: 'Small', 'Medium', 'Large'. Funktioniert nur, wenn die Angebotsansicht in den Einstellungen aktiviert wurde. |
'getBookingUrl': function(selectedData) {
var parameters = {
adults: selectedData.Adults,
childAges: '[' + selectedData.ChildAges.join(',') + ']'
};
if (selectedData.Room != null) {
parameters['roomId'] = selectedData.Room.BookingCodex;
}
var url = new URL('https://www.google.com');
url.search = new URLSearchParams(parameters);
return {
url: url.toString(),
target: '_blank'
}
}
Argument | Typ | Standartwert | Beschreibung |
arrival | string | / | Die Anreise im Format yyyy-MM-dd (z.b. 2021-05-10) |
departure | string | / | Die Abreise im Format yyyy-MM-dd (z.b. 2021-05-16) |
<con-pricecalendar id="pricecalendar"></con-pricecalendar>
<script type="text/javascript">
_conWidgets('init', document.querySelector("#pricecalendar"), {
lang: 'de',
widgetId: "[Domain]",
bookingUrl: "BookingURL",
requestUrl: "RequestURL",
offerView: 'Large' // one of: 'Small', 'Medium', 'Large'
});
</script>
<con-offershowcase id="offerShowcase"></con-offershowcase>
<script>
_conWidgets("init", document.querySelector("#offerShowcase"), {
lang: 'de',
widgetId: '[Domain]',
offerPageUrl: 'OfferPageURL', // link to the page, where the full offer widget is included
offerView: 'Small' // one of: 'Small', 'Medium', 'Large'
});
</script>
document.querySelector("#pricecalendar").con_pricecalendar.getSelectedData();
Beim Wechseln des Zimmers im Dropdown wird folgendes aufgezeichnet:
Bei Auswahl eines Zeitraumes (Anreise + Abreise) oder wechsel der Abreise wird der Zeitraum aufgezeichnet:
Zusätzlich wird beim Klick auf Anfragen oder Buchen in der Ziel-URL der URL Parameter "ref=ratechecker" mitgeschickt, mit dem im eigenen Coding das eigene Tracking entsprechend angepasst werden kann.
Parameter | Pflicht | Typ | Beschreibung |
mealPlan | Ja | string | Verplegungsart (AllInclusive, BedAndBreakfast, FullBoard, HalfBoard, RoomOnly) |
widgetId | Ja | string | Festgelegter Wert, der das Widget identifiziert. |
adults | Nein | int | Anzahl der erwachsenen Personen. |
childAges | Nein | int[] | Auflistung bestehend aus den Lebensjahren aller Kinder. Z.B. [14, 8, 8] |
{
"ZimmerKodex1": {
"BookingCodex": "12345",
"Price": 100.00,
"PricePerPerson": 50.00,
"MaxOccupancy": 5,
"MinOccupancy": 2,
"StandardOccupancy": 5,
"AdultCount": 5
},
"ZimmerKodex2": {
"BookingCodex": "22345",
"Price": 100.00,
"PricePerPerson": 50.00,
"MaxOccupancy": 5,
"MinOccupancy": 2,
"StandardOccupancy": 5,
"AdultCount": 5
}
}