Jak osadzić widget rezerwacji na stronie

Widget rezerwacji Rezeri pozwala Twoim klientom umawiać wizyty bez opuszczania Twojej strony. Ten artykuł pokazuje, jak skonfigurować widget w panelu, skopiować kod embedowania i osadzić go na stronie. Jest przeznaczony dla osób, które samodzielnie zarządzają swoją witryną — na WordPressie, Wix, Squarespace lub we własnym pliku HTML.

Zanim zaczniesz

Sprawdź dwie rzeczy, które warunkują poprawne działanie widgetu.

• Strona, na której osadzasz widget, musi działać na protokole HTTPS. Przeglądarki blokują tzw. mixed content, więc na stronie HTTP iframe może się nie załadować.
• W panelu Rezeri masz przynajmniej jedną aktywną usługę. Widget wyświetla wyłącznie usługi oznaczone jako aktywne.

Jeśli Twoja strona używa nagłówków Content Security Policy (CSP), upewnij się, że zezwalają na osadzanie iframe z domeny rezeri.com (dyrektywa frame-src https://rezeri.com).

Krok 1 — skonfiguruj widget w panelu

Zaloguj się do panelu administracyjnego Rezeri i w menu bocznym kliknij Widget. Otworzy się strona konfiguracji.

Możesz dostosować trzy kolory: kolor główny (przyciski, nagłówki i akcenty), kolor tła strony oraz kolor tła kart. Kliknij kolorowy kwadrat, aby otworzyć próbnik, albo wpisz wartość HEX ręcznie, na przykład #3B82F6.

Na stronie znajdziesz też przełączniki: Widget włączony, Ukryj branding rezeri.com, Pokaż "Online" / "Na miejscu" oraz Pokaż lokalizację Usługi Na miejscu. Po zmianach kliknij Zapisz ustawienia. Podgląd po prawej stronie odświeży się automatycznie.

Krok 2 — skopiuj kod embedowania

Po zapisaniu ustawień poniżej formularza pojawi się sekcja Kod embedowania.

Kliknij przycisk Kopiuj kod. Kod HTML trafi do schowka, a na ekranie pojawi się potwierdzenie "Skopiowano". Skopiowany fragment to gotowy iframe z adresem Twojego widgetu. Jest responsywny — ma szerokość 100%, więc dopasuje się do szerokości kontenera na Twojej stronie.

Krok 3 — osadź kod na stronie

Sposób wklejenia zależy od platformy, na której działa Twoja witryna.

• WordPress: edytuj wybraną stronę, dodaj blok Własny HTML (Custom HTML), wklej skopiowany kod i opublikuj. Alternatywnie wklej kod przed zamknięciem tagu </body> w pliku motywu lub przez wtyczkę typu "Insert Headers and Footers".
• Wix: w edytorze kliknij Dodaj, wybierz HTML Code (Embed Code), wklej kod, dostosuj rozmiar elementu i opublikuj stronę.
• Squarespace: edytuj stronę, dodaj blok Code (Kod), wklej kod i opublikuj.
• HTML ręcznie: otwórz plik w edytorze, wklej kod w sekcji body w miejscu, gdzie widget ma się pojawić, zapisz i prześlij na serwer.

Zalecana szerokość kontenera to 400–600 px, a minimalna to 320 px. Przy węższych kontenerach układ widgetu może się rozjechać. Domyślna wysokość iframe to 600 px — jeśli potrzebujesz innej, zmień wartość atrybutu height, a minimalną wysokość ustaw w atrybucie style (właściwość CSS min-height).

Częste problemy

• Widget się nie wyświetla — sprawdź, czy jest włączony w panelu, i przejrzyj konsolę przeglądarki pod kątem błędów CSP lub mixed content.
• Komunikat "Rezerwacje niedostępne" — widget jest wyłączony. Włącz przełącznik Widget włączony w panelu.
• Brak usług w widgecie — upewnij się, że masz aktywne usługi w sekcji Usługi.
• Kolory się nie aktualizują — ustawienia strony serwer zwraca bez cache'owania, więc zmiany są widoczne od razu. Jeśli nadal widzisz starą wersję, wymuś odświeżenie strony skrótem Ctrl+F5 (to zwykle pamięć podręczna przeglądarki).

Tego samego kodu możesz użyć na wielu stronach — każda wyświetli ten sam widget. Jeśli potrzebujesz różnych ustawień dla różnych witryn, utwórz dodatkowe widgety w panelu i osadź ich kody osobno.