Vloženie rezervačného widgetu

Jeden skript, tri režimy zobrazenia a fallback pre weby, kde sa skript vložiť nedá. Widget má pod 4 kB gzip a nemá žiadne závislosti.

1. Základné vloženie

Skript vložte kdekoľvek na stránku, ideálne s atribútom defer.

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

Skript nájde každý element s atribútom data-callania a vykreslí doň widget. Elementy pridané neskôr (SPA, editor webu) sa zachytia tiež.

2. Tri režimy zobrazenia

<!-- vlastné tlačidlo otvorí okno -->
<button class="moje-tlacidlo">Objednať sa</button>
<div data-callania="vas-slug" data-mode="popup" data-trigger=".moje-tlacidlo"></div>

<!-- plávajúce tlačidlo -->
<div data-callania="vas-slug" data-mode="badge" data-label="Rezervovať"></div>

3. Deep linky

Widget aj hosťovaná stránka rozumejú rovnakým parametrom. Fungujú aj bez JavaScriptu — vyhodnotia sa na serveri pri vykreslení.

Parametre sa dajú zadať aj ako atribúty na elemente — tie majú prednosť pred adresou stránky:

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

4. Udalosti pre váš web

Widget posiela hostiteľskej stránke menné udalosti cez postMessage. To je spoľahlivejšie než vkladať cudzí kód do potvrdzovacej 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':    // vypĺňa údaje
    case 'callania.booking_completed':  // hotovo → pixel
      dataLayer.push({ event: e.data.event, ...e.data.payload });
  }
});

Ak na stránke existuje window.dataLayer, widget doň udalosti pridá sám. Zároveň ich vystrelí ako CustomEvent na window.

5. Fallback bez skriptu

Wix, starší WordPress alebo redakčné systémy niekedy skript vložiť nedovolia. Vtedy funguje čistý iframe — s loading="lazy" a pevnou výškou, aby nevznikol skok rozloženia.

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

A pre QR kód alebo odkaz v bio stačí obyčajný odkaz:

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

6. Výška widgetu

Widget hlási rodičovskej stránke svoju výšku správou { source: "callania", event: "resize", payload: { height } }. Loader ju spracuje sám, takže sa o dorovnanie starať nemusíte. Pri čistom iframe si výšku nastavte pevne alebo si správu odchyťte sami.

7. Zdroj návštevy

Zdroj sa neprenáša cookie — v iframe by bola treťostranová a Safari aj blokovače by ju zahodili. Loader preto vezme utm_*, gclid, fbclid, msclkid a ref z adresy vašej stránky a pripojí ich k adrese widgetu. Server ich uloží ako prvostranový údaj s platnosťou 30 dní.

Partnerské odkazy sa pripisujú modelom prvého kliku, reklama a kampane modelom posledného nepriameho kliku v okne 30 dní. Vlastná reklama tak partnerovi rezerváciu neprevezme.

8. Všetky atribúty widgetu

Povinný je jediný — data-callania. Zvyšok má rozumnú predvolenú hodnotu.

9. iCal feed pre portály

Každá jednotka ubytovania má vlastný iCal feed s obsadenosťou. Adresu nájdete v administrácii v sekcii Portály a iCal; obsahuje podpísaný token, takže sa dá vložiť priamo do Booking.com alebo Airbnb.

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

Feed sa prepočíta hneď po zmene rezervácie, nie až pri dopyte portálu — vďaka tomu vie odpovedať 304 Not Modified na nezmenený obsah a portál nesťahuje zbytočne. Opačným smerom ťaháme feedy portálov každú minútu, podmienene cez If-None-Match.

Token v adrese je jediné, čo feed chráni, takže s ním zaobchádzajte ako s heslom. Keď sa dostane von, dá sa v administrácii vymeniť — portál si potom feed pridá znova.

10. Súhlas s meraním zdroja — data-consent

Na vašom webe ste prevádzkovateľom vy, nie my. Súhlas s meraním zdroja návštevy si preto vyberáte vy — svojou cookie lištou, svojím textom. My sa naň len pýtame.

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

Bez súhlasu sa zdroj neprenáša vôbec — nielenže sa neuloží, ale ani sa nepošle do adresy. Poslať ho a spoľahnúť sa, že ho druhá strana zahodí, znamená mať ho v access logu.

Atribút sa dá meniť za behu. Keď návštevník zmení voľbu vo vašej lište, prepíšte data-consent a widget vložte znova — jednoduchšie je stránku obnoviť.

Rezervácia funguje rovnako v oboch prípadoch. Bez súhlasu len nebudete vidieť, odkiaľ zákazník prišiel; termín, potvrdenie ani pripomienka sa nemenia.

Naša cookie lišta sa na vašom webe ani na vašej hosťovanej stránke nezobrazuje. Hovorila by za vás a pýtala by sa v nesprávnom mene.

11. Obsah v shadow DOM

Widget beží vo vlastnom <callania-widget> s shadow DOM. Vaše CSS naň nedosiahne a naše CSS nerozbije vašu stránku — ani keď máte globálne pravidlá pre iframe alebo button.