Rezervační widgety
Vytváření a vkládání rezervačních widgetů z tvůrce widgetů pracovního prostoru — konfigurace, náhled a řešení problémů.
Rezervační widgety umožňují zákazníkům rezervovat služby na vašem webu bez návštěvy plného zákaznického portálu.
Každý pracovní prostor ServEase má vlastního Tvůrce widgetů:
{workspace-id}.widgets.servease.io
Nahraďte {workspace-id} identifikátorem tenanta. Přihlaste se administračními přihlašovacími údaji a vytvořte a nakonfigurujte tolik widgetů, kolik potřebujete — každý s vlastním kódem pro vložení.
Nastavení → Widget zákaznického portálu v administračním panelu zrcadlí stejnou konfiguraci pro náhled a ukládání. Pro každodenní vložení na web většina týmů používá samostatného tvůrce widgetů na {workspace-id}.widgets.servease.io. Viz Widget zákaznického portálu.
Typy widgetů
Při vytváření nebo úpravě widgetu zvolte typ v sekci Widget:
| Typ | Vhodné pro |
|---|---|
| Calendar | Měsíční, týdenní nebo čtrnáctidenní mřížku — prohlížení dostupnosti v čase |
| Timetable | Sloupce denního rozvrhu — zobrazení slot po slotu |
| List | Posuvný seznam nebo mřížku rezervovatelných služeb nebo slotů |
| Map | Zobrazení podle polohy — užitečné, když záleží na vzdálenosti a geografii |
Každý typ má vlastní volby (výchozí zobrazení, formát času, rozložení, nastavení mapy atd.) popsané níže.
Pět konfiguračních sekcí
Postranní panel tvůrce widgetů má pět hlavních sekcí. Změny platí pro widget, který právě upravujete; pro různé stránky nebo cílové skupiny vytvořte více widgetů.
Settings
- Language — výchozí jazyk pro návštěvníky (např. angličtina, polština, němčina).
- API base URL — vyřešeno pro prostředí vašeho tenanta (jen ke čtení).
- Preview data source — Live data (skutečné služby a sloty) nebo Demo data, když je katalog ještě prázdný nebo chcete bezpečný náhled bez dostatečného počtu publikovaných služeb.
Widget
Základní chování a tok rezervace:
- Widget type — Calendar, Timetable, List nebo Map (viz výše).
- Enable service overview pages — zákazníci mohou před rezervací otevřít stylovaný přehled služby (viz Stránky přehledu služby).
- Overview template — při zapnutém přehledu zvolte styl rozložení (Professional, Luxury, Simple, Friendly, Minimal, Bold, Nature, Retro atd.).
Volby podle typu (když jsou relevantní):
| Typ | Příklady |
|---|---|
| Calendar | Výchozí zobrazení (týden / čtrnáctidní / měsíc), prezentace služeb vs časových slotů, týden začíná pondělím nebo nedělí, formát času (12h / 24h), sloupce slotů (čas začátku, název, varianta, tým, zaměstnanci, cena, provozovna — text nebo ikony) |
| Timetable | Formát času, zvýraznění volných slotů |
| List | Rozložení: mřížka nebo seznam |
| Map | Volitelný klíč Google Maps API, jednotka vzdálenosti (km / mi) |
Filters
Předdefinujte, co widget zobrazí, aby návštěvníci viděli zaměřený katalog místo všeho najednou:
- Services, teams, search term
- Start / end date (s předvolbami jako dnes, příští týden, příští měsíc)
- Min / max price, distance (u widgetů s mapou)
Filtry použijte při vložení widgetu na landing page kampaně („Rezervujte jen jógu“) nebo na web zaměřený na konkrétní provozovnu.
Display
Zobrazte nebo skryjte UI prvky kolem rezervačního zážitku:
| Přepínač | Efekt |
|---|---|
| Filters bar | Předdefinované ovládací prvky filtrů viditelné návštěvníkům |
| Search / date / price / distance | Jednotlivé ovládací prvky filtrů (když je zapnutá lišta filtrů) |
| Calendar view switcher | Jen typ Calendar — ovládání týden / měsíc |
| List layout switcher | Jen typ List — přepínač mřížka vs seznam |
| Widget top bar | Hlavička uvnitř rámečku widgetu |
| Outer frame | Okraj/rámeček kolem widgetu |
Theme
Vizuální design nezávislý na Klíči motivu frontendu zákaznického portálu:
- Colour presets — vestavěné palety (výchozí světlá, tmavá, ocean, forest a další).
- Custom colours — primární, sekundární, plochy, okraje a související tokeny.
- Typography — rodina písma a velikost (small / medium / large).
- Layout — poloměr rohů, hustota mezer, vnější okraj.
Náhled před vložením
Na větších obrazovkách použijte náhledový panel a zkontrolujte widget před publikováním:
- Desktop — plná šířka
- Tablet — omezená šířka tabletu
- Mobile — šířka telefonu
Obnovte nebo otevřete v nové záložce a otestujte proti live nebo demo datům. Ověřte filtry, sloupce slotů a motiv na malých obrazovkách — většina provozu z vložení je mobilní.
Vložení na web
Až je konfigurace připravená, klikněte na zelené tlačítko Embed.
Dialog Copy into your site poskytuje:
- Úryvek iframe (
data-servease-widget="true") ukazující na URL widgetu. - Skript
embed-loader.js— mění velikost iframe a řeší viewport modálního okna na hostitelské stránce.
Vložte oba — iframe i loader skript — tam, kde má widget být. Použijte Copy embed code pro zkopírování celého úryvku.
Odkaz Troubleshooting otevře běžná řešení (shrnutá i níže).
Řešení problémů s vložením
Rychlé kontroly
- Ověřte, že iframe má
data-servease-widget="true". - Ověřte, že se načítá
embed-loader.js(viditelné v záložce Network prohlížeče). - Ověřte v konzoli prohlížeče existenci
window.ServeaseEmbedLoader. - Po opravách na hostitelské straně vložte nejnovější úryvek z tvůrce widgetů.
Nejdůležitější pravidlo
Nespoléhejte na tagy script uvnitř dangerouslySetInnerHTML. Widget iframe chápejte jako skutečnou komponentu v Reactu, Next.js nebo vašem CMS — ne jako samotné surové HTML.
Běžné problémy
| Problém | Co zkusit |
|---|---|
| Widget je useknutý | Chybí spodní část při prvním načtení nebo na mobilu — použijte nejnovější úryvek loaderu; ověřte běh embed-loader.js; v React/Next vykreslete skutečný <iframe />, ne vložené HTML |
| Obnovení to opraví | Špatně při první návštěvě, správně po reloadu — loader se přeskočil při klientské navigaci; načtěte embed-loader.js programově při mountu |
| Loader neběží | Chybí skript nebo ServeaseEmbedLoader není definován — nahraďte čerstvým úryvkem; zajistěte, že hostitelská stránka neodstraňuje tagy script |
| Modální okno pod chrome stránky | Rezervační modál pod sticky hlavičkou — ponechte aktuální loader pro zprávy viewportu; přidejte svislý prostor kolem iframe |
| React / Next / CMS | Nekonzistentní v HTML blocích — extrahujte src iframe, vykreslete <iframe /> v JSX, načtěte loader přes document.createElement('script'), při mountu zavolejte ServeaseEmbedLoader.refresh() |
Widgety vyžadují publikované služby s platnými rozvrhy. Prázdný widget obvykle znamená žádné rezervovatelné sloty, filtry vylučující vše, nebo demo režim, zatímco služby jsou stále v konceptu.
Stránky přehledu služby
Stránky přehledu služby jsou volitelné landing page pro jednu službu na hostiteli widgetů — užitečné pro marketingové detaily, příspěvky na sociálních sítích a odkazy „rezervujte tuto proceduru“.
Zapněte je v sekci Widget tvůrce widgetů (Enable service overview + výchozí šablona). Zákazníci mohou z rezervačního modálního okna otevřít Overview, nebo můžete generovat odkazy z Service detail → Generate page.
Každá živá stránka přehledu obsahuje Link share — návštěvníci zkopírují krátký odkaz (https://{workspace-id}.api.servease.io/o/{code}), který přesměruje na plnou stránku na {workspace-id}.widgets.servease.io.
Šablony, Generate page, sdílení odkazu a strukturu krátkých odkazů popisuje Stránky přehledu služby.