Kognitiv Widgets

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

    Vorbereitung und Voraussetzungen

    Um die Widgets in das eigene Online-Projekt 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

    Dieser obligatorische Tag muss im <head> Element 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 auswirken. 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.

    Achtung

    Verwendung der Widgets im Bakehouse

    Werden die Widgets in einem Bakehouse verwendet, darf folgendes Script nicht im Template eingebunden werden. Durch die Verwendung der Widget-ViewHelper und entsprechender API-Konfiguration werden die Widgets automatisch importiert, die die Anwendung erleichtert und mehrfaches Laden des Scripts verhindert.

    Script-Import

    HTML
    <!-- Schema --> <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/" data-booking-engine="[dsr, kube]" async="true"> </script> <!-- Beispiel --> <script id="hapi" data-inquiry-href="/anfrage/" data-book-href="/buchen/" data-package-detail-href="/pauschalen/" data-token="cookis" data-lang="de" src="https://hapi.bakehouse.at/widget/" data-booking-engine="dsr" async="true"> </script>
    AttributTypeBeschreibungRequired
    data-tokenStringDer Token für die Hotel Zuordnung - dieser wird von uns (Cookis GmbH) bei der Installation der Widgets erstellt und übermittelt.true
    data-lang[de, en, it, nl, fr]
    Sprachkürzel, z. B. "de" für Deutsch und "en" für Englischtrue
    data-inquiry-hrefURLDie URL, die aufgerufen wird, wenn der/die Besucher:in auf Anfragen klickt. Zu dieser URL werden vom Widget auch Parameter hinzugefügt (siehe Punkt Parameterübergabe). Wenn dieses Attribut nicht gesetzt ist, wird kein Anfrage-Button ausgegeben.false
    data-book-hrefURLDie URL, die aufgerufen wird, wenn der/die Besucher:in auf Buchen klickt. Auf dieser URL muss eine Kognitiv Buchungsstrecke eingebunden sein.true
    data-package-detail-hrefURLDie URL, die aufgerufen wird, wenn der/die Besucher:in auf Details bei einer Pauschale klickt. Auf dieser Seite muss das Widget Pauschalen-Detail  eingebaut werden.false
    data-booking-engine[dsr, kube]Die Buchungs-Engine, welche auf der Buchungsseite verwendet wird. (default: dsr)false

    Einstellungen & Anpassungen

    Allgemeine Design Anpassungen

    Das Erscheinungsbild der Widgets kann mit einfachen CSS-Variablen angepasst werden.
    Anpassungen, die die Möglichkeiten der CSS-Variablen übetreffen, können über eigene CSS-Regeln 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.

    CSS
    :root { /*-- 1. empfohlene Einstellungen --*/ /* Farben für Anfrage- 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; }

    Widgets

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

    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.

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

    Verfügbarkeitskalender Live-Beispiel

    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 beim Script im <head>-Element 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.

    HTML
    <hapi-package-list></hapi-package-list>
    Attribut
    TypeBeschreibung
    categoriesString (optional)Der Kategorie-Code aus dem Kognitiv System
    Dient zur Einschränkung der ausgegebenen Kategorien und den zugeordneten Pauschalen. Wenn keine Kategorien angegeben sind, werden alle im System vorhandenen Kategorien ausgegeben, zu denen aktive Pauschalen gefunden werden.

    Pauschalen-Liste Live-Beispiel

    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.

    HTML
    <hapi-package-swiper category="[CATEGORY_CODE]"></hapi-package-swiper>
    Attribut
    TypeBeschreibung
    categoriesString (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-Swiper Live-Beispiel

    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 Pauschalen-Liste oder vom Pauschalen-Swiper zu diesem Widget gelinkt, wird automatisch die richtige Pauschale ausgegeben. Mittels Attribut kann aber auch eine bestimmte Pauschale vordefiniert werden.

    HTML
    <hapi-package-detail></hapi-package-detail>
    Attribut
    TypeBeschreibung
    packageString (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 Live-Beispiel

    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.

    HTML
    <hapi-liveprice-package package="[PACKAGE_CODE]"></hapi-liveprice-package>
    Attribut
    TypeBeschreibung
    packageString (required)Der Package-Code aus dem Kognitiv System

    Pauschalen-Detail Simple Live-Beispiel

    Paramaterübergabe an das Anfrageformular

    Wenn ein/e Besucher:in 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/die Integrator:in des jeweiligen Online-Projekts 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 geklickt 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.

    EventTypeBeschreibung
    hapi-inquiry-clickCustomEvent

    cancelable = true

    bubbles = true

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

    Übergebene Daten

    EventTypeBeschreibung
    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:

    Javascript
    (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); }); })();

    Script-Load

    Dieses Event wird auf dem window ausgelöst, wenn das Hauptscript komplett geladen wurde. Zu diesem Zeitpunkt ist das Widget-Script zwar geladen, aber die benötigten Kognitiv-Daten werden erst angerufen.

    Javascript
    (function() { window.addEventListener('hapi-script-load', () => { console.log('Widget-Script wurde geladen!'); //weiterer Code ... }); })();