Widgety rezerwacji

Tworzenie i osadzanie widgetów rezerwacji z kreatora workspace — konfiguracja, podgląd i rozwiązywanie problemów.

Widgety rezerwacji pozwalają klientom rezerwować usługi na Twojej stronie bez odwiedzania pełnego portalu klienta.

Każdy workspace ServEase ma własny Kreator widgetów:

{workspace-id}.widgets.servease.io

Zastąp {workspace-id} identyfikatorem najemcy. Zaloguj się danymi administratora, a następnie twórz i konfiguruj tyle widgetów, ile potrzebujesz — każdy z własnym kodem osadzenia.

Ustawienia → Widget portalu klienta w panelu admina odzwierciedla tę samą konfigurację do podglądu i zapisu. Na co dzień przy osadzeniach na stronie większość zespołów używa samodzielnego kreatora pod {workspace-id}.widgets.servease.io. Zobacz Widget portalu klienta.

Tworząc lub edytując widget, wybierz typ w sekcji Widget:

Typ	Najlepsze do
Calendar	Siatka miesiąca, tygodnia lub dwutygodnia — przegląd dostępności w czasie
Timetable	Kolumny dziennego harmonogramu — widok slot po slocie
List	Przewijana lista lub siatka usług lub slotów do rezerwacji
Map	Widok oparty na lokalizacji — przydatny przy dystansie i geografii

Każdy typ ma własne opcje (domyślny widok, format czasu, układ, ustawienia mapy itd.) opisane poniżej.

Pięć sekcji konfiguracji

Pasek boczny kreatora widgetów ma pięć głównych sekcji. Zmiany dotyczą edytowanego widgetu; twórz wiele widgetów dla różnych stron lub odbiorców.

Settings

Language — domyślna lokalizacja dla odwiedzających (np. angielski, polski, niemiecki).
API base URL — rozwiązywany dla środowiska najemcy (tylko do odczytu).
Preview data source — Live data (rzeczywiste usługi i sloty) lub Demo data, gdy katalog jest pusty lub chcesz bezpieczny podgląd bez wystarczającej liczby opublikowanych usług.

Rdzeń zachowania i przepływu rezerwacji:

Widget type — Calendar, Timetable, List lub Map (patrz wyżej).
Enable service overview pages — pozwala klientom otworzyć stylizowany przegląd usługi przed rezerwacją (zobacz Strony przeglądu usługi).
Overview template — gdy przegląd jest włączony, wybierz styl układu (Professional, Luxury, Simple, Friendly, Minimal, Bold, Nature, Retro itd.).

Opcje specyficzne dla typu (gdy dotyczy):

Typ	Przykłady
Calendar	Domyślny widok (tydzień / dwutygodnie / miesiąc), prezentacja usług vs slotów czasowych, tydzień od poniedziałku lub niedzieli, format czasu (12h / 24h), kolumny slotów (godzina startu, nazwa, opcja, zespół, pracownicy, cena, lokalizacja — tekst lub ikony)
Timetable	Format czasu, podświetlanie dostępnych slotów
List	Układ: siatka lub lista
Map	Opcjonalny klucz Google Maps API, jednostka dystansu (km / mi)

Filters

Predefiniuj, co pokazuje widget, aby odwiedzający widzieli skupiony katalog zamiast wszystkiego naraz:

Services, teams, search term
Start / end date (z presetami np. dziś, następny tydzień, następny miesiąc)
Min / max price, distance (w widgetach mapy)

Używaj filtrów przy osadzeniu na stronie kampanii („Rezerwuj tylko jogę”) lub witrynie pod konkretną lokalizację.

Display

Pokaż lub ukryj elementy UI wokół doświadczenia rezerwacji:

Przełącznik	Efekt
Filters bar	Widoczne dla odwiedzających predefiniowane filtry
Search / date / price / distance	Poszczególne kontrolki filtrów (gdy pasek filtrów jest włączony)
Calendar view switcher	Tylko typ Calendar — kontrolki tydzień / miesiąc
List layout switcher	Tylko typ List — przełącznik siatka vs lista
Widget top bar	Nagłówek wewnątrz ramki widgetu
Outer frame	Obramowanie wokół widgetu

Theme

Wygląd niezależny od Klucza motywu frontendu portalu klienta:

Colour presets — wbudowane palety (domyślny jasny, ciemny, ocean, forest i inne).
Custom colours — primary, secondary, powierzchnie, obramowania i powiązane tokeny.
Typography — rodzina czcionek i rozmiar (small / medium / large).
Layout — promień zaokrąglenia, gęstość odstępów, margines zewnętrzny.

Podgląd przed osadzeniem

Na większych ekranach użyj panelu podglądu, aby sprawdzić widget przed publikacją:

Desktop — pełna szerokość
Tablet — szerokość tabletu
Mobile — szerokość telefonu

Odśwież lub otwórz w nowej karcie, aby testować na danych live lub demo. Potwierdź filtry, kolumny slotów i motyw na małych ekranach — większość ruchu z osadzeń to mobile.

Osadzenie na stronie

Gdy konfiguracja jest gotowa, kliknij zielony przycisk Embed.

Dialog Copy into your site zawiera:

Fragment iframe (data-servease-widget="true") wskazujący na URL widgetu.
Skrypt embed-loader.js — zmienia rozmiar iframe i obsługuje viewport modala na stronie hosta.

Wklej oba — iframe i skrypt loadera — tam, gdzie ma się pojawić widget. Użyj Copy embed code, aby skopiować pełny fragment.

Link Troubleshooting otwiera typowe poprawki (podsumowane także poniżej).

Rozwiązywanie problemów z osadzeniem

Szybkie kontrole

Potwierdź, że iframe ma data-servease-widget="true".
Potwierdź, że embed-loader.js się ładuje (widać w zakładce Network przeglądarki).
Potwierdź w konsoli przeglądarki, że istnieje window.ServeaseEmbedLoader.
Po poprawkach po stronie hosta wklej najnowszy fragment z kreatora widgetów.

Najważniejsza zasada

Nie polegaj na tagach script wewnątrz dangerouslySetInnerHTML. Traktuj iframe widgetu jako prawdziwy komponent w React, Next.js lub CMS — nie jako sam surowy HTML.

Typowe problemy

Problem	Co spróbować
Widget jest ucięty	Brak dolnej części przy pierwszym ładowaniu lub na mobile — użyj najnowszego fragmentu loadera; potwierdź działanie `embed-loader.js`; w React/Next renderuj prawdziwy `<iframe />`, nie wstrzyknięty HTML
Odświeżenie naprawia	Źle przy pierwszej wizycie, poprawnie po przeładowaniu — loader pominięty przy nawigacji po stronie klienta; załaduj `embed-loader.js` programowo przy mount
Loader nie działa	Brak skryptu lub `ServeaseEmbedLoader` undefined — zastąp świeżym fragmentem; upewnij się, że strona hosta nie usuwa tagów script
Modal ukryty pod chrome strony	Modal rezerwacji pod sticky header — zachowaj aktualny loader dla komunikatów viewport; dodaj pionową przestrzeń wokół iframe
React / Next / CMS	Niespójnie w blokach HTML — wyciągnij `src` iframe, renderuj `<iframe />` w JSX, załaduj loader przez `document.createElement('script')`, wywołaj `ServeaseEmbedLoader.refresh()` przy mount

Widgety wymagają opublikowanych usług z poprawnymi harmonogramami. Pusty widget zwykle oznacza brak slotów do rezerwacji, filtry wykluczające wszystko lub tryb demo przy usługach w szkicu.

Strony przeglądu usługi

Strony przeglądu usługi to opcjonalne landing page pojedynczej usługi na hoście widgetów — przydatne w marketingu, postach społecznościowych i linkach „zarezerwuj ten zabieg”.

Włącz je w sekcji Widget kreatora (Enable service overview + domyślny szablon). Klienci mogą otworzyć Overview z modala rezerwacji lub wygenerować linki z Service detail → Generate page.

Każda aktywna strona przeglądu zawiera Link share — odwiedzający kopiują krótki link (https://{workspace-id}.api.servease.io/o/{code}), który przekierowuje na pełną stronę na {workspace-id}.widgets.servease.io.

Zobacz Strony przeglądu usługi — szablony, Generate page, udostępnianie linku i struktura krótkich linków.