Bakehouse Webseite

Bakehouse Tutorial

Kognitiv Widgets

Mit den Kognitiv Widgets lassen sich die Daten von Kognitiv übersichtlich und einfach in eine Webseite einbinden. Die in den Widgets angezeigten Pauschalen, Zimmer, Preise und Verfügbarkeiten entsprechen dabei immer dem aktuellen Verfügbarkeits- und Preisstand und werden live aktualisiert. 

Vorbereitung und Voraussetzungen

Um die Widgets in die eigene Webseite einbinden zu können ist eine Kognitiv-Installation beim Kunden notwendig. Die Erweiterung API muss in Kognitiv freigeschaltet sein. Im Anschluss können die Widgets bei uns gebucht und eingerichtet werden. Gerne helfen wir bei der Einrichtung und erstellen ein persönliches Angebot. Unser Supportteam steht unter support@bakehouse.at jederzeit zur Verfügung.

Einbindung und Installation

<head> Script Tag

Dieser obligatorische Tag muss im <head> der Webseite eingebaut werden. Hiermit werden die notwendigen Javascript Dateien nachgeladen. Über die Data-Attribute werden wichtige Einstellungen vorgenommen die sich auf das Verhalten der Widgets auswirkt. Werden Fehler aufgrund von falschen Attributangaben verursacht, können über die Debug Console des Browsers genauere Informationen aufgerufen werden. Die ID hapi  darf nicht verändert werden. 

<script id="hapi" data-inquiry-href="[URL]" data-book-href="[URL]" data-package-detail-href="[URL]" data-token="[TOKEN]" data-lang="[LANG]" src="https://hapi.bakehouse.at/widget/" async="true"></script>
AttributTypeBeschreibung
data-tokenStringDer Token für die Hotel Zuordnung, dieser wird von uns (Cookis GmbH) bei der Installation der Widgets erstellt und übermittelt. 
data-langISO-639-1-CodeSprachkürzel, z.B. "de" für Deutsch und "en" für Englisch
data-inquiry-hrefURLDie URL die aufgerufen wird, wenn der User auf Anfragen klickt. Zu dieser URL werden vom Widget auch Parameter hinzugefügt (siehe Punkt Parameterübergabe). 
data-book-hrefURLDie URL die aufgerufen wird, wenn der User auf Buchen klickt. Auf dieser URL muss die Kognitiv Buchungsstrecke eingebunden sein. 
data-package-detail-hrefURL [optional]Die URL die aufgerufen wird, wenn der User auf "Details" bei einer Pauschale klickt. Auf dieser Seite muss das Widget Pauschalen-Detail  eingebaut werden.

Widgets

Die Kognitiv-Codes zu den verschiedenen Parameter, wie Zimmer Code, können aus dem HAPI-Code-Tool entnommen weren.

Zimmer - Verfübkarkeitskalender mit Preisrechner

Gibt den aktuellen Verfügbarkeitskalender für ein Zimmer aus. Dabei wird Tagesaktuell der Preis für jeden Tag ausgegeben. Bei erfolgter Personenauswahl wird der Gesamtpreis ermittelt und angezeigt.

<hapi-liveprice-room room="[ROOM_CODE]"></hapi-liveprice-room>
AttributTypeBeschreibung
roomString (required)Der Zimmer-Code aus dem Kognitiv System

Pauschalen-Liste

Gibt eine Liste aller aktuell verfügbaren Pauschalen aus.  Die Kategorien aus Kognitiv können ausgelesen und entsprechend gefiltert werden. Die Detailansicht der Pauschale kann in der Lightbox geöffnet werden. Wird im <head> Script das Attribut data-package-detail-href  angegeben, wird bei Klick auf Detail die entsprechende URL aufgerufen. Auf der Zielseite muss das Widget Pauschal-Detail eingebaut werden.

<hapi-package-list></hapi-package-list>
AttributTypeBeschreibung
categories
String (optional)Der Kategorie-Code aus dem Kognitiv System, dient zur Einschränkung der Ausgegebenen Kategorien und den zugeordneten Pauschalen. Wenn keine Kategorienen angebenen sind, werden alle im System vorhandene Kategorien ausgegeben zu denen aktive Pauschalen gefunden werden.

Pauschalen-Swiper

Gibt eine Swiperansicht der aktuell verfügbaren Pauschalen aus.
Es ist möglich die Ansicht auf eine bestimmte Pauschalkategorie einzuschränken.
Die Detailansicht der Pauschale kann in der Lightbox oder einer eigenen Seite geöffnet werden.

<hapi-package-swiper category="[CATEGORY_CODE]"></hapi-package-swiper>
AttributTypeBeschreibung
categoryString (optional)Der Kategorie-Code aus dem Kognitiv System, wenn das Attribut vorhanden ist, werden Pauschalen aus dieser Kategorie angezeigt. Wenn das Attribut nicht vorhanden ist, werden alle verfügbaren Pauschalen angezeigt.

Pauschalen-Detail 

Die Detailansicht einer Pauschale. Der verfügbare Zeitraum, wird ebenso ausgegeben wie die buchbaren Zimmer und die Pauschalbeschreibung. Bei Auswahl der Personenanzahl wird live der Preis ermittelt. Wird von einer Pauschal-Liste oder vom Pauschal-Swiper zu diesem Widget gelinkt wird automatisch die richtige Pauschale ausgegeben. Mittels Attribut kann aber auch eine bestimmte Pauschale vordefiniert werden.

<hapi-package-detail></hapi-package-detail>
AttributTypeBeschreibung
package
String (optional)Der Package-Code aus dem Kognitiv System, wenn das Attribut vorhanden ist, wird diese Pauschale angezeigt. Wenn das Attribut nicht vorhanden ist, wird der Package-Code aus dem URL Parameter ausgelesen (z.B. ?package=[PACKAGE_CODE])

Pauschalen-Detail Simple

Entspricht der Standard Detailansicht einer Pauschalen, wird aber um einige Features reduziert.
Der Fokus dieses Widgets liegt am Verfügbarkeitskalender und den buchbaren Zimmern.

<hapi-liveprice-package package="[PACKAGE_CODE]"></hapi-liveprice-package>
AttributTypeBeschreibung
package
String (required)Der Package-Code aus dem Kognitiv System

Einstellungen & Anpassungen

Allgemeine Design Anpassungen

Das Erscheinungsbild der Widgets kann mit einfachen CSS Variablen angepasst werden.
Anpassungen die über die Möglichkeiten der CSS Variablen können über eigene CSS-Anweisungen durchgeführt werden. Änderungen an der Kognitiv API machen jedoch immer wieder Anpassungen an den Widgets notwendig. Wir bitten dies bei manuellen Eingriffen zu berücksichtigen.

<style> :root { /** * 1. empfohlene Einstellungen */ /* Farben für Anfarge- und Buchenbuttons */ --hapi-background-button: #5187ce; --hapi-color-button: #ffffff; /* Primär: Farben für eine buchungsspezifische Auswahl, z.B. Urlaubszeitraum */ --hapi-background-primary: #5db65d; --hapi-color-primary: #ffffff; /* Kontrast: diese Farben sollten einen möglich gut erkennbaren Kontrast zu den oben genannten primären Farben haben, z.B. im Kalender ein verfügbarer Tag */ --hapi-background-contrast: rgba(0, 0, 0, 0.1); --hapi-color-contrast: inherit; /* Ecken für Buttons, Cards usw. */ --hapi-border-radius: 5px; /* für CIs mit Eckigen Kanten = 0px */ /** * 2. sonstige Einstellungen (optional) */ /* Schriftgröße */ --hapi-font-size: 14px; /* Schriftfarbe */ --hapi-color-text: inherit; /* standardmäßig, wird die aktuelle Schriftfarbe übernommen*/ /* Linkfarbe in den Widgets, z.B. Pauschalendetail Link */ --hapi-color-link: #5187ce; /* Markierung für eine nicht verfügbare Auswahl, z.B. Datum ist nicht buchbar */ --hapi-error-color: #db6060; --hapi-error-color-text: #ffffff; } </style>

Sprachen und Übersetzungen

Die aktuelle Sprache der Widgets wird über den globalen Script Tag definiert.
Der eingebaute Script Tag kann also pro Sprachversion leicht variieren. Es empfiehlt sich die Attribute data-lang  und die hinterlegten Links an die jeweilige Sprache anzupassen. 

Derzeit werden folgende Sprachen unterstützt: de, en, it, nl, fr

Paramaterübergabe an das Anfrageformular

Wenn ein User in den Widgets auf einen Anfragebutton klickt werden alle vorhandenen Werte als Get-Parameter übergeben. Diese Daten können auf Wunsch ausgelesen und ins Anfrageformular übertragen werden. Diese Übernahme und Ausgabe muss durch den Integrator der jeweiligen Webseite erfolgen. 

ParameterTypeBeschreibung
checkinDate
(yyyy-mm-dd)		Anreisedatum
checkoutDate
(yyyy-mm-dd)		Abreisedatum, immer vorhanden wenn "checkin" vorhanden ist
adultsIntegerAnzahl der Erwachsenen
childrenIntegerAnzahl der Kinder
age_of_child_[X]IntegerAlter von einem Kind, das "[X]" steht für das Kind, z.B. bei 2 Kinder mit 2 und 5 Jahren gibt es "age_of_child_1=2" und "age_of_child_2=5"
roomStringZimmer Code aus dem Kognitiv System, z.B. "ROOM_1"
mealplanInteger

Verpflegungsart die zu einem Rateplan bei Kognitiv hinterlegt ist (die Liste der IDs ist vorzugsweise bei Kognitiv zu entnehmen, die Liste anbei dient zur schnellen Übersicht)

  • 0/null = ohne Verpflegung
  • 1 = All inclusive
  • 10 = Full board
  • 11 = Breakfast
  • 12 = Half board
  • 100 = 3/4 board
packageStringPauschalen Code aus dem Kognitiv System, z.B. "PACK_1"

Events

Anfrage-Button Clicked

Dieses Event wird gefeuert wenn ein Anfrage Button geklicked wurde. Die ursprüngliche Intention war, eine Möglichkeit zu bieten, um das Standardverhalten unterbinden zu können um eventuell eine eigene Parameterübergabe Methode zu integrieren. Ansonsten kann man dies auch für  das Tracking verwenden.

Event
TypeBeschreibung
hapi-inquiry-clickCustomEvent

cancelable = true

bubbles = true

detail = Beschreibung im nächsten Punkt "Übergebene Daten"

Übergebene Daten

Event
TypeBeschreibung
inquiryUrlString (URL)

Die im Widget eingestellte Inquiry Url

urlString (URL)

Die URL die der ursprüngliche Klick aufgerufen hätte

paramsObject

Siehe Punkt "Paramaterübergabe an das Anfrageformular"

Beispiel

(function() { const body = document.querySelector('body'); body.addEventListener('hapi-inquiry-click',(e) => { e.preventDefault(); var data = e.detail; //weiterer Code ... console.log('diese Werte werden Übergeben', data); }); })();
© Cookis Webworks |