Jak działa widżet
Widżet to mały wybór terminu z Reservuj wstawiony na Twoją stronę. Klient wybiera w nim oddział (jeśli masz ich więcej), usługę, dzień i wolną godzinę na 28 dni do przodu. Kliknięcie godziny otwiera nowe okno Reservuj, w którym loguje się lub rejestruje i potwierdza rezerwację. Sam widżet niczego nie zapisuje i nie używa plików cookie.
Czego potrzebujesz
- Firma przyjmuje rezerwacje: jest uruchomiona i ma potwierdzony e-mail.
- Co najmniej jedną usługę w cenniku i godziny otwarcia, żeby było co zaoferować.
- Stronę na https, na którą da się wstawić fragment kodu HTML.
1. Włącz widżet
W panelu administracyjnym otwórz Klienti → Widget na web i zaznacz Zapnout widget na web (włącz widżet). Widżet włącza firma sama. Dopóki go nie włączysz, żadna strona go nie wyświetli.
2. Zezwól na adres swojej strony
W polu Povolené weby (dozwolone strony, jedna w wierszu) wpisz adres strony, na którą wstawisz widżet — tylko adres, bez ścieżki. Jeśli strona działa z www i bez niego, wpisz oba warianty. Można zezwolić najwyżej na 10 adresów, tylko z https; port jest dozwolony. Potem kliknij Uložit (zapisz).
https://www.vas-salon.cz
https://vas-salon.czWidżet wyświetla się tylko na dozwolonych adresach. W przeciwnym razie każdy mógłby wstawić go u siebie i podszywać się pod Ciebie.
3. Wstaw kod na stronę
Pod ustawieniami jest Kód k vložení (kod do wstawienia). Wybierz wariant (przycisk z oknem albo formularz bezpośrednio na stronie), tekst i kolor przycisku i kliknij Kopírovat (kopiuj). Wstaw kod tam, gdzie ma być przycisk lub formularz. Wygląd nie jest zapisywany, jest tylko w kodzie: po zmianie wstaw kod ponownie. Podgląd pod kodem pokazuje, co zobaczy klient.
Własna strona (HTML)
Przycisk, który otwiera okno z wyborem terminu. Wstaw obie linie tam, gdzie ma być przycisk; skrypt wystarczy na stronie raz, nawet przy kilku widżetach.
<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>Formularz bezpośrednio na stronie; jego wysokość dopasowuje się do treści.
<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
W edytorze strony dodaj blok Własny HTML (Custom HTML) i wklej do niego kod. Jeśli WordPress usunie skrypt po zapisaniu (konto bez uprawnień do niefiltrowanego HTML albo plan, który nie pozwala na skrypty), użyj wariantu bez skryptu lub samego linku.
Webnode, Wix i inne kreatory stron
Kreatory stron zwykle mają element do wstawiania kodu HTML (Osadź kod, HTML, Embed). Niektóre umieszczają go we własnej ramce na swoim adresie: okno przycisku otwiera się wtedy tylko wewnątrz ramki, a jeśli adresu ramki nie ma wśród dozwolonych stron, zamiast wyboru pojawi się tylko link do rezerwacji. W takim kreatorze wybierz formularz bezpośrednio na stronie i ustaw ramkę na co najmniej 700 px wysokości albo umieść link z wariantu sam link na przycisku kreatora.
Bez skryptu i sam link
Jeśli strona nie dopuszcza obcego skryptu, użyj wariantu bez skryptu (czysty iframe). Ma stałą wysokość 700 px i nie dopasowuje się do treści.
<iframe src="https://reservuj.cz/pl/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>Jeśli strona nie dopuszcza nawet iframe, sam link prowadzi prosto do rezerwacji w Twojej firmie.
<a href="https://reservuj.cz/pl/company/vas-podnik/rezervovat?utm_source=web&utm_medium=booking_link&utm_campaign=vas-podnik" target="_blank" rel="noopener">Rezervovat</a>Dostosowanie
Widżet ustawia się atrybutami elementu div z kodu do wstawienia. Innych atrybutów wersja 1 nie zna.
| Atrybut | Znaczenie |
|---|---|
data-reservuj-widget |
Adres Twojej firmy w Reservuj, jak w linku /company/vas-podnik. Wymagany; tylko małe litery bez znaków diakrytycznych, cyfry i myślniki. |
data-variant |
button = przycisk, który otwiera okno (domyślnie); inline = formularz bezpośrednio na stronie. |
data-label |
Tekst przycisku, domyślnie Rezervovat. Czytniki ekranu odczytają go też jako nazwę okna. |
data-color |
Kolor przycisku jako #rgb lub #rrggbb, domyślnie #0e7c8c. Inny zapis nie zostanie użyty. Nie zmienia wyglądu wyboru wewnątrz okna. |
- Parametry kampanii utm_source, utm_medium, utm_campaign, utm_content i utm_term z adresu Twojej strony widżet przekaże dalej, aż do okna, w którym klient kończy rezerwację.
- Jeśli strona wstawi element dopiero później (na przykład po kliknięciu), wywołaj:
window.ReservujWidget && window.ReservujWidget.scan(); - Przy otwarciu okna lub wyświetleniu formularza element wywołuje zdarzenie reservuj:open (w detail.slug jest adres firmy) — przydatne do własnych pomiarów.
document.addEventListener('reservuj:open', (event) => {
console.log('Reservuj widget', event.detail.slug);
});Co zobaczy klient
- Przycisk z Twoim tekstem i kolorem. Po kliknięciu otwiera się okno z wyborem, na telefonie na cały ekran; zamyka się krzyżykiem, klawiszem Esc albo kliknięciem obok.
- Kolejno wybiera oddział (tylko jeśli masz ich więcej), usługę, dzień i godzinę. Ceny w widżecie są podstawowe, cenę końcową klient zobaczy i potwierdzi przy zakończeniu.
- Kliknięcie godziny otwiera nowe okno Reservuj. Kto nie jest zalogowany, zobaczy Máte vybraný termín (masz wybrany termin) i po zalogowaniu lub rejestracji dokończy rezerwację. Wybór jest ważny 30 minut, potem klient wybiera godzinę ponownie.
Częste problemy
Zamiast wyboru terminu jest tylko przycisk, który otwiera rezerwację w nowym oknie
Widżet nie zgłosił się w ciągu kilku sekund i kod pokazał link zastępczy. Najczęściej adresu strony nie ma wśród dozwolonych stron: sprawdź https, wariant z www i bez niego oraz literówki. W konsoli przeglądarki jest wtedy błąd frame-ancestors. Tak samo widżet zachowuje się, gdy jest wyłączony albo firma nie przyjmuje rezerwacji (zobacz niżej).
Na stronie nic się nie pokazuje
Strona lub kreator usunęły kod przy zapisie albo skrypt blokuje polityka bezpieczeństwa treści (CSP) Twojej strony. Jeśli strona wysyła nagłówek Content-Security-Policy, dodaj do swoich reguł adres portalu:
Content-Security-Policy: script-src 'self' https://reservuj.cz; frame-src https://reservuj.czDla wariantu bez skryptu wystarczy frame-src. Jeśli CSP nie da się zmienić, użyj samego linku.
Widżet informuje, że rezerwacja online nie jest tu teraz dostępna
Firma teraz nie przyjmuje rezerwacji przez widżet: widżet jest wyłączony, e-mail firmy nie jest potwierdzony, firma nie jest uruchomiona albo jest zawieszona. Na Twojej stronie zamiast wyboru pojawi się wtedy link do rezerwacji; komunikat zobaczysz, gdy otworzysz widżet osobno. Czego brakuje, powie panel administracyjny na stronie Widget na web.
Brak usługi lub wolnego terminu
Online nie można teraz zarezerwować żadnej usługi: w cenniku nie ma ważnej usługi dla podstawowej kategorii klientów. W najbliższych tygodniach nie ma wolnego terminu: sprawdź godziny otwarcia, zmiany pracowników i z jakim wyprzedzeniem można rezerwować usługę.
Teraz jest tu zbyt wiele zapytań naraz
Widżet hamuje ponad 60 zapytań na minutę z jednego adresu IP (na przykład z jednego biura). Po minucie przejdzie samo.