---
title: "Widżety do osadzenia na stronie"
description: "Kompendium wiedzy dot. widżetu agendy, prelegentów i wystawców"
url: https://help.meetingapplication.com/pl/articles/9497471-widzety-do-osadzenia-na-stronie
collection: "Artykuły techniczne"
updated: 2026-10-16
language: pl
alternates: [en]
---

# Widżety do osadzenia na stronie

Kompendium wiedzy dot. widżetu agendy, prelegentów i wystawców

## Czym jest widżet i po co go używać?

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).
    

### Widżet ≠ iFrame

-   **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.
    

## Logika osadzania

Każdy widżet składa się z dwóch elementów:

1.  **Skrypt (**`<script>`**)** – Dołącza funkcjonalność widżetu. Rekomendujemy wklejenie go w sekcji `<head>` strony.
    
2.  **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.

![](https://staticfiles.gleap.io/gattachments/XvpdZFDUziFXhtUvMNmLMZDabdDkU2MqH2nnkyNbWzGAORlTj9RN9pxY5cHDnTLpNFXmXEGtoQN.png)

## Zasady konfiguracji

### A. Konfiguracja „po lewej” zmienia kod „po prawej”

Widżety konfigurujesz **suwakami i polami w panelu** (lewa kolumna). Każda zmiana powoduje aktualizację **wygenerowanego kodu** (prawa kolumna).

![](https://staticfiles.gleap.io/gattachments/dpbrM6aL1tN21yQUZTZNpbaoFAjjMH4DU63JWWBVP68gXqo050680wOmKtk74fD0e11XFxemuvb.png)

### B. Panel nie zapisuje ustawień generatora widżetu

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**.
    

## Widżet Agendy

Wyświetla plan dnia / sesje z Twojej agendy, z opcjami filtrowania i prezentacji (zależnie od konfiguracji).

### Kluczowe pola konfiguracji (lewa strona)

-   **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.
    

### Przełączniki (logika „tak/nie”)

-   **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.).

### Niestandardowe style CSS (na dole)

To pole pozwala dodać własne reguły CSS, np. zmienić tło, rozmiar fontu, zaokrąglenia. Przykład ze screenów:

```javascript
.class-styles {
  background-color: #ffffff;
  font-size: 20px;
}
.class-styles-th2 {
  border-radius: 12px;
}

```

> **Success:** Niestandardowe style to jest już obszar dla osoby, która „umie w CSS”. Jeśli nie masz takiej osoby — potraktuj to jako opcję „dla webmastera”.

### Zmiana koloru tła — dwa podejścia

1.  można zmienić kolor tła w kodzie osadzanym (po stronie WWW),
    
2.  albo użyć pola **Niestandardowe style CSS** w panelu (Landing Page → Widżety) i tam wpisać reguły CSS.
    

### Widżet Wystawców

**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.
    

### Niestandardowe style CSS

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:_

```javascript
.class-styles {
  background-color: #ffffff;
  font-size: 20px;
}
```

## Widżet Prelegentów

Pokazuje listę prelegentów przypisanych do wybranego komponentu, z paginacją (wg rozmiaru strony).

### Podstawowa konfiguracja (lewa strona)

-   **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.
    

### Zaawansowana konfiguracja wyglądu (atrybuty w tagu)

Dla widżetu prelegentów możesz dodatkowo sterować wyglądem przez atrybuty w tagu: [m.in](https://m.in). język, kolory (HEX) i font z biblioteki Google Fonts.

Dostępne parametry obejmują [m.in](https://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:

```javascript
<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>

```

> **Warning:** Nazwa fontu musi być wpisana **dokładnie** jak w Google Fonts (wielkie litery i spacje mają znaczenie).

## Najczęstsze pytania dot. widżetów - FAQ

1.  **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**.

2.  **„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](https://www/).
    

3.  **„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.

4.  **„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).
    

5.  **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.