Jak dodać widget rezerwacji na stronę obiektu? Instrukcja krok po kroku

Klient, który trafia na Twoją stronę, chce od razu sprawdzić wolny termin i zarezerwować. Każde przekierowanie do innego serwisu, formularz kontaktowy czy telefon na recepcję to miejsce, w którym część osób rezygnuje. Widget rezerwacji na stronie obiektu skraca tę drogę do jednego ekranu. Poniżej pokazujemy, jak go dodać krok po kroku, bez programisty.

Jeśli chcesz najpierw zobaczyć, jak widget wygląda i działa, sprawdź widget rezerwacji Zyko na żywo. Ta instrukcja skupia się na samym dodaniu go do Twojej strony.

Krok 1. Skopiuj kod z panelu obiektu

Gotowy kod widgetu generujesz w panelu Zyko. Kliknij ikonę koła zębatego, wybierz „Integracje / Marketing” i przejdź do sekcji „Zainstaluj Widget”. Tam:

wybierasz rodzaj widgetu: rezerwacje, zajęcia albo kursy (widoczne są tylko moduły, które masz włączone),
przy rezerwacjach możesz wskazać jeden konkretny zasób, na przykład jedną salę albo jeden kort,
ustawiasz kolory i od razu widzisz podgląd na żywo,
kopiujesz dwa fragmenty kodu przyciskiem „Skopiuj Kod”.

Widget nie wymaga klucza API ani żadnej konfiguracji po stronie serwera. Działa od razu po wklejeniu kodu.

Krok 2. Wklej skrypt i ramkę widgetu na swojej stronie

Kod składa się z dwóch części. Pierwsza to skrypt, który wklejasz raz na całą stronę, na przykład tuż przed znacznikiem </body>:

<script src="https://zyko.pl/zyko-embed.js" async></script>

Skrypt dopasowuje wysokość widgetu do jego treści i przewija stronę do widgetu przy kolejnych krokach rezerwacji. Obsługuje wszystkie widgety na stronie naraz, więc nie trzeba go powtarzać.

Druga część to sama ramka widgetu. Wklejasz ją dokładnie w tym miejscu strony, w którym widget ma się pojawić:

<iframe class="zyko-embed"
  src="https://rezerwacje.zyko.pl/embed/book/twoj-obiekt"
  title="Rezerwacje online"
  style="width:100%;height:500px;border:0;display:block"></iframe>

W kodzie z panelu zamiast twoj-obiekt jest już adres Twojego obiektu oraz wybrane kolory. Nie musisz niczego zmieniać ręcznie.

Jak dodać widget w WordPressie, Elementorze i innych kreatorach

Widget działa na każdej stronie, na której możesz wkleić własny kod HTML:

WordPress (edytor blokowy): dodaj blok „Własny HTML” w miejscu, w którym ma być widget, i wklej do niego oba fragmenty kodu, najpierw skrypt, potem ramkę. Jeśli widgetów jest kilka na jednej podstronie, skrypt wklej tylko w pierwszym bloku.
Elementor: przeciągnij element „HTML” do wybranej sekcji i wklej kod tak samo jak w edytorze blokowym.
Webflow: użyj elementu „Embed”. Skrypt możesz też dodać raz dla całej witryny w ustawieniach projektu, w polu kodu przed </body>.
Strona pisana samodzielnie: skrypt wklej w szablonie strony, a ramkę w treści podstrony z rezerwacjami.

Uwaga dla użytkowników Wix: Wix umieszcza wklejony kod HTML we własnej, dodatkowej ramce. Widget się wyświetli, ale jego wysokość nie będzie dopasowywać się automatycznie. W takim przypadku ustaw w kreatorze Wix stałą, wyższą wysokość elementu albo dopisz do adresu widgetu parametr height (opisany niżej).

Który widget wybrać: rezerwacje, zajęcia czy kursy

Każdy rodzaj widgetu to osobny kod, więc na każdej podstronie wstawiasz dokładnie ten, którego potrzebuje klient:

Rezerwacje: kalendarz wolnych godzin dla kortów, sal, torów, stanowisk czy gabinetów. Klient wybiera termin i od razu opłaca rezerwację w widgecie.
Jeden zasób: ten sam widget rezerwacji, ale tylko dla jednej sali, jednego kortu albo jednego pokoju. Przydaje się, gdy każdy zasób ma na Twojej stronie własną podstronę z opisem i zdjęciami, na przykład osobną stronę dla każdego pokoju zagadek.
Zajęcia: tygodniowy grafik zajęć grupowych z limitem miejsc. Klient zapisuje się na wybrane zajęcia i płaci w widgecie.
Kursy: lista kursów i semestrów z ceną i liczbą wolnych miejsc, z płatnością z góry albo w abonamencie.

Na jednej stronie może działać kilka widgetów jednocześnie, na przykład rezerwacja kortów w jednej sekcji i zapisy na kurs w drugiej.

Kolory i wygląd dopasowane do Twojej strony

Kolory ustawiasz w panelu, a najszybciej wybierając jedną z gotowych palet. Ustawienia trafiają do adresu widgetu jako parametry, które w razie potrzeby możesz też zmienić ręcznie:

color: kolor główny, czyli przyciski i zaznaczenia, na przykład color=ff2d78,
secondary: kolor dodatkowy,
bg: kolor tła. Odcienie kart, obramowań i kolor tekstu dobierają się do niego automatycznie,
compact=1: tryb kompaktowy, bez nagłówka z nazwą obiektu, zostaje sam wybór terminu,
height: stała wysokość ramki w pikselach zamiast automatycznej.

Parametry dopisujesz do adresu widgetu po znaku ? i łączysz znakiem &, na przykład ?color=f9d43e&bg=222222&compact=1.

Jak mierzyć rezerwacje z widgetu w Google Analytics

Widget wysyła do Twojej strony informację o każdej udanej rezerwacji, zapisie na zajęcia i płatności. Wystarczy kilka linijek kodu, żeby przekazać je do Google Analytics 4 albo piksela Meta i sprawdzić, ile rezerwacji przyniosła konkretna kampania:

<script>
  window.addEventListener('message', function (event) {
    var type = event.data && event.data.type;
    if (type === 'zyko-embed-booking-success' && window.gtag) {
      gtag('event', 'zyko_booking_success');
    }
  });
</script>

Dostępne są osobne zdarzenia dla rezerwacji, zapisu na zajęcia i dołączenia do kursu, zarówno dla samego zapisu, jak i dla udanej albo nieudanej płatności. Pełną listę znajdziesz na stronie widgetu rezerwacji.

Najczęstsze problemy przy dodawaniu widgetu

Widget jest za niski albo ucięty. Najczęściej brakuje skryptu z kroku 2 albo ramka nie ma klasy zyko-embed. Bez skryptu ramka zostaje przy wysokości 500 pikseli z kodu.
Długi grafik przewija się wewnątrz widgetu. Tak ma być: ramka nigdy nie jest wyższa niż okno przeglądarki, dzięki czemu kolejne kroki rezerwacji i okno logowania zawsze są widoczne na ekranie.
Widget pokazuje, że obiekt nie oferuje rezerwacji. Sprawdź w panelu, czy moduł rezerwacji jest włączony i czy zasoby mają ustawioną cenę.
Kreator strony usuwa kod. Niektóre szablony nie pozwalają wklejać skryptów w treści. Wtedy wklej skrypt w ustawieniach całej witryny, a w treści zostaw samą ramkę.

Czy widget spowolni stronę albo zaszkodzi SEO?

Nie. Skrypt ma kilka kilobajtów i ładuje się asynchronicznie, a sam widget działa w osobnej ramce, więc Twoja strona wyświetla się bez czekania na niego. Treść widgetu nie jest liczona jako treść Twojej strony, dlatego nie tworzy duplikatów ani słabych podstron. Twoja strona jest oceniana na podstawie własnych tekstów, a widget jest dodatkiem do obsługi rezerwacji.

Jeśli nie masz jeszcze własnej strony WWW, możesz zacząć od publicznej wizytówki obiektu w Zyko.pl. To gotowa strona z rezerwacjami, bez kosztów wykonania strony.

W jakich obiektach widget sprawdza się najlepiej

Widget przydaje się wszędzie tam, gdzie obiekt ma już własną stronę i nie chce z niej rezygnować:

Korty tenisowe i korty do padla, gdzie grafik kortów jest najważniejszym elementem strony,
Pokoje zagadek, gdzie każdy pokój może mieć osobną podstronę z własnym widgetem,
Studia pilates i szkoły tańca, gdzie klient chce zobaczyć grafik zajęć przed zapisem,
Strzelnice, gdzie liczy się wybór toru i godziny,
Gabinety fizjoterapii, gdzie pacjent wybiera termin wizyty bez dzwonienia.

Widget jest dostępny w każdym planie, także w darmowym planie START. Zobacz widget na żywo i sprawdź, jak wyglądałby na Twojej stronie.