Widżet to gotowy fragment kodu, który kopiujesz z panelu administratora i wklejasz na swoją stronę internetową. Pozwala on na wyświetlanie danych z systemu Meeting Application (agendy, prelegentów czy wystawców) bezpośrednio na Twojej witrynie.
Najważniejsza korzyść: Treści utrzymujesz w jednym miejscu (Panel Meeting Application), a zmiany rozchodzą się automatycznie do:
Landing Page’a w Meeting Application,
Aplikacji mobilnej wydarzenia,
Twojej zewnętrznej strony WWW (przez zastosowanie widżetu).
iFrame to „strona w ramce” (osadzasz cały zewnętrzny widok jako osobny byt).
Widżet to komponent, który ładuje się przez skrypt i renderuje konkretną funkcję (np. listę prelegentów) bez wklejania całej strony w ramce.
Widżet zwykle:
lepiej dopasowuje się do układu strony (responsywność),
daje większą kontrolę nad parametrami (np. liczba elementów na stronie),
może być łatwiejszy do stylowania.
Każdy widżet składa się z dwóch elementów:
Skrypt (<script>) – Dołącza funkcjonalność widżetu. Rekomendujemy wklejenie go w sekcji <head> strony.
Tag widżetu (<meeting-app-...>) – Wklejasz go w sekcji <body>, dokładnie tam, gdzie ma się pojawić moduł.
Aby przejść do konfiguracji widżetów, wymagane jest dodanie modułu agenda, prelegenci lub wystawcy do Twojego wydarzenia. Wówczas, w zakładce PERSONALIZACJA, możesz dostosować widżet i skopiować gotowy kod do wklejenia na własną stronę www.
Widżety konfigurujesz suwakami i polami w panelu (lewa kolumna). Każda zmiana powoduje aktualizację wygenerowanego kodu (prawa kolumna).
Po wyjściu i ponownym wejściu do widżetu ustawienia konfiguracji się zerują. System nie pamięta Twoich wyborów w generatorze.
Co to oznacza praktycznie:
jeżeli dopracujesz konfigurację (np. ukrycie godzin, rozmiar strony, tryb LP) — skopiuj gotowy kod i zachowaj go u siebie (np. w pliku / dokumencie / notatkach),
jeśli będziesz chcieć zmienić „zachowanie” widżetu (np. przełączniki), to generujesz kod ponownie i podmieniasz go na stronie.
Wyświetla plan dnia / sesje z Twojej agendy, z opcjami filtrowania i prezentacji (zależnie od konfiguracji).
Slug – identyfikator wydarzenia (musi być zgodny z wydarzeniem).
Komponent Agendy / Wszystkie komponenty – wybierasz, z którego komponentu agendy ma pobierać dane, albo czy ma brać wszystkie.
Język – język widżetu.
Rozmiar strony – ile pozycji wyświetla się na jednej stronie.
Motyw – wygląd (np. default).
Liczba mówców na podglądzie – ilu prelegentów ma się pokazywać przy sesji w podglądzie.
Wyróżnione sesje – możliwość wskazania sesji, które mają być promowane.
Tagi ścieżki agendy – filtrowanie po ścieżkach.
Ukryj czas sesji
Ukryj dni
Pokaż wskaźnik na żywo
Ukryj przyciski transmisji na żywo
Czas sesji z datą
Tryb prezentacji
Każdy z tych przełączników przekłada się na atrybuty w kodzie (np. hide-session-time, hide-days, show-live-indicator itd.).
To pole pozwala dodać własne reguły CSS, np. zmienić tło, rozmiar fontu, zaokrąglenia. Przykład ze screenów:
.class-styles {
background-color: #ffffff;
font-size: 20px;
}
.class-styles-th2 {
border-radius: 12px;
}
można zmienić kolor tła w kodzie osadzanym (po stronie WWW),
albo użyć pola Niestandardowe style CSS w panelu (Landing Page → Widżety) i tam wpisać reguły CSS.
Co pokazuje widżet Wystawców?
Informacje zaciągane z modułu BUSINESS HUB, z paginacją.
Podstawowa konfiguracja (lewa strona)
Slug – identyfikator wydarzenia.
Komponent Wystawcy – wybór źródła danych (np. BUSINESS HUB).
Język – wybór języka.
Rozmiar strony – liczba wystawców na stronę.
Motyw – np. default.
Tryb LP – przełącznik trybu wyświetlania (na screenie jako lp-mode w kodzie).
Niestandardowe style CSS – opcjonalne stylowanie.
Na dole każdego konfiguratora znajdziesz pole na własny kod CSS. Pozwala to na głęboką modyfikację wyglądu (np. zmiana kształtu przycisków czy tła). Przykład:
.class-styles {
background-color: #ffffff;
font-size: 20px;
}Pokazuje listę prelegentów przypisanych do wybranego komponentu, z paginacją (wg rozmiaru strony).
Slug – identyfikator wydarzenia.
Komponent Prelegentów – wybór komponentu (np. SPEAKERS).
Język (na screenie opisany jako speakers_widget.lang) – wybór języka.
Rozmiar strony – liczba prelegentów na stronę.
Niestandardowe style CSS – jak wyżej, do stylowania.
Dla widżetu prelegentów możesz dodatkowo sterować wyglądem przez atrybuty w tagu: m.in. język, kolory (HEX) i font z biblioteki Google Fonts.
Dostępne parametry obejmują m.in.:
locale
main-color, accent-color
background-color
primary-text-color, secondary-text-color
font (nazwa czcionki dokładnie jak w Google Fonts)
Przykład:
<meeting-app-speakers
slug="twoj-slug-wydarzenia"
component-id="123"
page-size="6"
locale="pl"
main-color="#4A90E2"
accent-color="#F5A623"
background-color="#FFFFFF"
primary-text-color="#333333"
secondary-text-color="#777777"
font="Montserrat"
></meeting-app-speakers>
Zmieniliśmy agendę/prelegentów w panelu. Czy na stronie WWW to też się zmieni?”
Tak — jeśli widżet jest osadzony, to treści aktualizują się na podstawie danych z panelu.
„Chcę ukryć godziny / zmienić liczbę elementów / włączyć wskaźnik LIVE — czy to też zaktualizuje się samo?”
Nie zawsze. To są ustawienia widżetu zapisane w kodzie jako atrybuty. Jeśli zmieniasz je w generatorze, musisz:
wygenerować kod ponownie,
wkleić zaktualizowany kod na swojej stronie WWW.
„Czemu po wejściu do widżetu ustawienia zniknęły?”
Bo generator nie zapisuje konfiguracji. To normalne działanie: ustawiasz → kopiujesz → wklejasz na WWW → zachowujesz kod u siebie.
„Widżet się nie wyświetla”
Najczęstsze powody:
brakuje skryptu (krok 1) albo jest wklejony w złe miejsce,
slug lub component-id są niepoprawne,
Twoja strona/IT blokuje zewnętrzne skrypty (polityki bezpieczeństwa, wtyczki, restrykcje).
Meeting Application nie wdraża widżetu na Twojej stronie
My dostarczamy generator i kod. Osadzenie widżetu na Twojej stronie WWW jest po Twojej stronie (lub po stronie Twojego webmastera / zespołu IT).
Konfiguracja zmienia kod: Każda zmiana suwaka po lewej stronie panelu aktualizuje kod po prawej.
Generator nie zapisuje ustawień: Po odświeżeniu strony ustawienia w generatorze (np. wybrane kolory czy rozmiar strony) wrócą do domyślnych. Zawsze kopiuj i zapisuj wygenerowany kod w swoich notatkach. * Wydarzenie musi być Opublikowane: Jeśli Twoje wydarzenie jest w statusie "Draft", widżet nie wyświetli żadnych danych.
Samodzielna implementacja: Meeting Application dostarcza kod, ale za jego wklejenie na Twoją stronę odpowiada Twój zespół IT lub webmaster.