Jak začít

Widget na web

Klient si vybere službu, den a čas přímo na vašem webu a rezervaci dokončí v Reservuj. Nastavení zabere pár minut a programátora nepotřebujete.

Otevřít nastavení widgetu Kód k vložení

Jak widget funguje

Widget je malý výběr termínu z Reservuj vložený do vašeho webu. Klient v něm vybere pobočku (máte-li jich víc), službu, den a volný čas na 28 dní dopředu. Kliknutím na čas se otevře nové okno Reservuj, kde se přihlásí nebo zaregistruje a rezervaci potvrdí. Widget sám nic nezapisuje a nepoužívá cookies.

Co potřebujete

  • Podnik přijímá rezervace: je spuštěný a má potvrzený e-mail.
  • Aspoň jednu službu v ceníku a otevírací dobu, aby bylo co nabídnout.
  • Web na https, do kterého jde vložit kus HTML kódu.

1. Zapněte widget

V administraci otevřete Klienti → Widget na web a zaškrtněte Zapnout widget na web. Widget si zapíná firma sama. Dokud ho nezapnete, žádný web ho nezobrazí.

2. Povolte adresu svého webu

Do pole Povolené weby (jeden na řádek) napište adresu webu, kam widget vložíte — jen adresu, bez cesty. Běží-li web s www i bez něj, zadejte obě varianty. Povolit jde nejvýš 10 adres, jen s https; port je povolený. Pak klikněte na Uložit.

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

Widget se vykreslí jen na povolených adresách. Jinak by ho kdokoli mohl vložit k sobě a vydávat se za vás.

3. Vložte kód na web

Pod nastavením je Kód k vložení. Vyberte variantu (Tlačítko s oknem nebo Formulář přímo na stránce), text a barvu tlačítka a klikněte na Kopírovat. Kód vložte tam, kde má tlačítko nebo formulář být. Vzhled se neukládá, je jen v kódu: po změně kód vložte znovu. Náhled pod kódem ukazuje, co uvidí klient.

Vlastní web (HTML)

Tlačítko, které otevře okno s výběrem termínu. Vložte oba řádky tam, kde má tlačítko být; skript stačí na stránce jednou, i když vložíte víc widgetů.

<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ář přímo ve stránce; jeho výška se přizpů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 editoru stránky přidejte blok Vlastní HTML (Custom HTML) a vložte do něj kód. Když WordPress skript po uložení odstraní (účet bez oprávnění vkládat neomezené HTML nebo tarif, který skripty nepovoluje), použijte variantu Bez skriptu nebo Jen odkaz.

Webnode, Wix a jiné stavebnice

Stavebnice mívají prvek pro vložení HTML kódu (Vložit kód, HTML, Embed). Některé ho vkládají do vlastního rámečku na své adrese: okno tlačítka se pak otevře jen uvnitř rámečku, a pokud adresa rámečku není mezi povolenými weby, ukáže se místo výběru jen odkaz do objednávky. V takové stavebnici zvolte Formulář přímo na stránce a rámeček nastavte aspoň na 700 px výšky, nebo dejte na tlačítko stavebnice odkaz z varianty Jen odkaz.

Bez skriptu a jen odkaz

Když web cizí skript nepustí, použijte Bez skriptu (čistý iframe). Má pevnou výšku 700 px a nepřizpůsobí se obsahu.

<iframe src="https://reservuj.cz/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>

Když web nepustí ani iframe, Jen odkaz vede rovnou do objednávky u vaší firmy.

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

Přizpůsobení

Widget se nastavuje atributy prvku div z kódu k vložení. Jiné atributy verze 1 nezná.

Atribut Význam
data-reservuj-widget Adresa vaší firmy v Reservuj, jako v odkazu /company/vas-podnik. Povinný; jen malá písmena bez diakritiky, číslice a pomlčky.
data-variant button = tlačítko, které otevře okno (výchozí); inline = formulář přímo ve stránce.
data-label Text tlačítka, výchozí Rezervovat. Čtečky obrazovky ho přečtou i jako název okna.
data-color Barva tlačítka jako #rgb nebo #rrggbb, výchozí #0e7c8c. Jiný zápis se nepoužije. Vzhled výběru uvnitř okna neovlivní.
  • Parametry kampaně utm_source, utm_medium, utm_campaign, utm_content a utm_term z adresy vaší stránky widget předá dál až do okna, kde klient rezervaci dokončí.
  • Když stránka vloží prvek až později (třeba po kliknutí), zavolejte: window.ReservujWidget && window.ReservujWidget.scan();
  • Při otevření okna nebo vykreslení formuláře vyvolá prvek událost reservuj:open (v detail.slug je adresa firmy) — hodí se pro vlastní měření.
document.addEventListener('reservuj:open', (event) => {
  console.log('Reservuj widget', event.detail.slug);
});

Co uvidí klient

  1. Tlačítko s vaším textem a barvou. Po kliknutí se otevře okno s výběrem, na mobilu přes celou obrazovku; zavře se křížkem, klávesou Esc nebo kliknutím vedle.
  2. Postupně vybere pobočku (jen máte-li jich víc), službu, den a čas. Ceny ve widgetu jsou základní, konečnou cenu klient uvidí a potvrdí při dokončení.
  3. Kliknutím na čas se otevře nové okno Reservuj. Kdo není přihlášený, uvidí Máte vybraný termín a po přihlášení nebo registraci rezervaci dokončí. Výběr platí 30 minut, potom si klient čas vybere znovu.

Časté potíže

Místo výběru termínu je jen tlačítko, které otevře objednávku v novém okně

Widget se do pár sekund neohlásil a kód ukázal náhradní odkaz. Nejčastěji adresa stránky není mezi povolenými weby: zkontrolujte https, variantu s www i bez něj a překlepy. V konzoli prohlížeče je pak chyba frame-ancestors. Stejně se widget chová, když je vypnutý nebo podnik nepřijímá rezervace (viz níže).

Na webu se neukáže nic

Web nebo stavebnice kód při uložení odstranily, nebo skript blokují zásady zabezpečení obsahu (CSP) vašeho webu. Posílá-li web hlavičku Content-Security-Policy, doplňte do svých pravidel adresu portálu:

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

Pro variantu Bez skriptu stačí frame-src. Když CSP upravit nejde, použijte Jen odkaz.

Widget hlásí, že online rezervace tu teď není dostupná

Podnik teď rezervace přes widget nepřijímá: widget je vypnutý, e-mail podniku není potvrzený, podnik není spuštěný nebo je pozastavený. Na vašem webu se pak místo výběru ukáže odkaz do objednávky; hlášku uvidíte, když widget otevřete samostatně. Co chybí, napíše administrace na stránce Widget na web.

Žádná služba nebo žádný volný termín

Online teď nejde objednat žádná služba: v ceníku není platná služba pro základní kategorii klientů. V nejbližších týdnech tu není volný termín: zkontrolujte otevírací dobu, směny pracovníků a jak dlouho dopředu se služba objednává.

Teď je tu moc dotazů najednou

Widget brzdí víc než 60 dotazů za minutu z jedné IP adresy (třeba z jedné kanceláře). Za minutu to projde samo.

Jak začít · API pro vývojáře