Widget na web

Widget je malá karta na vlastním webu hotelu. Ukazuje přímou cenu pobytu, a když je hotel nejlevnější nebo stejně drahý, také ceny OTA vedle ní. Běží v sandboxovaném iframu, takže nemůže číst stránku, na které je, a stránka nemůže zasahovat do něj. Sandbox mu dovoluje dvě věci, obě jen na kliknutí hosta: otevřít rezervační stránku hotelu na kartě prohlížeče, na které host je, a otevřít stayparity.com na nové kartě ze svého odkazu na StayParity.

Co widget hostům říká a proč, popisuje stránka Widget pro přímé rezervace. Tato stránka je o tom, jak ho dostat na web.

Vložení na stránkuKopírovat odkaz

1. V portálu přejděte do Settings → Website badge a zapněte Badge. Portál se zeptá na rezervační stránku hotelu a na rozvržení. Obojí zůstává na stejné obrazovce, pod Booking page a Layout, abyste to mohli později změnit. Tlačítko Book direct (česky Rezervovat přímo) otevře rezervační stránku na stejné kartě prohlížeče.
2. Zkopírujte kód pro vložení ze skupiny Snippet. Obsahuje klíč pro vložení daného hotelu a nic dalšího.
3. Vložte ho tam, kde se má objevit karta nebo lišta, obvykle vedle výběru data na rezervační stránce. Karta nebo lišta se vykreslí hned za tagem. Panel se vznáší v pravém dolním rohu okna, ať je tag kdekoli, takže s panelem může tag být kdekoli v <body>; když ho vložíte tam, kde by byla karta, nebude pozdější změna rozvržení vyžadovat žádnou úpravu webu.

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

Skript vloží iframe hned za svůj vlastní tag, nebo do <div> těsně před ním, pokud ten <div> drží jeho místo, nebo u panelu na konec stránky. Na nic jiného na stránce než na tento <div> nesahá. Karta nebo lišta vyplní šířku prvku, ve kterém je, a každý rámec si sám nastaví výšku podle toho, co ukazuje. Tag vložte jednou na každé místo, kde chcete widget mít.

Vyhrazení místaKopírovat odkaz

Karta nebo lišta nezabírá žádné místo, dokud nezná noc, takže na stránce, která se načte s nocí v adrese, jednou posune obsah pod sebou dolů, když se objeví. Pod Snippet nabízí portál pro kartu nebo lištu druhý kód pro vložení, který drží místo widgetu od prvního vykreslení stránky, takže se nic neposune:

<!-- 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>

• <div> nechte přímo před tagem script. Jen tam ho skript převezme.
• <div> drží místo rozvržení, které uvádí: 444 pixelů pro kartu a pro lištu 171 pixelů, nebo 359 tam, kde je prvek, ve kterém je, užší než zhruba 860 pixelů. Po změně rozvržení kód pro vložení zkopírujte znovu. <div>, který uvádí jiné rozvržení, dál funguje, jen se stránka jednou posune, až si widget nastaví vlastní výšku. Panel se vznáší, takže takový kód pro vložení nemá; při přechodu na něj se vraťte k základnímu.
• Používejte ho jen na stránkách, které se načítají s nocí už v adrese. Na stránce, kde host nejdřív vybírá data, widget do té doby nezabírá žádné místo, takže by se držené místo při načtení skriptu zavřelo a stránku by naopak posunulo. Se základním kódem pro vložení se tam místo, které první noc zabere, objeví uvnitř změny, kterou udělal sám host, a tu prohlížeče jako posun rozvržení nepočítají.
• Pokud widget nemá co ukázat, protože klíč je neznámý, widget je vypnutý nebo selže jeho první požadavek na cenu, místo se jednou zavře.
• Pokud se rámec widgetu nenačte, protože je jeho server mimo provoz nebo ho vaše frame-src nepovoluje, widget neukáže nic a držené místo zůstane prázdné.

RozvrženíKopírovat odkaz

V Settings → Website badge vyberte pod Layout jedno ze tří:

• Card (karta): karta tam, kam vložíte kód pro vložení, široká nejvýše 480 pixelů.
• Strip (lišta): jeden řádek přes celou šířku prvku, ve kterém je; kde je ten prvek užší než zhruba 860 pixelů, skládá se pod sebe.
• Dock (panel): pruh v pravém dolním rohu okna, který se objeví, jakmile dorazí ceny, jen když je přímá rezervace nejlevnější nebo na cent stejně drahá, a rozbalí se do karty. Je nad většinou stránky, ale pod bannery cookies a tlačítky chatu, takže ho tlačítko chatu v tom rohu může zakrýt, a on může zakrýt sticky rezervační lištu v tom rohu. Host, který ho zavře, ho znovu neuvidí, dokud nezavře kartu prohlížeče.

Změna tam se projeví na každé stránce s tagem při jejím dalším načtení, bez nového kódu pro vložení, kromě míst, kde používáte kód pro vložení, který drží jeho místo: ten rozvržení uvádí, takže ho zkopírujte znovu. Rámec se StayParity ptá na rozvržení při každém načtení a odpověď si nikdy neukládá do mezipaměti.

JazykKopírovat odkaz

Widget mluví anglicky. Zapněte Translate the badge v Settings → Website badge a widget bude místo toho mluvit jazykem hosta, když jeho prohlížeč preferuje řečtinu, španělštinu, italštinu, němčinu nebo češtinu, a jinak anglicky. Řídí se jazyky nastavenými v prohlížeči hosta, ne jazykem vaší stránky, a ceny a data píše tak, jak je píše daný jazyk. Překlad je vypnutý, dokud ho nezapnete, a stejně jako rozvržení se při dalším načtení projeví na každé stránce s tagem, bez nového kódu pro vložení.

MožnostiKopírovat odkaz

Tag má jeden atribut, data-hotel: klíč pro vložení daného hotelu, wk_…. Bez něj tag nevykreslí nic. Rozvržení a nastavení jazyka přicházejí ze StayParity, noc ze stránky.

Pro kterou noc ukazuje cenuKopírovat odkaz

Widget ukazuje cenu jedné noci: datum příjezdu a počet dospělých, které host vybere. Hledá je jen v adrese vaší stránky a v polích pro datum a počet dospělých ve vašem rezervačním formuláři a nic dalšího na stránce nečte. Dokud nezná datum příjezdu i počet dospělých, neukazuje nic a nezabírá žádné místo: žádná karta, žádná lišta, žádný panel. Objeví se, jakmile zná obojí, například ve chvíli, kdy host vybere data ve formuláři, který má pole pro počet dospělých.

Novou kontrolu widget spustí jen pro počty hostů, u kterých se hotel sleduje. U jakéhokoli jiného ukáže cenu, jen pokud už byla nějaká načtena.

Co čte:

• Adresu stránky, jednou, při načtení stránky. Příjezd z checkin, checkInDate, arrive, arrival, arrivalDate, startDate, dateFrom, fromDate nebo mewsStart; dospělé z adults, adult, numberOfAdults, guests, occupancy, persons, pax nebo mewsAdultCount. Na velikosti písmen, - a _ nezáleží, takže platí i check_in a Check-In.
• Pole vašeho rezervačního formuláře, při načtení stránky a vždy, když host některé změní. Pole pro příjezd je takové, jehož name nebo id označuje příjezd, tedy check-in nebo arrival (ale ne check-out nebo departure), nebo první z dvojice datových polí v jednom formuláři. Pole pro dospělé je takové, jehož name nebo id obsahuje adult nebo je přesně guests, persons, occupancy či pax, a neobsahuje child, kid, infant ani room. Nikdy nečte pole pro heslo, e-mail, telefon ani platební kartu.

Poslední změna od hosta má přednost před adresou a adresa má přednost před tím, co formulář obsahoval při načtení stránky. První noc, kterou zná, se zkontroluje hned. Potom widget po poslední změně od hosta čeká půl sekundy, než se zeptá znovu, takže výběr data, který nastaví dvě pole, stojí jednu kontrolu.

Nečte formuláře v jiném rámci ani ve shadow rootu, pole, která nepozná jako příjezd nebo počet dospělých, data zapsaná jinak než jako YYYY-MM-DD, hodnoty, které váš kód nastaví bez události change, ani výběr data a hostů, který není polem formuláře.

Pokud váš rezervační formulář běží ve vlastním rámci nebo používá výběr data a hostů, který není polem formuláře, widget noc nevidí a zůstane skrytý. Dejte noc místo toho do adresy stránky, například ?checkin=2027-06-14&adults=2.

Co uvidí hostéKopírovat odkaz

Widget porovná přímou cenu s cenami OTA pro danou noc a ukáže tyto cenové karty. Texty jsou české, jak je host uvidí při zapnutém překladu, když jeho prohlížeč preferuje češtinu.

Nad nadpisem je štítek Nejlepší cena zde, když host přímou rezervací ušetří, a jinak Oficiální web, a vedle něj, jak dávno byly ceny zkontrolovány, například Zkontrolováno před 12 min (vynechá se, jakmile je kontrola týden stará). Pod cenou každé rozvržení uvádí noc, pro kterou cenu ukazuje, například Noc so 4. 10. · 2 dospělí, nebo Dnešní noc. OTA jsou uvedené pod Stejný pobyt jinde. Karta končí tlačítkem Rezervovat přímo s úsporou nebo cenou za noc na jeho ústřižku. Pod ním odkazuje Ceny kontroluje StayParity na stayparity.com na nové kartě.

Zatímco běží první kontrola pobytu, karta ukazuje pulzující obrys své podoby, bez slov na obrazovce; čtečky obrazovky ohlásí Kontrolujeme dnešní ceny. Pokud do zhruba 30 sekund nedorazí žádná cena, ukáže Rezervujte přímo u hotelu bez ceny a tlačítko ponechá. Rezervujte přímo u hotelu ukáže hned, bez čekání, když:

• je hotel ve StayParity neaktivní.
• počet hostů není takový, u kterého se hotel sleduje, a žádná cena pro něj nebyla načtena.
• je kontrola odmítnuta: pobyt je v minulosti nebo dál v budoucnosti, než kam tarif hotelu kontroluje, nebo je vyčerpaný limit kontrol hotelu.
• selže požadavek poté, co dřívější už dostal odpověď.

Ceny jsou v měně hotelu, naformátované podle národního prostředí hosta. Slova na kartě jsou anglicky, nebo v jazyce hosta, když je zapnutý překlad.

Když je widget hotelu nastavený tak, aby zmiňoval poplatek z pobytu, karta přidá řádek s poplatkem, pokud se platí v hotelu, u každé OTA na jejím řádku uvede její vlastní poplatek a skryje sloupec s tím, o kolik je každá OTA dražší, kdykoli se některý z těchto poplatků objeví. Každá cena zůstává taková, jakou ukazuje její vlastní web, a karta nikdy dvě ceny nesčítá: když cena jen jedné strany poplatek nezahrnuje, je u ní poplatek uveden zvlášť, například „142 € + 6 € poplatek z pobytu zde“ nebo „145 € + 8 € poplatek z pobytu na Booking.com“.

Co nikdy neukážeKopírovat odkaz

• Cenu OTA nižší než cena hotelu, ani to, že nějaká existuje. Když je některá OTA levnější, karta a lišta neuvedou vůbec žádné OTA, ani ty dražší, a panel zůstane skrytý. Ani API disparitu nikdy neprozradí: na takovou noc odpoví přesně tak, jako na noc, kterou žádná OTA neprodává, takže to od sebe nerozliší host ani skript, který endpoint čte. Hotel disparitu dál dostane v portálu a ve svých upozorněních.
• Interní ID hotelu, zdroj, ze kterého byla cena načtena, ani to, jak moc jsme si jí jistí.
• Chybu. Rámec nedrží žádné místo, dokud widget nezná noc, pokud ho nevyhradíte. Jakmile ji zná, karta nebo lišta ukazuje během první kontroly pulzující obrys své podoby, takže bez vyhrazeného místa jednou posune obsah pod sebou dolů, když se objeví. Jakmile odpoví, drží si nejméně výšku toho obrysu (444 pixelů pro kartu; 171 pixelů pro lištu, nebo 359 ve sloupci užším než zhruba 860 pixelů), takže kratší odpověď nechá volné místo dole, místo aby posunula stránku; zvětšit ji může jen delší odpověď, například karta s řádky o poplatku z pobytu nebo lišta s cenou o osmi a více číslicích před desetinnou čárkou, i s centy. Panel během první kontroly nezabírá žádné místo a zůstává skrytý, kdykoli je některá OTA levnější, ceny se shodují jen v rámci tolerance kontroly, žádná OTA noc neprodává nebo kontrola selže. Pokud je klíč neznámý nebo je widget vypnutý, rámec se smrští na nulovou výšku a na stránce nenechá mezeru. Pokud selže ten první požadavek, rámec se smrští stejně; jakmile některý požadavek odpověděl, pozdější selhání ukáže na kartě nebo liště Rezervujte přímo u hotelu. Prohlížeč hosta může dál ukazovat kartu, kterou načetl během posledních pěti minut.

Rámec nenastavuje žádné cookies a nic neukládá. Skript uloží jednu hodnotu do úložiště relace karty prohlížeče, a to jen když host panel zavře, aby zůstal zavřený po zbytek návštěvy.

Content Security PolicyKopírovat odkaz

Pokud web posílá hlavičku Content-Security-Policy, povolte originu widgetu načíst skript i rámec:

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

Přidejte je ke zdrojům, které web už povoluje, místo abyste je nahradili. Skript nastavuje velikost rámce přes DOM, ne inline atributy style v markupu, takže základní kód pro vložení nevyžaduje žádnou změnu style-src. Kód pro vložení, který drží místo widgetu, má atribut style, který politika bez 'unsafe-inline' pro styly zablokuje: widget pak funguje dál, jen před objevením nedrží žádné místo. Chcete-li ho při takové politice držet, atribut style vynechte a stejná pravidla dejte do vlastního CSS:

[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;
}

Pravidlo z vašeho CSS může prohrát s konkrétnějším pravidlem !important vašeho webu, které míří na stejný <div>, což se atributu style stát nemůže.

Rozvržení a ceny se stahují uvnitř rámce, podle vlastní politiky rámce, takže ani connect-src nevyžaduje žádnou změnu. Pokud vaše politika pro skripty používá nonce nebo strict-dynamic, dejte tagu script nonce, který váš web používá; samotné přidání domény na seznam povolených ho povolit nemusí.

Vypnutí nebo výměnaKopírovat odkaz

• Vypnutí: vypněte Badge v Settings → Website badge. Noví návštěvníci neuvidí nic, protože se rámec smrští; prohlížeč hosta může dál ukazovat kartu, kterou načetl během posledních pěti minut. Když ho znovu zapnete, tentýž kód pro vložení začne znovu fungovat.
• Změna rozvržení: vyberte jiné pod Layout v Settings → Website badge. Každá stránka s tagem ho ukáže při dalším načtení, se stejným kódem pro vložení.
• Překlad: přepněte Translate the badge v Settings → Website badge. Každá stránka s tagem se přizpůsobí při dalším načtení, se stejným kódem pro vložení.
• Výměna: Replace snippet vydá nový klíč pro vložení. Starý klíč bude při dalším požadavku mimo mezipaměť odmítnut na každém webu, který ho má, dokud nevložíte nový kód pro vložení. Prohlížeč může dál ukazovat kartu uloženou v mezipaměti během posledních pěti minut.

Zapnout nebo vypnout widget, změnit jeho rozvržení nebo jazyk a vyměnit kód pro vložení mohou jen správci účtu.

VýkonKopírovat odkaz

Skript se načítá s async, takže stránku nikdy nezdrží. Rámec se načítá se stránkou, protože právě rámec se StayParity ptá na rozvržení; u panelu se načte jednou tam, kde je tag, a jakmile zná noc, ještě jednou v rohu. Dokud noc nezná, na ceny se neptá. Potom se ptá znovu, jen když se host ustálí na jiné noci.