Website-Badge

Das Badge ist eine kleine Karte auf der eigenen Website des Hotels. Es zeigt den Direktpreis für einen Aufenthalt und, wenn das Hotel am günstigsten oder gleichauf ist, daneben die Preise der OTAs. Es läuft in einem iframe mit Sandbox, kann also die Seite, auf der es sitzt, nicht lesen, und die Seite kann nicht hineingreifen. Die Sandbox erlaubt ihm zwei Dinge, jeweils nur auf Klick eines Gastes: die Buchungsseite des Hotels in dem Tab zu öffnen, in dem der Gast ist, und stayparity.com über seinen Credit-Link in einem neuen Tab zu öffnen.

Was das Badge Gästen sagt und warum, steht unter Das Direktbuchungs-Badge. Diese Seite erklärt, wie Sie es auf eine Website bringen.

Auf einer Seite einbindenLink kopieren

1. Gehen Sie im Portal zu Settings → Website badge und schalten Sie Badge ein. Das Portal fragt nach der Buchungsseite des Hotels und dem Layout. Beides bleibt auf demselben Bildschirm unter Booking page und Layout, damit Sie es später ändern können. Die Schaltfläche Direkt buchen öffnet die Buchungsseite im selben Tab.
2. Kopieren Sie das Snippet aus der Gruppe Snippet. Es enthält den Einbettungsschlüssel des Hotels und sonst nichts.
3. Fügen Sie es dort ein, wo eine Karte oder Leiste erscheinen soll, meist neben der Datumsauswahl auf der Buchungsseite. Eine Karte oder Leiste erscheint direkt nach dem Tag. Das Dock schwebt unten rechts im Fenster, egal wo das Tag sitzt, mit dem Dock kann das Tag also überall in <body> stehen; fügen Sie es dort ein, wo eine Karte hingehören würde, braucht ein späterer Wechsel des Layouts keine Änderung an der Website.

<!-- StayParity book-direct badge. Its layout is set in StayParity. -->
<script src="https://badge.stayparity.com/embed.js" data-hotel="wk_aurora" async></script>

Das Script setzt ein iframe direkt hinter sein eigenes Tag, oder in das <div> direkt davor, wenn dieses <div> seinen Platz freihält, oder beim Dock ans Ende der Seite. Außer diesem <div> verändert es nichts auf der Seite. Eine Karte oder Leiste füllt die Breite des Elements, das sie umgibt, und jeder Frame passt seine Höhe selbst an das an, was er zeigt. Fügen Sie das Tag einmal für jede Stelle ein, an der Sie ein Badge wollen.

Platz freihaltenLink kopieren

Eine Karte oder Leiste nimmt keinen Platz ein, bis sie die Nacht kennt. Auf einer Seite, die mit der Nacht in ihrer Adresse lädt, schiebt sie den Inhalt darunter deshalb einmal nach unten, wenn sie erscheint. Unter Snippet bietet das Portal für eine Karte oder Leiste ein zweites Snippet, das den Platz des Badges ab dem ersten Rendern der Seite freihält, sodass sich nichts verschiebt:

<!-- StayParity book-direct badge, its space held for the card layout. Copy it again after changing the layout. -->
<div data-stayparity-slot="card" style="display:block!important;padding:444px 0 0!important;height:auto!important;min-height:0!important;border:0!important"></div>
<script src="https://badge.stayparity.com/embed.js" data-hotel="wk_aurora" async></script>

• Lassen Sie das <div> direkt vor dem Script-Tag stehen. Nur dort übernimmt das Script es.
• Das <div> hält den Platz des Layouts frei, das es nennt: 444 Pixel für eine Karte und für eine Leiste 171 Pixel, oder 359, wo das umgebende Element schmaler als etwa 860 Pixel ist. Kopieren Sie das Snippet nach einem Wechsel des Layouts erneut. Ein <div>, das ein anderes Layout nennt, funktioniert weiterhin, aber die Seite verschiebt sich einmal, wenn das Badge seine eigene Höhe annimmt. Das Dock schwebt und hat daher kein solches Snippet; wechseln Sie zu ihm, kehren Sie zum einfachen Snippet zurück.
• Nutzen Sie es nur auf Seiten, die mit der Nacht bereits in ihrer Adresse laden. Auf einer Seite, auf der der Gast zuerst Daten wählt, nimmt das Badge bis dahin keinen Platz ein, sodass sich der freigehaltene Platz beim Laden des Scripts schließen und stattdessen die Seite verschieben würde. Mit dem einfachen Snippet erscheint der Platz, den die erste Nacht braucht, dort innerhalb der eigenen Änderung des Gastes, und die zählen Browser nicht als Layoutverschiebung.
• Hat das Badge nichts zu zeigen, weil der Schlüssel unbekannt ist, das Badge ausgeschaltet ist oder seine erste Preisanfrage fehlschlägt, schließt sich der Platz einmal.
• Kann der Frame des Badges nicht laden, weil sein Host ausgefallen ist oder Ihr frame-src ihn auslässt, zeigt das Badge nichts, und der freigehaltene Platz bleibt leer.

LayoutsLink kopieren

Wählen Sie eines von dreien unter Layout in Settings → Website badge:

• Card: eine Karte an der Stelle, an der Sie das Snippet einfügen, bis zu 480 Pixel breit.
• Strip: eine Leiste, eine Zeile über die Breite des umgebenden Elements, die sich stapelt, wo dieses schmaler als etwa 860 Pixel ist.
• Dock: ein Balken unten rechts im Fenster, der erscheint, sobald Preise da sind, nur wenn die Direktbuchung am günstigsten oder centgenau gleich teuer ist, und der sich zur Karte öffnet. Er liegt über dem größten Teil der Seite, aber unter Cookie-Bannern und Chat-Buttons, sodass ihn ein Chat-Button dort verdecken kann, und er kann einen fixierten Buchungsbalken in dieser Ecke verdecken. Ein Gast, der ihn schließt, sieht ihn erst wieder, wenn er den Tab schließt.

Eine Änderung dort aktualisiert jede Seite mit dem Tag bei ihrem nächsten Laden, ohne neues Snippet, außer wo Sie das Snippet verwenden, das seinen Platz freihält: Dieses nennt das Layout, kopieren Sie es also erneut. Der Frame fragt StayParity bei jedem Laden nach dem Layout und speichert die Antwort nie zwischen.

SpracheLink kopieren

Das Badge spricht Englisch. Schalten Sie Translate the badge in Settings → Website badge ein, und es spricht stattdessen die Sprache des Gastes, wenn dessen Browser Griechisch, Spanisch, Italienisch, Deutsch oder Tschechisch bevorzugt, und sonst Englisch. Es richtet sich nach den im Browser des Gastes eingestellten Sprachen, nicht nach der Sprache Ihrer Seite, und schreibt Preise und Daten so, wie diese Sprache es tut. Es ist ausgeschaltet, bis Sie es einschalten, und wie das Layout erreicht es jede Seite mit dem Tag bei ihrem nächsten Laden, ohne neues Snippet.

OptionenLink kopieren

Das Tag hat ein einziges Attribut, data-hotel: den Einbettungsschlüssel des Hotels, wk_…. Ohne ihn stellt das Tag nichts dar. Das Layout und die Spracheinstellung kommen von StayParity, die Nacht von der Seite.

Für welche Nacht es Preise zeigtLink kopieren

Das Badge zeigt Preise für eine Nacht: das Anreisedatum und die Zahl der Erwachsenen, die Ihr Gast wählt. Es findet beides nur in der Adresse Ihrer Seite und in den Datums- und Erwachsenenfeldern Ihres Buchungsformulars und liest sonst nichts auf der Seite. Bis es sowohl ein Anreisedatum als auch die Zahl der Erwachsenen kennt, zeigt es nichts und nimmt keinen Platz ein: keine Karte, keine Leiste, kein Dock. Es erscheint, sobald es beides kennt, zum Beispiel in dem Moment, in dem ein Gast in einem Formular mit einem Erwachsenenfeld Daten wählt.

Das Badge startet eine neue Prüfung nur für die Belegungen, für die das Hotel überwacht wird. Für jede andere zeigt es nur dann einen Preis, wenn bereits einer abgerufen wurde.

Was es liest:

• Die Adresse der Seite, einmal, beim Laden der Seite. Das Anreisedatum aus checkin, checkInDate, arrive, arrival, arrivalDate, startDate, dateFrom, fromDate oder mewsStart; die Erwachsenen aus adults, adult, numberOfAdults, guests, occupancy, persons, pax oder mewsAdultCount. Groß- und Kleinschreibung, - und _ spielen keine Rolle, also zählen auch check_in und Check-In.
• Die Felder Ihres Buchungsformulars, beim Laden der Seite und immer dann, wenn der Gast eines ändert. Ein Anreisefeld ist eines, dessen Name oder ID auf Englisch Check-in oder Anreise sagt (etwa checkin oder arrival, aber nicht Check-out oder Abreise), oder das erste von zwei Datumsfeldern in einem Formular. Ein Erwachsenenfeld ist eines, dessen Name oder ID adult enthält oder genau guests, persons, occupancy oder pax lautet und weder child, kid, infant noch room enthält. Es liest nie ein Passwort-, E-Mail-, Telefon- oder Kreditkartenfeld.

Die letzte Änderung des Gastes hat Vorrang vor der Adresse, und die Adresse hat Vorrang vor dem, was das Formular beim Laden der Seite enthielt. Die erste Nacht, die es kennt, wird sofort geprüft. Danach wartet das Badge nach der letzten Änderung des Gastes eine halbe Sekunde, bevor es erneut fragt, sodass eine Datumsauswahl, die zwei Felder setzt, nur eine Prüfung kostet.

Es liest keine Formulare in einem anderen Frame oder einer Shadow Root, keine Felder, die es nicht als Anreise- oder Erwachsenenfeld erkennt, keine Daten in einem anderen Format als YYYY-MM-DD, keine Werte, die Ihr Code ohne change-Ereignis setzt, und keine Datums- und Gästeauswahlen, die keine Formularfelder sind.

Läuft Ihr Buchungsformular in einem eigenen Frame oder nutzt es Datums- und Gästeauswahlen, die keine Formularfelder sind, kann das Badge die Nacht nicht sehen und bleibt verborgen. Setzen Sie die Nacht stattdessen in die Adresse der Seite, etwa ?checkin=2027-06-14&adults=2.

Was Gäste sehenLink kopieren

Das Badge vergleicht den Direktpreis mit den Preisen der OTAs für diese Nacht und zeigt diese Preiskarten. Die Texte sind die deutschen, die ein Gast bei eingeschalteter Übersetzung sieht, wenn sein Browser Deutsch bevorzugt.

Über dem Titel steht ein Siegel, Bester Preis hier, wenn der Gast bei der Direktbuchung Geld spart, und sonst Offizielle Website, daneben, wie lange die Prüfung der Preise her ist, etwa Geprüft vor 12 Min. (das entfällt, sobald die Prüfung eine Woche alt ist). Unter dem Preis nennt jedes Layout die Nacht, für die es Preise zeigt, etwa Nacht vom Sa., 4. Okt. · 2 Erwachsene oder Heute Nacht. Die OTAs stehen unter Derselbe Aufenthalt anderswo. Die Karte endet mit der Schaltfläche Direkt buchen, auf deren Abschnitt die Ersparnis oder der Preis pro Nacht steht. Darunter verlinkt Preisprüfung von StayParity in einem neuen Tab auf stayparity.com.

Während die erste Prüfung für einen Aufenthalt läuft, zeigt die Karte einen pulsierenden Umriss ihrer selbst, ohne Wörter auf dem Bildschirm; Screenreader hören Wir prüfen die heutigen Preise. Kommt innerhalb von etwa 30 Sekunden kein Preis, zeigt sie Buchen Sie direkt beim Hotel ohne Preis und behält die Schaltfläche. Sofort, ohne die Wartezeit, zeigt sie Buchen Sie direkt beim Hotel, wenn:

• das Hotel in StayParity inaktiv ist.
• die Belegung keine ist, für die das Hotel überwacht wird, und für sie noch kein Preis abgerufen wurde.
• eine Prüfung abgelehnt wird: Der Aufenthalt liegt in der Vergangenheit oder weiter in der Zukunft, als das Paket des Hotels prüft, oder das Kontingent an Prüfungen des Hotels ist aufgebraucht.
• eine Anfrage fehlschlägt, nachdem eine frühere geantwortet hat.

Preise stehen in der eigenen Währung des Hotels, formatiert für das Gebietsschema des Gastes. Die Texte der Karte sind auf Englisch oder, wenn die Übersetzung eingeschaltet ist, in der Sprache des Gastes.

Ist das Badge des Hotels so eingestellt, dass es die Übernachtungssteuer erwähnt, fügt die Karte eine Zeile mit der Steuer hinzu, falls sie im Hotel bezahlt wird, vermerkt die eigene Gebühr jeder OTA in deren Zeile und blendet die Spalte, wie viel teurer jede OTA ist, aus, sobald eine dieser Gebühren erscheint. Jeder Preis bleibt der, den seine eigene Website zeigt, und die Karte addiert nie zwei Beträge: Lässt nur einer der beiden Preise die Steuer weg, steht seine Gebühr daneben, etwa „142 € + 6 € Übernachtungssteuer hier“ oder „145 € + 8 € Übernachtungssteuer bei Booking.com“.

Was es nie zeigtLink kopieren

• Einen OTA-Preis unter dem eigenen des Hotels, oder auch nur, dass es einen gibt. Ist eine OTA günstiger, listen Karte und Leiste gar keine OTAs auf statt nur der teureren, und das Dock bleibt verborgen. Auch die API verrät nie eine Preisabweichung: Sie beantwortet diese Nacht genau so wie eine, die keine OTA verkauft, sodass weder ein Gast noch ein Script, das den Endpunkt abfragt, die beiden unterscheiden kann. Das Hotel erhält die Preisabweichung trotzdem im Portal und in seinen Alarmen.
• Die interne ID des Hotels, wo ein Preis abgerufen wurde oder wie sicher wir uns bei ihm sind.
• Einen Fehler. Der Frame hält keinen Platz frei, bis das Badge die Nacht kennt, es sei denn, Sie halten ihn frei. Sobald es sie kennt, zeigt eine Karte oder Leiste einen pulsierenden Umriss ihrer selbst, während die erste Prüfung läuft, und schiebt daher ohne freigehaltenen Platz den Inhalt darunter einmal nach unten, wenn sie erscheint. Sobald sie antwortet, behält sie mindestens die Höhe dieses Umrisses (444 Pixel für eine Karte; 171 Pixel für eine Leiste, oder 359 in einer Spalte, die schmaler als etwa 860 Pixel ist), sodass eine kürzere Antwort unten Raum lässt, statt die Seite zu verschieben; nur eine längere, etwa eine Karte mit den Zeilen zur Übernachtungssteuer oder eine Leiste mit einem Preis von acht oder mehr Stellen vor dem Komma samt Cent, lässt sie wachsen. Das Dock nimmt keinen Platz ein, während die erste Prüfung läuft, und bleibt verborgen, wann immer eine OTA günstiger ist, die Preise nur innerhalb der Toleranz der Prüfung übereinstimmen, keine OTA die Nacht verkauft oder die Prüfung fehlschlägt. Ist der Schlüssel unbekannt oder das Badge ausgeschaltet, fällt der Frame auf null Höhe zusammen und hinterlässt keine Lücke auf der Seite. Schlägt diese erste Anfrage fehl, fällt der Frame genauso zusammen; hat eine Anfrage einmal geantwortet, zeigt ein späterer Fehler auf einer Karte oder Leiste Buchen Sie direkt beim Hotel. Der Browser eines Gastes zeigt eine Karte, die er in den letzten fünf Minuten geladen hat, möglicherweise weiter an.

Der Frame setzt keine Cookies und speichert nichts. Das Script speichert einen einzigen Wert im Session Storage des Tabs, und nur, wenn ein Gast das Dock schließt, damit es für den Rest des Besuchs geschlossen bleibt.

Content Security PolicyLink kopieren

Sendet die Website einen Content-Security-Policy-Header, erlauben Sie dem Ursprung des Badges, das Script und den Frame zu laden:

script-src https://badge.stayparity.com;
frame-src https://badge.stayparity.com;

Fügen Sie diese zu den Quellen hinzu, die die Website bereits erlaubt, statt sie zu ersetzen. Das Script setzt die Größe des Frames über das DOM, nicht über Inline-style-Attribute im Markup, daher braucht das einfache Snippet keine Änderung an style-src. Das Snippet, das den Platz des Badges freihält, hat ein style-Attribut, das von einer Policy ohne 'unsafe-inline' für Styles blockiert wird: Das Badge funktioniert weiterhin, hält aber keinen Platz frei, bevor es erscheint. Um ihn unter einer solchen Policy freizuhalten, lassen Sie das style-Attribut weg und geben dieselben Regeln in Ihrem eigenen Stylesheet an:

[data-stayparity-slot] {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
}
[data-stayparity-slot="card"] {
  padding: 444px 0 0 !important;
}
[data-stayparity-slot="strip"] {
  padding: clamp(171px, (858px - 100%) * 100000, 359px) 0 0 !important;
}

Eine Regel aus Ihrem Stylesheet kann gegen eine spezifischere !important-Regel Ihrer Website verlieren, die auf dasselbe <div> zutrifft; beim style-Attribut kann das nicht passieren.

Das Layout und die Preise werden innerhalb des Frames abgerufen, unter der eigenen Policy des Frames, daher braucht auch connect-src keine Änderung. Nutzt Ihre Script-Policy Nonces oder strict-dynamic, geben Sie dem Script-Tag die Nonce, die Ihre Website verwendet; einen Host nur zur Allowlist hinzuzufügen, erlaubt es möglicherweise nicht.

Ausschalten oder ersetzenLink kopieren

• Ausschalten: Schalten Sie Badge in Settings → Website badge aus. Neue Besucher sehen nichts, da der Frame verschwindet; der Browser eines Gastes zeigt eine Karte, die er in den letzten fünf Minuten geladen hat, möglicherweise weiter an. Schalten Sie es wieder ein, funktioniert dasselbe Snippet wieder.
• Layout ändern: Wählen Sie ein anderes unter Layout in Settings → Website badge. Jede Seite mit dem Tag zeigt es bei ihrem nächsten Laden, mit demselben Snippet.
• Übersetzen: Schalten Sie Translate the badge in Settings → Website badge um. Jede Seite mit dem Tag folgt bei ihrem nächsten Laden, mit demselben Snippet.
• Ersetzen: Replace snippet erzeugt einen neuen Einbettungsschlüssel. Der alte Schlüssel wird bei der nächsten nicht zwischengespeicherten Anfrage abgelehnt, auf jeder Website, die ihn hat, bis Sie das neue Snippet einfügen. Ein Browser zeigt eine in den letzten fünf Minuten zwischengespeicherte Karte möglicherweise weiter an.

Nur Kontoadmins können das Badge ein- oder ausschalten, sein Layout oder seine Sprache ändern oder das Snippet ersetzen.

PerformanceLink kopieren

Das Script lädt mit async und hält die Seite daher nie auf. Der Frame lädt mit der Seite, weil es der Frame ist, der StayParity nach dem Layout fragt; beim Dock lädt er einmal an der Stelle des Tags und, sobald er die Nacht kennt, noch einmal in der Ecke. Bevor er die Nacht kennt, fragt er keine Preise an. Danach fragt er nur dann erneut, wenn sich der Gast auf eine andere Nacht festlegt.