Pre vývojárov

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 3 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 neho widget. Elementy pridané neskôr (SPA, editor webu) sa zachytia tiež.

2. Tri režimy zobrazenia

`data-mode="inline"`	Widget je súčasťou stránky. Najlepšie pre podstránku „Rezervácia“.
`data-mode="popup"`	Otvorí sa v okne po kliknutí. Vlastné tlačidlo pripojíte cez `data-trigger=".moje-tlacidlo"`; bez neho vykreslíme vlastné.
`data-mode="badge"`	Plávajúce tlačidlo v rohu obrazovky, na každej podstránke.

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

`service`	slug služby, ktorá sa predvyberie
`staff`	slug pracovníka („nezáleží“ je predvoľba)
`date`	deň, na ktorý sa má otvoriť kalendár (2026-08-14)
`checkin / checkout`	rozsah pobytu pri ubytovaní
`guests`	počet hostí
`promo`	zľavový kód
`lang`	jazyk rozhrania (sk, cs, en)
`currency`	mena
`ref`	vlastné označenie zdroja — uloží sa k rezervácii

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="pagi"
     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.

`callania.service_selected`	`{ service, price }`
`callania.time_selected`	`{ startAt, service }`
`callania.booking_started`	`{ service \| room, nights }`
`callania.booking_completed`	`{ code, value, currency }`

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