Osadzanie strony rezerwacji na stronie internetowej

W Univents Twoja strona rezerwacji działa jako samodzielna, publiczna strona. Możesz ją jednak osadzić także bezpośrednio na istniejącej stronie internetowej, na przykład na podstronie poświęconej cateringowi, wydarzeniom lub degustacjom. Potrzebny do tego kod iFrame Univents generuje za Ciebie w gotowej postaci, więc nie musisz niczego pisać samodzielnie.

Co jest potrzebne na początek

Aby osadzić stronę rezerwacji, musisz mieć już gotową stronę. Jeśli jeszcze jej nie masz, najpierw ją utwórz. Otwórz w tym celu przegląd stron rezerwacji i kliknij w prawym górnym rogu Nowa strona rezerwacji. Tam nadajesz nazwę, wybierasz wygląd (Webshop, Zapytanie lub Stepper), rezerwowalne produkty i lokalizacje oraz określasz, na jakie pytania mają odpowiedzieć Twoi klienci.

Aby osadzona strona była widoczna dla klientów, musi być aktywna. W przeglądzie poznasz to po plakietce statusu obok nazwy: Na żywo oznacza opublikowaną stronę, a Wersja robocza – stronę, która nie jest jeszcze widoczna. Kliknij plakietkę, aby przełączać się między tymi stanami. Strona w wersji roboczej nie jest wyświetlana w iFrame.

Pobieranie kodu do osadzenia

Kod do osadzenia znajdziesz bezpośrednio w przeglądzie stron rezerwacji. Przy każdej stronie, po prawej stronie wiersza, jest rząd ikon akcji.

1. Otwórz przegląd stron rezerwacji.
2. Znajdź wiersz wybranej strony rezerwacji.
3. Kliknij po prawej ikonę kodu z podpowiedzią Kopiuj fragment kodu do osadzenia.
4. Univents skopiuje gotowy kod iFrame do schowka i potwierdzi to komunikatem Kod do osadzenia skopiowany.

Skopiowany kod wygląda mniej więcej tak:

<iframe
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

Jeśli zamiast kodu iFrame potrzebujesz tylko bezpośredniego linku, skorzystaj z ikony z podpowiedzią Kopiuj link do rezerwacji.

Wstawianie kodu na stronę internetową

Teraz wklej skopiowany kod w miejscu swojej strony, w którym ma pojawić się strona rezerwacji.

1. Otwórz w swoim kreatorze stron podstronę, na której ma pojawić się rezerwacja.
2. Dodaj element przeznaczony na własny kod HTML. W WordPressie ten blok często nazywa się „Własny HTML”, w innych systemach „Kod”, „Osadź” lub „HTML”.
3. Wklej skopiowany kod iFrame do tego elementu.
4. Zapisz i opublikuj stronę.

Szerokość w kodzie jest ustawiona na width="100%", więc strona rezerwacji automatycznie dopasowuje się do obszaru treści. Wartość min-height:700px określa minimalną wysokość. Jeśli Twoja strona rezerwacji jest długa i wygląda na ucięta u dołu, zwiększ tę wartość.

Dla programistów: automatyczne dopasowanie wysokości zamiast stałej

Stała wartość min-height:700px w kodzie do osadzenia to tylko minimalna wysokość — jeśli miejsca nie wystarcza, strona rezerwacji zostanie ucięta u dołu. Jeśli masz dostęp do kodu swojej strony (albo ma go osoba, która ją dla Ciebie tworzy), możesz sprawić, by wysokość rosła automatycznie: osadzona strona sama wysyła wiadomość do okna nadrzędnego przy każdej zmianie rozmiaru.

Niewielki skrypt na Twojej stronie przechwytuje tę wiadomość i na bieżąco dopasowuje wysokość iFrame:

<iframe
  id="univents-booking-iframe"
  src="https://univents.app/embed/dein-workspace/deine-seite"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.data && event.data.type === 'univents-embed-resize') {
      var iframe = document.getElementById('univents-booking-iframe');
      if (iframe) iframe.style.height = event.data.height + 'px';
    }
  });
</script>

Bez tego skryptu wszystko działa jak dotychczas — wystarczy, że w razie potrzeby ręcznie zwiększysz stałą wartość min-height (zobacz FAQ poniżej).

Pliki cookie w osadzonym obszarze

Osadzona strona rezerwacji nie wyświetla własnego banera cookies i nie zapisuje żadnych plików cookie. To celowe działanie: dwa banery jeden na drugim — Twój na stronie i drugi w iFrame — tylko myliłyby odwiedzających. Zgoda leży więc w całości po stronie Twojej własnej strony internetowej; dla osadzonej strony rezerwacji nie musisz zbierać żadnych dodatkowych zgód.

Jeśli ktoś otworzy stronę rezerwacji pod jej własnym adresem, czyli nie w formie osadzonej, jest odwrotnie: tam Univents wyświetla własny baner cookies.

Testowanie i kontrola

Zanim udostępnisz osadzoną stronę klientom, sprawdź jeszcze raz efekt.

1. Otwórz stronę swojej witryny, na której umieszczono kod.
2. Sprawdź, czy strona rezerwacji wyświetla się w całości i nie jest ucięta.
3. Jeśli chcesz wcześniej sprawdzić działanie w Univents, kliknij w przeglądzie ikonę z podpowiedzią Otwórz podgląd na żywo, aby zobaczyć stronę w nowej karcie.
4. Wykonaj próbnie przykładowe zapytanie, aby mieć pewność, że rezerwacja trafia do Ciebie prawidłowo.

Jeśli później chcesz coś zmienić w treści, wyglądzie lub pytaniach, kliknij w wierszu strony rezerwacji Konfiguruj. Zmiany pojawiają się automatycznie także w już osadzonej wersji, więc nie musisz ponownie kopiować kodu iFrame.

Często zadawane pytania

Czy muszę kopiować kod ponownie po każdej zmianie? Nie. iFrame zawsze pokazuje aktualny stan Twojej strony rezerwacji. Zmiany treści wprowadzone przez Konfiguruj są natychmiast widoczne także w osadzonej wersji.

Strona jest ucięta u dołu – co zrobić? Zwiększ w wklejonym kodzie wartość min-height:700px, na przykład do 1000px. Dzięki temu strona rezerwacji zyska więcej miejsca. Jeśli masz dostęp do kodu strony, możesz zamiast tego sprawić, by wysokość rosła automatycznie — zobacz sekcję „Dla programistów” powyżej.

Moi klienci nie widzą niczego w iFrame. Sprawdź, czy strona rezerwacji ma status Na żywo. Jeśli ma status Wersja robocza, nie jest wyświetlana publicznie. Kliknij plakietkę statusu, aby ją aktywować.

Gdzie ponownie znajdę tę instrukcję? W przeglądzie przy każdej stronie jest ikona książki z podpowiedzią Otwórz instrukcję osadzania, która prowadzi Cię bezpośrednio tutaj.