Jak dodać pop-up na stronie głównej

Co otrzymujesz

Pop-up otwiera się po 3 sekundach.
W środku jest grafika i link prowadzący do wybranej strony.
Zamknięcie działa po kliknięciu w tło, w krzyżyk X lub klawisz ESC.
Domyślnie pop-up pokazuje się użytkownikowi tylko raz na sesję przeglądarki.

Gdzie wkleić kod

Zaloguj się do panelu.
Wejdź w edycję strony głównej.
Dodaj blok typu „Własny HTML” lub „Custom HTML” w sekcji treści strony. Jeśli już masz taki blok, otwórz go do edycji.
Skopiuj cały kod z sekcji „Kod do skopiowania” i wklej do tego bloku. Kod musi znaleźć się wewnątrz elementu <body>.
Zapisz zmiany i odśwież stronę główną w nowej karcie.

Alert
Jeśli nie widzisz od razu efektu, odczekaj 3 sekundy od załadowania strony. Tryb „raz na sesję” może sprawić, że pop-up nie pokaże się drugi raz w tej samej karcie. Jak testować bez nerwów - patrz sekcja „Testowanie”.

Co trzeba zmienić po wklejeniu

W kodzie znajdziesz blok z napisem KONFIGURACJA - EDYTUJ TYLKO TE 5 LINII.
Najszybciej go znajdziesz skrótem klawiaturowym:
- Windows - Ctrl+F
- macOS - Command+F
  Wpisz: POPUP_CONFIG

Zmień 2 wartości:

imageUrl - adres Twojej grafiki.
linkUrl - adres strony, na którą ma prowadzić kliknięcie.

Reszty nie ruszaj, chyba że czytasz sekcję „Zaawansowane ustawienia”.

Rekomendacje dla grafiki

Rekomendowany rozmiar - 1080x1080 px.
Dopuszczalne są inne proporcje - kod niczego nie przycina, skaluje obraz w dół tak, aby całość zmieściła się w oknie.
Pop-up nigdy nie będzie wyższy niż 90 procent wysokości ekranu i nie będzie szerszy niż 92 procent szerokości ekranu.
Waga pliku - najlepiej 200 do 400 kB. Format JPG lub WebP.

Testowanie

Najszybsza metoda - otwórz stronę w trybie prywatnym:
- Chrome - Nowe okno incognito
- Firefox - Nowe okno prywatne
- Edge - Nowe okno InPrivate
Alternatywa - zamknij kartę ze stroną i otwórz ją ponownie. Tryb „raz na sesję” liczy sesję na poziomie karty.
Gdy zmienisz treść pop-upa i chcesz, aby pojawił się ponownie wszystkim użytkownikom - zmień campaignId na nową nazwę, na przykład example-campaign-002.

Zaawansowane ustawienia

delaySec - opóźnienie wyświetlenia w sekundach.
- Domyślnie 3. Możesz wpisać inną liczbę całkowitą, np. 5.
showMode
- 'oncePerSession' - użytkownik zobaczy pop-up raz na sesję w danej karcie przeglądarki. Pokazuje się ponownie po zamknięciu karty i ponownym wejściu na stronę.
- 'always' - pop-up pokazuje się przy każdym wejściu na stronę po odczekaniu delaySec.
enabled
- true - pop-up jest włączony.
- false - pop-up jest całkowicie wyłączony i nie będzie się wyświetlał.

Kod do skopiowania

Zmieniasz tylko wartości w sekcji POPUP_CONFIG. Komentarze w kodzie prowadzą krok po kroku.

<!-- ===== POPUP no-crop version ===== -->
<style>
  /* blokada scrolla kiedy popup jest otwarty */
  body.modal-open { overflow: hidden; }

  /* tło popupa */
  #site-popup .overlay { background: rgba(0,0,0,.6); z-index: 999999999; }

  /* pudełko popupa - dopasowane do grafiki, ale ograniczone ekranem */
  .popup-card {
    display: inline-block; background: #fff; border-radius: 14px; border: 0; padding: 0;
    max-height: 90vh; /* nigdy wyżej niż 90% ekranu */
    max-width: 92vw;  /* nigdy szerzej niż 92% ekranu */
    position: relative;
  }

  /* obrazek - zero przycinania, tylko skalowanie w dół do limitów */
  .popup-media {
    display: block; width: auto; height: auto;
    max-width: 92vw; max-height: 90vh; border-radius: 12px;
  }

  /* przycisk zamknięcia */
  .popup-close {
    position: absolute; top: 8px; right: 12px; font-size: 28px; line-height: 1;
    color: #000; opacity: .8; background: rgba(255,255,255,.9);
    border: 0; border-radius: 20px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
</style>

<!-- markup popupa -->
<div id="site-popup" class="d-none">
  <div class="overlay position-fixed fixed-top w-100 h-100 d-flex align-items-center justify-content-center">
    <div class="card popup-card shadow-lg" role="dialog" aria-modal="true">
      <button type="button" class="popup-close" aria-label="Close">×</button>
      <!-- link - po kliknięciu w obrazek -->
      <a id="popup-link" href="#" class="d-block" rel="noopener">
        <img id="popup-image" class="popup-media" src="" alt="Promocja">
      </a>
    </div>
  </div>
</div>

<script>
  /* ===== KONFIGURACJA - EDYTUJ TYLKO TE 5 LINII =====
   * enabled - włącznik globalny
   * linkUrl - adres, na który prowadzi kliknięcie
   * imageUrl - adres grafiki
   * delaySec - opóźnienie w sekundach
   * showMode - 'oncePerSession' lub 'always'
   * campaignId - zmień, aby wymusić ponowne wyświetlenie po zmianach
   */
  const POPUP_CONFIG = {
    enabled: true,
    linkUrl: 'https://sportigio.com',
    imageUrl: 'https://placehold.co/1080x1080',
    delaySec: 3,                        // domyślnie 3 sekundy
    showMode: 'oncePerSession',         // zaawansowane - patrz sekcja „Zaawansowane ustawienia”
    campaignId: 'example-campaign-001'
  };
  /* ========== KONIEC KONFIGURACJI ========== */

  document.addEventListener('DOMContentLoaded', function () {
    if (!POPUP_CONFIG.enabled) return;

    var popup = document.getElementById('site-popup');
    if (!popup) return;

    // podstawienie linku i obrazka
    var link = document.getElementById('popup-link');
    var img  = document.getElementById('popup-image');
    if (link) link.href = POPUP_CONFIG.linkUrl || '#';
    if (img)  img.src   = POPUP_CONFIG.imageUrl || '';

    // klucz pamięci - żeby nie zasypywać usera popupami
    var storageKey = 'sitePopup:' + (POPUP_CONFIG.campaignId || 'default');

    // logika częstotliwości
    function shouldShow() {
      if (POPUP_CONFIG.showMode === 'always') return true;
      if (POPUP_CONFIG.showMode === 'oncePerSession') return !sessionStorage.getItem(storageKey);
      return true; // fallback
    }
    function markShown() {
      if (POPUP_CONFIG.showMode === 'oncePerSession') sessionStorage.setItem(storageKey, '1');
    }

    // sterowanie popupem
    var overlay  = popup.querySelector('.overlay');
    var card     = popup.querySelector('.popup-card');
    var closeBtn = popup.querySelector('.popup-close');

    function openPopup() {
      popup.classList.remove('d-none');
      document.body.classList.add('modal-open');
      markShown();
    }
    function closePopup() {
      popup.classList.add('d-none');
      document.body.classList.remove('modal-open');
    }

    if (shouldShow()) {
      setTimeout(openPopup, Math.max(0, POPUP_CONFIG.delaySec | 0) * 1000);
    }

    // zamykanie - tło, X, klawisz ESC
    overlay.addEventListener('click', closePopup);
    card.addEventListener('click', function (e) { e.stopPropagation(); });
    closeBtn.addEventListener('click', closePopup);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePopup(); });
  });
</script>
<!-- ===== /POPUP ===== -->

Najczęstsze pytania

Pop-up nie pojawia się ponownie podczas testów
- Otwórz stronę w trybie prywatnym.
- Zamknij kartę i otwórz stronę w nowej karcie.
- Albo zmień campaignId na nową wartość - to wymusi wyświetlenie wszystkim użytkownikom jeszcze raz.
Chcę, aby pop-up był zawsze
- Ustaw showMode: 'always'. Pamiętaj, że to może być uciążliwe dla użytkowników - zalecamy rozważne użycie.

Co otrzymujesz

Pop-up otwiera się po 3 sekundach.
W środku jest grafika i link prowadzący do wybranej strony.
Zamknięcie działa po kliknięciu w tło, w krzyżyk X lub klawisz ESC.
Domyślnie pop-up pokazuje się użytkownikowi tylko raz na sesję przeglądarki.

Gdzie wkleić kod

Zaloguj się do panelu.
Wejdź w edycję strony głównej.
Dodaj blok typu „Własny HTML” lub „Custom HTML” w sekcji treści strony. Jeśli już masz taki blok, otwórz go do edycji.
Skopiuj cały kod z sekcji „Kod do skopiowania” i wklej do tego bloku. Kod musi znaleźć się wewnątrz elementu <body>.
Zapisz zmiany i odśwież stronę główną w nowej karcie.

Alert
Jeśli nie widzisz od razu efektu, odczekaj 3 sekundy od załadowania strony. Tryb „raz na sesję” może sprawić, że pop-up nie pokaże się drugi raz w tej samej karcie. Jak testować bez nerwów - patrz sekcja „Testowanie”.

Co trzeba zmienić po wklejeniu

W kodzie znajdziesz blok z napisem KONFIGURACJA - EDYTUJ TYLKO TE 5 LINII.
Najszybciej go znajdziesz skrótem klawiaturowym:
- Windows - Ctrl+F
- macOS - Command+F
  Wpisz: POPUP_CONFIG

Zmień 2 wartości:

imageUrl - adres Twojej grafiki.
linkUrl - adres strony, na którą ma prowadzić kliknięcie.

Reszty nie ruszaj, chyba że czytasz sekcję „Zaawansowane ustawienia”.

Rekomendacje dla grafiki

Rekomendowany rozmiar - 1080x1080 px.
Dopuszczalne są inne proporcje - kod niczego nie przycina, skaluje obraz w dół tak, aby całość zmieściła się w oknie.
Pop-up nigdy nie będzie wyższy niż 90 procent wysokości ekranu i nie będzie szerszy niż 92 procent szerokości ekranu.
Waga pliku - najlepiej 200 do 400 kB. Format JPG lub WebP.

Testowanie

Najszybsza metoda - otwórz stronę w trybie prywatnym:
- Chrome - Nowe okno incognito
- Firefox - Nowe okno prywatne
- Edge - Nowe okno InPrivate
Alternatywa - zamknij kartę ze stroną i otwórz ją ponownie. Tryb „raz na sesję” liczy sesję na poziomie karty.
Gdy zmienisz treść pop-upa i chcesz, aby pojawił się ponownie wszystkim użytkownikom - zmień campaignId na nową nazwę, na przykład example-campaign-002.

Zaawansowane ustawienia

delaySec - opóźnienie wyświetlenia w sekundach.
- Domyślnie 3. Możesz wpisać inną liczbę całkowitą, np. 5.
showMode
- 'oncePerSession' - użytkownik zobaczy pop-up raz na sesję w danej karcie przeglądarki. Pokazuje się ponownie po zamknięciu karty i ponownym wejściu na stronę.
- 'always' - pop-up pokazuje się przy każdym wejściu na stronę po odczekaniu delaySec.
enabled
- true - pop-up jest włączony.
- false - pop-up jest całkowicie wyłączony i nie będzie się wyświetlał.

Kod do skopiowania

Zmieniasz tylko wartości w sekcji POPUP_CONFIG. Komentarze w kodzie prowadzą krok po kroku.

<!-- ===== POPUP no-crop version ===== -->
<style>
  /* blokada scrolla kiedy popup jest otwarty */
  body.modal-open { overflow: hidden; }

  /* tło popupa */
  #site-popup .overlay { background: rgba(0,0,0,.6); z-index: 999999999; }

  /* pudełko popupa - dopasowane do grafiki, ale ograniczone ekranem */
  .popup-card {
    display: inline-block; background: #fff; border-radius: 14px; border: 0; padding: 0;
    max-height: 90vh; /* nigdy wyżej niż 90% ekranu */
    max-width: 92vw;  /* nigdy szerzej niż 92% ekranu */
    position: relative;
  }

  /* obrazek - zero przycinania, tylko skalowanie w dół do limitów */
  .popup-media {
    display: block; width: auto; height: auto;
    max-width: 92vw; max-height: 90vh; border-radius: 12px;
  }

  /* przycisk zamknięcia */
  .popup-close {
    position: absolute; top: 8px; right: 12px; font-size: 28px; line-height: 1;
    color: #000; opacity: .8; background: rgba(255,255,255,.9);
    border: 0; border-radius: 20px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
</style>

<!-- markup popupa -->
<div id="site-popup" class="d-none">
  <div class="overlay position-fixed fixed-top w-100 h-100 d-flex align-items-center justify-content-center">
    <div class="card popup-card shadow-lg" role="dialog" aria-modal="true">
      <button type="button" class="popup-close" aria-label="Close">×</button>
      <!-- link - po kliknięciu w obrazek -->
      <a id="popup-link" href="#" class="d-block" rel="noopener">
        <img id="popup-image" class="popup-media" src="" alt="Promocja">
      </a>
    </div>
  </div>
</div>

<script>
  /* ===== KONFIGURACJA - EDYTUJ TYLKO TE 5 LINII =====
   * enabled - włącznik globalny
   * linkUrl - adres, na który prowadzi kliknięcie
   * imageUrl - adres grafiki
   * delaySec - opóźnienie w sekundach
   * showMode - 'oncePerSession' lub 'always'
   * campaignId - zmień, aby wymusić ponowne wyświetlenie po zmianach
   */
  const POPUP_CONFIG = {
    enabled: true,
    linkUrl: 'https://sportigio.com',
    imageUrl: 'https://placehold.co/1080x1080',
    delaySec: 3,                        // domyślnie 3 sekundy
    showMode: 'oncePerSession',         // zaawansowane - patrz sekcja „Zaawansowane ustawienia”
    campaignId: 'example-campaign-001'
  };
  /* ========== KONIEC KONFIGURACJI ========== */

  document.addEventListener('DOMContentLoaded', function () {
    if (!POPUP_CONFIG.enabled) return;

    var popup = document.getElementById('site-popup');
    if (!popup) return;

    // podstawienie linku i obrazka
    var link = document.getElementById('popup-link');
    var img  = document.getElementById('popup-image');
    if (link) link.href = POPUP_CONFIG.linkUrl || '#';
    if (img)  img.src   = POPUP_CONFIG.imageUrl || '';

    // klucz pamięci - żeby nie zasypywać usera popupami
    var storageKey = 'sitePopup:' + (POPUP_CONFIG.campaignId || 'default');

    // logika częstotliwości
    function shouldShow() {
      if (POPUP_CONFIG.showMode === 'always') return true;
      if (POPUP_CONFIG.showMode === 'oncePerSession') return !sessionStorage.getItem(storageKey);
      return true; // fallback
    }
    function markShown() {
      if (POPUP_CONFIG.showMode === 'oncePerSession') sessionStorage.setItem(storageKey, '1');
    }

    // sterowanie popupem
    var overlay  = popup.querySelector('.overlay');
    var card     = popup.querySelector('.popup-card');
    var closeBtn = popup.querySelector('.popup-close');

    function openPopup() {
      popup.classList.remove('d-none');
      document.body.classList.add('modal-open');
      markShown();
    }
    function closePopup() {
      popup.classList.add('d-none');
      document.body.classList.remove('modal-open');
    }

    if (shouldShow()) {
      setTimeout(openPopup, Math.max(0, POPUP_CONFIG.delaySec | 0) * 1000);
    }

    // zamykanie - tło, X, klawisz ESC
    overlay.addEventListener('click', closePopup);
    card.addEventListener('click', function (e) { e.stopPropagation(); });
    closeBtn.addEventListener('click', closePopup);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePopup(); });
  });
</script>
<!-- ===== /POPUP ===== -->

Najczęstsze pytania

Pop-up nie pojawia się ponownie podczas testów
- Otwórz stronę w trybie prywatnym.
- Zamknij kartę i otwórz stronę w nowej karcie.
- Albo zmień campaignId na nową wartość - to wymusi wyświetlenie wszystkim użytkownikom jeszcze raz.
Chcę, aby pop-up był zawsze
- Ustaw showMode: 'always'. Pamiętaj, że to może być uciążliwe dla użytkowników - zalecamy rozważne użycie.

Baza wiedzy

Jak dodać pop-up na stronie głównej

Wstawisz pop-up ze zdjęciem i linkiem. Działa na komputerach i telefonach, nie przycina grafiki, nie przekracza 90 procent wysokości ekranu.

Co otrzymujesz

Gdzie wkleić kod

Co trzeba zmienić po wklejeniu

Rekomendacje dla grafiki

Testowanie

Zaawansowane ustawienia

Kod do skopiowania

Najczęstsze pytania

Baza wiedzy

Jak dodać pop-up na stronie głównej

Wstawisz pop-up ze zdjęciem i linkiem. Działa na komputerach i telefonach, nie przycina grafiki, nie przekracza 90 procent wysokości ekranu.

Co otrzymujesz

Gdzie wkleić kod

Co trzeba zmienić po wklejeniu

Rekomendacje dla grafiki

Testowanie

Zaawansowane ustawienia

Kod do skopiowania

Najczęstsze pytania