Vložení rezervačního widgetu

Jeden skript, tři režimy zobrazení a fallback pro weby, kam se skript vložit nedá. Widget má pod 4 kB gzip a nemá žádné závislosti.

1. Základní vložení

Skript vložte kamkoliv na stránku, ideálně s atributem defer.

<script src="https://cdn.callania.eu/w.js" defer></script>
<div data-callania="vas-slug" data-mode="inline"></div>

Skript najde každý element s atributem data-callania a vykreslí do něj widget. Elementy přidané později (SPA, editor webu) se zachytí také.

2. Tři režimy zobrazení

<!-- vlastní tlačítko otevře okno -->
<button class="moje-tlacitko">Objednat se</button>
<div data-callania="vas-slug" data-mode="popup" data-trigger=".moje-tlacitko"></div>

<!-- plovoucí tlačítko -->
<div data-callania="vas-slug" data-mode="badge" data-label="Rezervovat"></div>

3. Deep linky

Widget i hostovaná stránka rozumějí stejným parametrům. Fungují i bez JavaScriptu — vyhodnotí se na serveru při vykreslení.

Parametry se dají zadat i jako atributy na elementu — ty mají přednost před adresou stránky:

<div data-callania="vas-slug"
     data-mode="inline"
     data-service="strih-brada"
     data-staff="george"
     data-lang="cs"></div>

4. Události pro váš web

Widget posílá hostitelské stránce jmenné události přes postMessage. To je spolehlivější než vkládat cizí kód do potvrzovací stránky.

window.addEventListener('message', (e) => {
  if (e.data?.source !== 'callania') return;

  switch (e.data.event) {
    case 'callania.service_selected':   // vybral službu
    case 'callania.time_selected':      // vybral termín
    case 'callania.booking_started':    // vyplňuje údaje
    case 'callania.booking_completed':  // hotovo → pixel
      dataLayer.push({ event: e.data.event, ...e.data.payload });
  }
});

Pokud na stránce existuje window.dataLayer, widget do něj události přidá sám. Zároveň je vystřelí jako CustomEvent na window.

5. Fallback bez skriptu

Wix, starší WordPress nebo redakční systémy někdy skript vložit nedovolí. Tehdy funguje čistý iframe — s loading="lazy" a pevnou výškou, aby nevznikl skok rozložení.

<iframe src="https://vas-slug.callania.eu/?embed=1"
        width="100%" height="760" loading="lazy"
        title="Rezervace termínu" style="border:0"></iframe>

A pro QR kód nebo odkaz v biu stačí obyčejný odkaz:

https://vas-slug.callania.eu/?service=strih-brada&ref=instagram-bio

6. Výška widgetu

Widget hlásí rodičovské stránce svou výšku zprávou { source: "callania", event: "resize", payload: { height } }. Loader ji zpracuje sám, takže se o dorovnání starat nemusíte. U čistého iframe si výšku nastavte pevně nebo si zprávu odchyťte sami.

7. Zdroj návštěvy

Zdroj se nepřenáší cookie — v iframe by byla třetistranová a Safari i blokovače by ji zahodily. Loader proto vezme utm_*, gclid, fbclid, msclkid a ref z adresy vaší stránky a připojí je k adrese widgetu. Server je uloží jako prvostranový údaj s platností 30 dní.

Partnerské odkazy se připisují modelem prvního kliku, reklama a kampaně modelem posledního nepřímého kliku v okně 30 dní. Vlastní reklama tak partnerovi rezervaci nepřevezme.

8. Všechny atributy widgetu

Povinný je jediný — data-callania. Zbytek má rozumnou výchozí hodnotu.

9. iCal feed pro portály

Každá ubytovací jednotka má vlastní iCal feed s obsazeností. Adresu najdete v administraci v sekci Portály a iCal; obsahuje podepsaný token, takže se dá vložit přímo do Booking.com nebo Airbnb.

https://vas-slug.callania.eu/ical/<token>.ics

Feed se přepočítá hned po změně rezervace, ne až při dotazu portálu — díky tomu umí odpovědět 304 Not Modified na nezměněný obsah a portál nestahuje zbytečně. Opačným směrem tahá naše strana feedy portálů každou minutu, podmíněně přes If-None-Match.

Token v adrese je jediné, co feed chrání, takže s ním zacházejte jako s heslem. Když se dostane ven, dá se v administraci vyměnit — portál si pak feed přidá znovu.

10. Souhlas s měřením zdroje — data-consent

Na vašem webu jste správcem vy, ne my. Souhlas s měřením zdroje návštěvy si proto vybíráte vy — svou cookie lištou, svým textem. My se na něj jen ptáme.

<div data-callania="vas-slug" data-consent="granted"></div>

Bez souhlasu se zdroj nepřenáší vůbec — nejenže se neuloží, ale ani se nepošle do adresy. Poslat ho a spolehnout se, že ho druhá strana zahodí, znamená mít ho v access logu.

Atribut se dá měnit za běhu. Když návštěvník změní volbu ve vaší liště, přepište data-consent a widget vložte znovu — jednodušší je stránku obnovit.

Rezervace funguje stejně v obou případech. Bez souhlasu jen neuvidíte, odkud zákazník přišel; termín, potvrzení ani připomínka se nemění.

Naše cookie lišta se na vašem webu ani na vaší hostované stránce nezobrazuje. Mluvila by za vás a ptala by se v nesprávném jménu.

11. Obsah v shadow DOM

Widget běží ve vlastním <callania-widget> se shadow DOM. Vaše CSS na něj nedosáhne a naše CSS nerozbije vaši stránku — ani když máte globální pravidla pro iframe nebo button.