Ako začať

Widget na web

Klient si vyberie službu, deň a čas priamo na vašom webe a rezerváciu dokončí v Reservuj. Nastavenie zaberie pár minút a programátora nepotrebujete.

Otvoriť nastavenie widgetu Kód na vloženie

Ako widget funguje

Widget je malý výber termínu z Reservuj vložený do vášho webu. Klient v ňom vyberie pobočku (ak ich máte viac), službu, deň a voľný čas na 28 dní dopredu. Kliknutím na čas sa otvorí nové okno Reservuj, kde sa prihlási alebo zaregistruje a rezerváciu potvrdí. Widget sám nič nezapisuje a nepoužíva cookies.

Čo potrebujete

  • Podnik prijíma rezervácie: je spustený a má potvrdený e-mail.
  • Aspoň jednu službu v cenníku a otváraciu dobu, aby bolo čo ponúknuť.
  • Web na https, do ktorého ide vložiť kus HTML kódu.

1. Zapnite widget

V administrácii otvorte Klienti → Widget na web a zaškrtnite Zapnout widget na web. Widget si zapína firma sama. Kým ho nezapnete, žiadny web ho nezobrazí.

2. Povoľte adresu svojho webu

Do poľa Povolené weby (jeden na riadok) napíšte adresu webu, kam widget vložíte — len adresu, bez cesty. Ak web beží s www aj bez neho, zadajte obe varianty. Povoliť ide najviac 10 adries, len s https; port je povolený. Potom kliknite na Uložit.

https://www.vas-salon.cz
https://vas-salon.cz

Widget sa vykreslí len na povolených adresách. Inak by ho ktokoľvek mohol vložiť k sebe a vydávať sa za vás.

3. Vložte kód na web

Pod nastavením je Kód k vložení. Vyberte variantu (tlačidlo s oknom alebo formulár priamo na stránke), text a farbu tlačidla a kliknite na Kopírovat. Kód vložte tam, kde má tlačidlo alebo formulár byť. Vzhľad sa neukladá, je len v kóde: po zmene kód vložte znova. Náhľad pod kódom ukazuje, čo uvidí klient.

Vlastný web (HTML)

Tlačidlo, ktoré otvorí okno s výberom termínu. Vložte oba riadky tam, kde má tlačidlo byť; skript stačí na stránke raz, aj keď vložíte viac widgetov.

<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="button" data-label="Rezervovat" data-color="#0e7c8c"></div>

Formulár priamo v stránke; jeho výška sa prispôsobí obsahu.

<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="inline" data-label="Rezervovat" data-color="#0e7c8c"></div>

WordPress

V editore stránky pridajte blok Vlastné HTML (Custom HTML) a vložte doň kód. Keď WordPress skript po uložení odstráni (účet bez oprávnenia vkladať neobmedzené HTML alebo tarif, ktorý skripty nepovoľuje), použite variantu bez skriptu alebo len odkaz.

Webnode, Wix a iné stavebnice

Stavebnice mávajú prvok na vloženie HTML kódu (Vložiť kód, HTML, Embed). Niektoré ho vkladajú do vlastného rámčeka na svojej adrese: okno tlačidla sa potom otvorí len vnútri rámčeka, a ak adresa rámčeka nie je medzi povolenými webmi, ukáže sa namiesto výberu len odkaz na objednávku. V takej stavebnici zvoľte formulár priamo na stránke a rámček nastavte aspoň na 700 px výšky, alebo dajte na tlačidlo stavebnice odkaz z varianty len odkaz.

Bez skriptu a len odkaz

Keď web cudzí skript nepustí, použite variantu bez skriptu (čistý iframe). Má pevnú výšku 700 px a neprispôsobí sa obsahu.

<iframe src="https://reservuj.cz/sk/company/vas-podnik/widget" title="Rezervovat" style="width:100%;height:700px;border:0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"></iframe>

Keď web nepustí ani iframe, len odkaz vedie rovno na objednávku u vašej firmy.

<a href="https://reservuj.cz/sk/company/vas-podnik/rezervovat?utm_source=web&amp;utm_medium=booking_link&amp;utm_campaign=vas-podnik" target="_blank" rel="noopener">Rezervovat</a>

Prispôsobenie

Widget sa nastavuje atribútmi prvku div z kódu na vloženie. Iné atribúty verzia 1 nepozná.

Atribút Význam
data-reservuj-widget Adresa vašej firmy v Reservuj, ako v odkaze /company/vas-podnik. Povinný; len malé písmená bez diakritiky, číslice a pomlčky.
data-variant button = tlačidlo, ktoré otvorí okno (predvolené); inline = formulár priamo v stránke.
data-label Text tlačidla, predvolený Rezervovat. Čítačky obrazovky ho prečítajú aj ako názov okna.
data-color Farba tlačidla ako #rgb alebo #rrggbb, predvolená #0e7c8c. Iný zápis sa nepoužije. Vzhľad výberu vnútri okna neovplyvní.
  • Parametre kampane utm_source, utm_medium, utm_campaign, utm_content a utm_term z adresy vašej stránky widget odovzdá ďalej až do okna, kde klient rezerváciu dokončí.
  • Keď stránka vloží prvok až neskôr (napríklad po kliknutí), zavolajte: window.ReservujWidget && window.ReservujWidget.scan();
  • Pri otvorení okna alebo vykreslení formulára vyvolá prvok udalosť reservuj:open (v detail.slug je adresa firmy) — hodí sa na vlastné meranie.
document.addEventListener('reservuj:open', (event) => {
  console.log('Reservuj widget', event.detail.slug);
});

Čo uvidí klient

  1. Tlačidlo s vaším textom a farbou. Po kliknutí sa otvorí okno s výberom, na mobile cez celú obrazovku; zatvorí sa krížikom, klávesom Esc alebo kliknutím vedľa.
  2. Postupne vyberie pobočku (len ak ich máte viac), službu, deň a čas. Ceny vo widgete sú základné, konečnú cenu klient uvidí a potvrdí pri dokončení.
  3. Kliknutím na čas sa otvorí nové okno Reservuj. Kto nie je prihlásený, uvidí Máte vybraný termín a po prihlásení alebo registrácii rezerváciu dokončí. Výber platí 30 minút, potom si klient čas vyberie znova.

Časté problémy

Namiesto výberu termínu je len tlačidlo, ktoré otvorí objednávku v novom okne

Widget sa do pár sekúnd neohlásil a kód ukázal náhradný odkaz. Najčastejšie adresa stránky nie je medzi povolenými webmi: skontrolujte https, variant s www aj bez neho a preklepy. V konzole prehliadača je potom chyba frame-ancestors. Rovnako sa widget správa, keď je vypnutý alebo podnik neprijíma rezervácie (pozri nižšie).

Na webe sa neukáže nič

Web alebo stavebnica kód pri uložení odstránili, alebo skript blokujú pravidlá zabezpečenia obsahu (CSP) vášho webu. Ak web posiela hlavičku Content-Security-Policy, doplňte do svojich pravidiel adresu portálu:

Content-Security-Policy: script-src 'self' https://reservuj.cz; frame-src https://reservuj.cz

Pre variant bez skriptu stačí frame-src. Keď CSP upraviť nejde, použite len odkaz.

Widget hlási, že online rezervácia tu teraz nie je dostupná

Podnik teraz rezervácie cez widget neprijíma: widget je vypnutý, e-mail podniku nie je potvrdený, podnik nie je spustený alebo je pozastavený. Na vašom webe sa potom namiesto výberu ukáže odkaz na objednávku; hlášku uvidíte, keď widget otvoríte samostatne. Čo chýba, napíše administrácia na stránke Widget na web.

Žiadna služba alebo žiadny voľný termín

Online teraz nejde objednať žiadnu službu: v cenníku nie je platná služba pre základnú kategóriu klientov. V najbližších týždňoch tu nie je voľný termín: skontrolujte otváraciu dobu, zmeny pracovníkov a ako dlho dopredu sa služba objednáva.

Teraz je tu priveľa dotazov naraz

Widget brzdí viac než 60 dotazov za minútu z jednej IP adresy (napríklad z jednej kancelárie). Za minútu to prejde samo.

Ako začať · API pre vývojárov