> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 📢 Wyjaśnienie typów pasków ogłoszeń > ℹ️ **Note:** Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia. Hoppy Announcement Bar oferuje cztery różne sposoby wyświetlania komunikatów w Twoim sklepie. Każdy typ zachowuje się inaczej, obsługuje różne konfiguracje treści i został zaprojektowany z myślą o określonych zastosowaniach. Wybór odpowiedniego typu na wczesnym etapie konfiguracji pozwala uniknąć ponownej pracy i zapewnia, że ogłoszenie będzie się zachowywać dokładnie tak, jak oczekujesz, w sklepie na żywo. --- # **⚠️ Zanim zaczniesz** Typ ogłoszenia wybiera się w zakładce **Content** (Zawartość) podczas tworzenia lub edycji ogłoszenia. Możesz zmieniać typy w dowolnym momencie, ale pamiętaj, że: * Niektóre pola pojawią się lub znikną w zależności od wybranego typu * Elementy treści mogą zostać przycięte lub rozszerzone podczas przełączania się między niektórymi typami * Ustawienia projektu i umiejscowienia pozostają wspólne dla wszystkich typów ℹ️ Typ ogłoszenia **nie** jest tym samym co umiejscowienie. Umiejscowienie określa *gdzie* pasek się pojawia. Typ określa *jak* pasek się zachowuje. --- # **📋 Cztery typy ogłoszeń** --- ## **1️⃣ Simple Announcement** Typ **Simple** (Prosty) wyświetla pojedynczy, statyczny komunikat. To najczęściej używany format, ponieważ jest prosty i sprawdza się w prawie każdym zastosowaniu. ### **Co robi** * Wyświetla jedno ogłoszenie z tytułem, podtytułem i opcjonalnym wezwaniem do działania * Pozostaje statyczny na stronie, dopóki klient jej nie opuści lub nie zamknie paska * Obsługuje wszystkie typy CTA: przycisk, kliknięcie w cały pasek, kupon, zdarzenie wyzwalające lub brak CTA ### **Dostępne pola treści** * **Title** (Tytuł) — Główny komunikat. Obsługuje formatowanie tekstu. * **Subheading** (Podtytuł) — Druga linia pod tytułem. * **Call to action type** (Typ wezwania do działania) — Wybierz, jak klienci będą wchodzić w interakcję z paskiem. ### **Zachowanie CTA** | **CTA Type** (Typ CTA) | Zachowanie | | ----- | ----- | | **No call to action** | Tylko komunikat, bez klikalnych elementów. | | **Button** | Samodzielny przycisk prowadzący do dowolnego adresu URL. | | **Make entire bar clickable** | Cały pasek staje się linkiem. Kliknięcie w dowolne miejsce przekierowuje do skonfigurowanego adresu URL. | | **Coupon** | Wyświetla kod kuponu z opcjonalnym przyciskiem kopiowania do schowka. | | **Trigger App Event** | Wysyła niestandardowe zdarzenie, które mogą nasłuchiwać inne aplikacje. Przydatne do otwierania okien modalnych lub wyzwalania przepływów pracy. | ℹ️ Gdy wybrany jest **Trigger App Event**, pojawia się dodatkowe pole **Trigger ID** (ID wyzwalacza). Ten identyfikator musi być zgodny z nazwą zdarzenia skonfigurowaną w aplikacji odbierającej. ### **Najlepiej sprawdza się w** * Ogłoszeniach o wyprzedażach w całym sklepie * Aktualizacjach polityki wysyłki * Ofertach ograniczonych czasowo * Ogólnych promocjach --- ## **2️⃣ Running Line Announcement** Typ **Running** (Bieżący) tworzy ciągły, przesuwający się poziomo pasek informacyjny — podobny do wiadomościowych napisów bieżących. Tekst tytułu animuje się przez cały pasek w pętli. ### **Co robi** * Wyświetla jeden tytuł w płynnym, nieskończonym przewijaniu * Kierunek i prędkość są w pełni konfigurowalne * Pole podtytułu jest ukryte, ponieważ format opiera się na pojedynczej przewijającej się linii ### **Dostępne pola treści** * **Title** (Tytuł) — Komunikat, który przewija się przez pasek. Obsługuje formatowanie tekstu. * **Animation speed** (Szybkość animacji) — Suwak od **1 do 80** kontrolujący szybkość przesuwania się tekstu. * **Run left to right** (Kierunek od lewej do prawej) — Pole wyboru, które odwraca domyślny kierunek przewijania. ### **Jak działa szybkość animacji** * Niższe wartości \= wolniejsze, bardziej czytelne przewijanie * Wyższe wartości \= szybszy ruch paska bieżącego * Szybkość jest obliczana dynamicznie na podstawie długości tekstu tytułu ### **Zachowanie CTA** Ogłoszenia **Running** obsługują przycisk, kupon, wyzwalacz i brak CTA. Opcja **Make entire bar clickable** (Klikalny cały pasek) owija przewijający się obszar linkiem. Jeśli użyty jest przycisk lub kupon, pojawia się on statycznie obok przewijającego się tekstu. ### **Najlepiej sprawdza się w** * Alertach o szybkich wyprzedażach * Pilnych terminach wysyłki * Powtarzalnych sloganach marki * Przypomnieniach zależnych od czasu ⚠️ **Ważne:** Paski bieżące najlepiej działają z krótszymi tytułami. Bardzo długie komunikaty mogą powodować nierównomierne tempo przewijania na mniejszych ekranach. --- ## **3️⃣ Multiple Rotating Announcements** Typ **Multiple** (Wielokrotny) pozwala na umieszczenie kilku ogłoszeń w jednym pasku, który automatycznie się przez nie przewija. Klienci widzą jeden komunikat na raz, ze strzałkami nawigacyjnymi do ręcznego przeglądania. ### **Co robi** * Przewija się przez kolejne slajdy ogłoszeń * Każdy slajd ma własny tytuł, podtytuł i CTA * Automatycznie przechodzi dalej na podstawie konfigurowalnego czasu wyświetlania * Zawiera nawigację strzałkami w lewo/w prawo ### **Dostępne pola treści** * **Announcement display duration** (Czas wyświetlania ogłoszenia) — Suwak od **1 do 10 sekund** kontrolujący, jak długo każdy slajd pozostaje widoczny przed automatycznym przejściem. * **Announcement \#1, \#2, \#3...** (Ogłoszenie nr 1, 2, 3...) — Każdy slajd to niezależny blok treści z własnym tytułem, podtytułem i CTA. * **Add new announcement** (Dodaj nowe ogłoszenie) — Dodaje kolejne slajdy. ### **Limity slajdów** * Minimum: **2 slajdy** * Maksimum: **20 slajdów** Możesz zmieniać kolejność slajdów za pomocą strzałek góra/dół i usuwać slajdy, jeśli masz ich więcej niż 2. ### **Zachowanie CTA** Każdy slajd może mieć własne, niezależne CTA. Jeden slajd może mieć przycisk, inny może wyświetlać kupon, a trzeci może w ogóle nie mieć CTA. Obsługiwane typy CTA na slajd: przycisk, kliknięcie w cały pasek, kupon, wyzwalacz lub brak. ### **Efekty animacji** Przejście między slajdami kontroluje ustawienie **Animation** (Animacja) w zakładce **Design** (Wygląd): * **Slide** (Przesunięcie) — Standardowe poziome przejście przesuwne * **Fade** (Zanikanie) — Płynne przejście przez zanikanie między slajdami * **Cube** (Kostka) — Efekt obrotu w 3D * **Flip** (Obrót) — Przejście w stylu obracania karty ### **Najlepiej sprawdza się w** * Prezentowaniu wielu promocji jednocześnie * Ogłaszaniu różnych kategorii produktów * Rotacyjnym wyświetlaniu komunikatów o wysyłce, zwrotach i zaufaniu * Wyróżnianiu kilku kuponów bez zaśmiecania strony --- ## **4️⃣ Email Collection Banner** Typ **Email** (E-mail) zamienia pasek ogłoszeń w formularz zbierania leadów. Wyświetla pole wprowadzania adresu e-mail i przycisk przesyłania, a następnie pokazuje stan sukcesu po przesłaniu. ### **Co robi** * Wyświetla tytuł, podtytuł i pole wprowadzania adresu e-mail * Pokazuje **Success Message** (Komunikat sukcesu) po przesłaniu adresu e-mail przez klienta * Może zawierać kod kuponu jako nagrodę za zapisanie się ### **Dostępne pola treści** * **Title** (Tytuł) — Główny komunikat zachęcający klientów do zapisania się. * **Subheading** (Podtytuł) — Tekst uzupełniający pod tytułem. * **Button text** (Tekst przycisku) — Etykieta przycisku przesyłania. Jeśli pozostanie puste, domyślnie ustawia się *Subscribe* (Zapisz się). * **Success Message** (Komunikat sukcesu) — Tekst potwierdzenia wyświetlany po pomyślnym przesłaniu adresu e-mail. * **Email Placeholder** (Tekst zastępczy e-maila) — Tekst podpowiedzi wewnątrz pustego pola wprowadzania adresu e-mail. ### **Zachowanie CTA** Paski zbierania adresów e-mail obsługują dwa tryby CTA: * **Button** (Przycisk) — Standardowy przycisk przesyłania. Pasek zbiera adres e-mail i pokazuje stan sukcesu. * **Coupon** (Kupon) — Wyświetla kod kuponu obok lub zamiast pola wprowadzania, z opcjonalnym przyciskiem kopiowania. Opcje **Make entire bar clickable** (Klikalny cały pasek) i **Trigger App Event** (Wyzwól zdarzenie aplikacji) nie są dostępne dla tego typu, ponieważ pasek jest zbudowany wokół przesyłania formularza. ### **Podgląd stanu sukcesu** W podglądzie aplikacji zobaczysz dwa stany paska ułożone jeden nad drugim: 1. Aktywny formularz zbierania adresów e-mail 2. Pasek z komunikatem sukcesu W witrynie sklepu na żywo klienci widzą stan sukcesu *dopiero* po przesłaniu swojego adresu e-mail. ### **Najlepiej sprawdza się w** * Budowaniu list mailingowych * Oferowaniu kodów rabatowych w zamian za adresy e-mail * Zapisach na listę oczekujących przed premierą * Promowaniu programów VIP lub lojalnościowych --- # **🔀 Jak wybór typu wpływa na widoczne ustawienia** Wybór typu ogłoszenia dynamicznie zmienia pola wyświetlane w zakładce **Content** (Zawartość). Oto szybka ściąga: ### **Pola według typu** | Pole | Simple | Running | Multiple | Email | | ----- | ----- | ----- | ----- | ----- | | Title | ✅ | ✅ | ✅ | ✅ | | Subheading | ✅ | ❌ | ✅ | ✅ | | Animation speed slider | ❌ | ✅ | ❌ | ❌ | | Display duration slider | ❌ | ❌ | ✅ | ❌ | | Run left to right | ❌ | ✅ | ❌ | ❌ | | Add/remove slides | ❌ | ❌ | ✅ | ❌ | | Button text | ✅ | ✅ | ✅ | ✅ | | Success Message | ❌ | ❌ | ❌ | ✅ | | Email Placeholder | ❌ | ❌ | ❌ | ✅ | | Trigger ID | ✅ | ✅ | ✅ | ❌ | | Coupon code | ✅ | ✅ | ✅ | ✅ | | Copy button toggle | ✅ | ✅ | ✅ | ✅ | ### **Limity elementów treści** * **Simple, Running, Email** — Używany jest tylko **pierwszy** element treści. Nawet jeśli w modelu danych istnieje wiele elementów, renderuje się tylko pierwszy. * **Multiple** — **Wszystkie** elementy treści są używane jako poszczególne slajdy. ⚠️ Jeśli przełączysz się z Multiple na Simple, dodatkowe slajdy zostaną zachowane w tle, ale nie będą wyświetlane. Ponownie pojawią się, gdy wrócisz do Multiple. --- # **🎯 Wyjaśnienie typów wezwań do działania (CTA)** Zachowanie CTA jest w większości spójne we wszystkich typach ogłoszeń, z kilkoma wyjątkami specyficznymi dla typu. ### **No call to action** (Brak wezwania do działania) Pasek ma charakter wyłącznie informacyjny. Nie renderują się żadne przyciski, linki ani klikalne obszary. ### **Button** (Przycisk) Pojawia się klikalny przycisk. Konfigurujesz: * **Button text** (Tekst przycisku) — Co mówi przycisk * **Link** (Link) — Dokąd prowadzi przycisk ### **Make entire bar clickable** (Klikalny cały pasek) Cały obszar ogłoszenia staje się linkiem. Kliknięcie w dowolne miejsce na pasku przekierowuje do skonfigurowanego adresu URL. ℹ️ Jeśli Twój pasek zawiera zagnieżdżone klikalne elementy, takie jak ikony społecznościowe, nadal działają one niezależnie. Kliknięcie w cały pasek nie zastępuje ich. ### **Coupon** (Kupon) Wyświetla sformatowane pole kodu kuponu. Konfigurujesz: * **Coupon Code** (Kod kuponu) — Rzeczywisty kod rabatowy * **Show copy button** (Pokaż przycisk kopiowania) — Dodaje ikonę kopiowania jednym kliknięciem obok kodu ### **Trigger App Event** (Wyzwól zdarzenie aplikacji) Zamiast nawigować do adresu URL, przycisk wysyła zdarzenie CustomEvent przeglądarki. Konfigurujesz: * **Trigger ID** (ID wyzwalacza) — Ciąg znaków nazwy zdarzenia (na przykład, `my-app:open-modal`) Inne aplikacje lub niestandardowe skrypty szablonu nasłuchujące tej nazwy zdarzenia mogą na nie odpowiedzieć. ⚠️ CTA wyzwalające nie są dostępne w paskach zbierania adresów e-mail, ponieważ główną akcją paska jest przesyłanie formularza. --- # **🎨 Zachowanie projektu według typu** Większość ustawień projektu ma zastosowanie uniwersalne, ale niektóre zachowują się inaczej w zależności od typu. ### **Ustawienie Animation (Animacja) w zakładce Design (Wygląd)** * **Simple i Email** — **Animation** (Animacja) kontroluje efekt pojawiania się paska podczas pierwszego ładowania. * **Running** — Szybkość animacji jest kontrolowana w zakładce **Content** (Zawartość), a nie **Design** (Wygląd). * **Multiple** — **Animation** (Animacja) kontroluje efekt przejścia między slajdami (Slide, Fade, Cube, Flip). ### **Social icons** (Ikony społecznościowe) Ikony baneru można dodać do wszystkich typów. Widoczność kontroluje się osobno dla komputerów stacjonarnych i urządzeń mobilnych. * Ikony pojawiają się statycznie obok treści * Każda ikona może prowadzić do adresu URL lub pozostać nieklikalna ### **Close icon** (Ikona zamykania) Wszystkie typy obsługują ikonę zamykania. Po włączeniu możesz skonfigurować: * **Appear again after** (Pokaż ponownie po) — Liczba godzin lub dni, po których pasek ponownie się pojawi dla wracającego klienta Jeśli nie ustawisz czasu ponownego pojawienia się, pasek pozostanie ukryty na stałe po zamknięciu. --- # **📱 Zachowanie na urządzeniach mobilnych** Wszystkie cztery typy ogłoszeń są w pełni responsywne. Jednak dostosowania układu następują automatycznie: * Paski **Email** (E-mail) układają się pionowo na urządzeniach mobilnych — pole wprowadzania i przycisk znajdują się w osobnych liniach * Paski **Multiple** (Wielokrotny) zmniejszają odstępy strzałek i nieco pomniejszają czcionki * Paski **Running** (Bieżący) zachowują prędkość przewijania, ale kompresują rozmiary ikon, jeśli włączone są ikony społecznościowe * Paski **Simple** (Prosty) z przyciskami mogą wyśrodkować tekst na mniejszych ekranach w zależności od typu CTA W razie potrzeby możesz zastąpić wygląd mobilny za pomocą panelu **Custom CSS** (Niestandardowy CSS) w zakładce **Design** (Wygląd). --- # **💡 Przykłady zastosowań** ### **Przykład 1 — Pasek Simple z kuponem** * **Type:** Simple * **Title:** „Letnia wyprzedaż trwa ☀️” * **Subheading:** „Użyj kodu SUNNY, aby otrzymać 20% zniżki” * **CTA:** Coupon * **Coupon code:** SUNNY * **Rezultat:** Czysty, statyczny pasek z kopiowalnym kodem rabatowym. ### **Przykład 2 — Pasek bieżący dla pilności** * **Type:** Running * **Title:** „Darmowa wysyłka kończy się dziś o północy ⏰” * **Animation speed:** 25 * **CTA:** No call to action * **Rezultat:** Ciągle przewijający się komunikat o pilności u góry sklepu. ### **Przykład 3 — Wiele slajdów dla różnych kolekcji** * **Type:** Multiple * **Slide 1:** „Do 50% zniżki na buty →” z przyciskiem linkującym do /collections/shoes * **Slide 2:** „Nowości w akcesoriach →” z przyciskiem linkującym do /collections/accessories * **Slide 3:** „Darmowe zwroty wszystkich zamówień” bez CTA * **Display duration:** 4 sekundy * **Rezultat:** Jeden pasek, który automatycznie przewija się przez trzy różne promocje. ### **Przykład 4 — Zbieranie e-maili z nagrodą w postaci kuponu** * **Type:** Email * **Title:** „Dołącz do listy VIP” * **Subheading:** „Odbierz 15% zniżki na pierwsze zamówienie” * **Button text:** „Odbierz mój kod” * **Success Message:** „Witamy! Twój kod WELCOME15 jest gotowy.” * **Email Placeholder:** „Wpisz swój adres e-mail” * **Rezultat:** Pasek zbierający leady, który nagradza subskrybentów natychmiastowym kuponem. --- # **⚠️ Ważne informacje i ograniczenia** ### **Przełączanie typów** Przełączanie między typami nie usuwa Twojej treści. Jednak: * Przełączenie z Multiple na Simple ukrywa dodatkowe slajdy * Przełączenie z Running na Simple ponownie ujawnia pole podtytułu * Przełączenie na Email ukrywa pola Trigger ID, jeśli zostały wcześniej ustawione Zawsze sprawdzaj swoją treść po zmianie typu. ### **Długość paska bieżącego** Bardzo długie tytuły w paskach bieżących mogą powodować nierównomierne tempo przewijania, szczególnie na urządzeniach mobilnych. Testuj z rzeczywistą długością komunikatu przed opublikowaniem. ### **Minimum slajdów w Multiple** Nie możesz opublikować ogłoszenia Multiple z mniej niż 2 slajdami. Jeśli potrzebujesz tylko jednego komunikatu, użyj zamiast tego typu Simple. ### **Stan sukcesu paska Email** Stan sukcesu pojawia się dopiero po przesłaniu adresu e-mail przez klienta. Podgląd w aplikacji pokazuje oba stany ułożone jeden nad drugim jako informację, ale klienci w sklepie na żywo najpierw widzą formularz. ### **Klikalny cały pasek a zagnieżdżone elementy** Gdy włączona jest opcja **Make entire bar clickable**, klikanie ikon społecznościowych lub przycisku kopiowania nadal działa zgodnie z oczekiwaniami. Kliknięcie w cały pasek ignoruje te zagnieżdżone elementy interaktywne. --- # **🎉 Podsumowanie** Zrozumienie czterech typów pasków ogłoszeń pomaga dopasować odpowiedni format do Twojego celu: ✅ **Simple** (Prosty) — Najlepszy do pojedynczych, statycznych promocji ✅ **Running** (Bieżący) — Najlepszy do komunikatów o pilności i powtarzalnych napisów bieżących ✅ **Multiple** (Wielokrotny) — Najlepszy do rotacji kilku ofert w jednym umiejscowieniu ✅ **Email** (E-mail) — Najlepszy do zbierania leadów i rozbudowywania list subskrybentów Każdy typ obsługuje ten sam system projektu, zasady umiejscowienia, harmonogramowanie i logikę kierowania. Różnica polega wyłącznie na tym, jak treść jest prezentowana i jak można z nią wchodzić w interakcję. Wybór odpowiedniego typu na początku zapewnia, że Twoje ogłoszenie będzie naturalnie wpisywać się w wygląd sklepu i dostarczy właściwą wiadomość we właściwym formacie 🚀