Jak utworzyć widżet

Omówienie

Widżet rezerwacji TicketingHub to narzędzie JavaScript, które integruje się ze stronami internetowymi i umożliwia klientom bezpośrednią rezerwację produktów. Widżet tworzy się w panelu, konfiguruje sekcja po sekcji, a następnie wkleja krótki fragment kodu na swojej stronie.

Obsługiwane przeglądarki

Safari 16.4+, Chrome 111+, Firefox 128+.

Tworzenie nowego widżetu

1. W panelu przejdź do sekcji Widżety
2. Kliknij Nowy widżet
3. Nadaj widżetowi nazwę, wybierz produkty, które ma sprzedawać, i kliknij Utwórz widżet

Zostanie wyświetlona strona ustawień widżetu, na której konfiguruje się wszystkie pozostałe elementy. Po lewej stronie znajdują się ustawienia pogrupowane w sekcje, a po prawej stronie — podgląd widżetu na żywo, który odświeża się w miarę wprowadzania zmian.

Konfigurowanie widżetu

Oferowane produkty

Wybierz produkty, pakiety i karty podarunkowe oferowane przez widżet, dodaj opcje dodatkowe (wszystkie lub tylko wybrane) oraz zdecyduj, czy klienci mogą kupować produkty w formie bonów upominkowych lub realizować bony upominkowe w widżecie.

Proces rezerwacji

Wybierz sposób poruszania się klientów po widżecie: Najpierw bilety (wybór biletów, a następnie daty i godziny), Najpierw wydarzenie (przeglądanie kalendarza, a następnie wybór rezerwacji) lub Tylko realizacja bonów. Możesz także ustawić domyślny widok kalendarza i poprosić klientów o dwukrotne wpisanie adresu e-mail, aby uniknąć literówek.

Zasady sprzedaży

Określ, kiedy i co sprzedaje widżet: datę i godzinę rozpoczęcia sprzedaży, datę otwarcia kalendarza, moment wyświetlania pozostałej liczby miejsc w danym terminie oraz waluty, w których klienci mogą płacić. Jeśli w pierwszym tygodniu lub miesiącu wyświetlanym w kalendarzu nie ma niczego do zarezerwowania, kalendarz wyszukuje kolejne terminy i otwiera się na pierwszej dostępnej dacie.

Wygląd

Dodaj niestandardowy CSS, aby dokładnie dopasować wygląd widżetu do swojej marki.

Analityka

Połącz Google Analytics lub Google Tag Manager, aby śledzić sposób korzystania z widżetu przez odwiedzających.

Zaawansowane

Po dokonaniu zakupu przekierowuj klientów na wybraną stronę i ustaw parametr URL używany przez odsprzedawców, aby rezerwacje były przypisywane do właściwych odsprzedawców.

Podgląd, publikowanie i wdrażanie

Wprowadzane zmiany są zapisywane jako wersja robocza na podstawie podglądu na żywo — kliknij Aktualizuj podgląd, aby zobaczyć je po prawej stronie bez wpływania na aktywny widżet. Gdy wszystko będzie gotowe, kliknij Opublikuj, aby wprowadzić zmiany na żywo, lub Anuluj, aby odrzucić wersję roboczą.

Aby umieścić widżet na swojej stronie internetowej, otwórz sekcję Instrukcje instalacji: skopiuj znacznik skryptu do swojej strony, a następnie wybierz widżet Osadzony (wyświetlany bezpośrednio w treści strony) albo widżet Modalny/wyskakujący (otwierany w nakładce po kliknięciu przycisku) i wklej odpowiedni fragment kodu.

Jak widżet przewija stronę

Gdy klient przechodzi do kolejnego kroku, widżet przewija formularz rezerwacji z powrotem do góry, dzięki czemu klient, który przewinął długą listę biletów, nie trafia w połowie kolejnego kroku. Jeśli widżet został umieszczony w przewijanym panelu należącym do własnej strony, przewija się właśnie ten panel, a sama strona przewija się tylko wtedy, gdy panel został przewinięty poza widoczny obszar. Dzieje się tak, gdy górna część formularza zniknie z widoku oraz gdy formularz wychodzi poza dolną krawędź ekranu, mimo że nad nim pozostaje jeszcze wolne miejsce. Formularz, który już mieści się na ekranie, pozostaje na swoim miejscu, a widżet uwzględnia miejsce zajmowane przez nagłówek przypięty do górnej krawędzi strony.

Jeśli takie działanie nie pasuje do układu strony, możesz zatrzymać przewijanie strony, dodając "scrollOnStepChange": false do wklejonego kodu widżetu:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

Jeśli nagłówek ukrywa się podczas przewijania strony w dół i pojawia ponownie podczas przewijania w górę, widżet nie może zmierzyć jego wysokości, przez co górna część formularza może znaleźć się za nagłówkiem. Zamiast wyłączać przewijanie, podaj widżetowi wysokość nagłówka w pikselach:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

Klonowanie istniejącego widżetu (klasyczne widżety)

Jeśli korzystasz z klasycznego edytora widżetów, możesz zduplikować widżet zamiast tworzyć go ponownie:

1. Przejdź do sekcji Widżety
2. Wybierz istniejący widżet
3. Kliknij Klonuj
4. Wybierz kanał docelowy i potwierdź wybór

Dostosuj sklonowany widżet, a następnie opublikuj go i skopiuj kod na swoją stronę.