Jak osadzić kalendarz zapisów na swojej stronie (iframe)

Osadzenie wstawia kalendarz zapisów Planerto bezpośrednio na Twoją stronę internetową, np. w zakładce „Grafik” albo „Zapisy”. Klient przegląda terminy i zapisuje się bez wychodzenia z Twojej strony. Potrzebujesz do tego fragmentu kodu (iframe), który wklejasz w edytorze strony albo przekazujesz osobie, która ją prowadzi. Osadzanie jest dostępne od planu Solo.

Jak wygenerować kod osadzenia

Kod tworzysz na tym samym ekranie, na którym jest link do Twojej strony zapisów (opisujemy go w poradniku Jak uruchomić swoją pierwszą stronę zapisów). Wejdź w Strona zapisów → Ustawienia strony zapisów i w zakładce Ogólne, pod linkiem, kliknij Osadź na swojej stronie.

1. W sekcji Co chcesz osadzić? wybierz widok, który ma się pojawić na Twojej stronie:
   • Kalendarz tygodniowy – najbliższe terminy w układzie tygodnia,
   • Kalendarz miesięczny – pełny miesiąc, z którego klient przechodzi do wydarzeń wybranego dnia,
   • Lista wydarzeń – chronologiczna lista wydarzeń z wybranego miesiąca,
   • Katalog wydarzeń – wydarzenia jako kafelki, wygodne także na telefonie,
   • Karnety – od razu katalog Twoich karnetów,
   • Wynajem – od razu Twoje oferty wynajmu.
2. W polu Dozwolone domeny osadzenia wpisz adres swojej strony bez https://, np. studioruchu.pl. Kalendarz zadziała tylko na stronach z tej listy. Wariant z „www.” aplikacja dopisze sama, a kilka domen oddzielasz przecinkiem. Jeśli w polu Strona internetowa masz już podany adres swojej strony, to pole może być wypełnione od razu.
3. Kliknij Generuj kod iframe. Kod pojawi się w polu poniżej.
4. Kliknij Kopiuj kod i wklej go na swojej stronie (jak to zrobić, opisujemy w następnej części).

Chcesz osadzić kilka widoków, np. kalendarz na jednej podstronie i karnety na innej? Zaznacz kolejny widok i znowu kliknij Kopiuj kod – kod w polu zmienia się razem z wybranym widokiem. Do zwykłego linku wrócisz przyciskiem Wróć do linku publicznego.

Jak wkleić kod na swojej stronie

Kod wklejasz w tym miejscu strony, w którym ma się pojawić kalendarz. W większości kreatorów stron służy do tego osobny element do własnego kodu HTML.

1. Otwórz w edytorze podstronę, na której ma być kalendarz.
2. Dodaj element do własnego kodu HTML i wklej do niego skopiowany kod:
   • WordPress (edytor bloków): blok Własny HTML,
   • Elementor: widżet HTML,
   • inny kreator stron: element, który pozwala wkleić własny kod HTML.
3. Zapisz zmiany i opublikuj stronę.
4. Otwórz stronę na komputerze i na telefonie. Sprawdź, czy kalendarz nie jest ucięty z dołu i nie zostawia dużego pustego pola pod spodem. Jeśli coś się nie mieści, zmień wysokość w kodzie (opis poniżej).

Jak dopasować wysokość kalendarza

Gotowy kod wygląda tak. W Twoim w miejscu TWOJ-TOKEN jest unikalny ciąg znaków, a koniec adresu zależy od wybranego widoku.

<iframe src="https://cal.planerto.com/booking/embed/TWOJ-TOKEN?view=week"
  title="Planowanie i zapisy" width="100%" height="900" loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin" style="border:0"
  sandbox="allow-scripts allow-forms allow-same-origin allow-top-navigation-by-user-activation"
  allow="payment"></iframe>

• Wysokość: height="900" to wysokość kalendarza w pikselach. Zwiększ ją, jeśli kalendarz jest ucięty z dołu, albo zmniejsz, jeśli zostawia za dużo pustego miejsca.
• Szerokość: width="100%" wypełnia kolumnę, w której wkleisz kod. Szerokością sterujesz układem swojej strony.
• Reszta kodu: zostaw ją bez zmian. Zmiana tokenu albo adresu sprawi, że kalendarz przestanie się wyświetlać.

Jak ukryć napis „Napędzane przez Planerto” w osadzonym kalendarzu

Na dole osadzonego kalendarza oraz na ekranach zamówienia i płatności widać napis „Napędzane przez Planerto”. Jeśli wolisz, żeby klient widział na swojej stronie tylko Twoją markę, możesz go ukryć. Ta opcja jest dostępna od planu PRO.

1. W Strona zapisów → Ustawienia strony zapisów otwórz zakładkę Branding.
2. W sekcji Widoczność włącz Ukryj „Napędzane przez Planerto”.
3. Kliknij Zapisz zmiany.

Napis zniknie z kalendarza, który już masz na stronie – nie musisz podmieniać kodu. Na stronie zapisów otwieranej z Twojego linku ten napis zostaje.

Najczęstsze problemy

Kalendarz się nie wyświetla lub jest informacja o problemie z połączeniem

Kod działa wyłącznie na domenach z pola Dozwolone domeny osadzenia. Jeśli adres strony się nie zgadza, popraw domenę, kliknij Generuj kod iframe i podmień kod na stronie.

Sprawdź również, czy w sekcji Informacje i linki są uzupełnione regulamin oraz polityka prywatności. Bez tego nie wyświetli się kalendarz.

Kalendarz ma być na subdomenie

Podaj dokładnie tę subdomenę, na której będzie osadzony. Dla przeglądarki sklep.studioruchu.pl to inna domena niż studioruchu.pl.

Przenosisz stronę na nową domenę

Wpisz nową domenę w polu Dozwolone domeny osadzenia, wygeneruj kod ponownie i podmień go na stronie.

Zamiast ustawień osadzania widzisz informację o planie

Komunikat „Osadzanie kalendarza na własnej stronie jest dostępne od planu Solo.” oznacza, że Twój obecny plan nie obejmuje osadzania. Kliknij Zobacz plany, żeby wybrać plan Solo lub wyższy. Do tego czasu możesz udostępniać klientom zwykły link do strony zapisów.

Wolisz przejść przez to razem z nami? Umów bezpłatne wdrożenie, a ustawimy osadzenie podczas jednej rozmowy.