Projektuj niestandardowe alerty i kanały zdarzeń

Aby ostatnie alerty były widoczne w OBS lub Streamlabs Desktop, zacznij od ilustrowany przewodnik po wydarzeniach.

Wybierz właściwą stronę startową

Użyj multi-alerts.html w przypadku prezentacji alertów określonych w czasie oraz events.html lub themes/events/index.html , aby wyświetlić listę wydarzeń biegowych. Różnią się sposobem renderowania i zachowaniem kolejki. Zacznij od adresu URL wygenerowanego dla narzędzia, którego już używasz.

Wybierz styl kanału aktywności

Otwórz Kanał aktywności / Wydarzenia → Włącz i dostosuj → Styl kanału, wybierz układ, a następnie skopiuj zaktualizowany link do swojej przeglądarki lub OBS źródła przeglądarki. Otwórz Dostosuj wygląd kanału aby dostosować kolory i odstępy. Pozostaw pole puste, aby użyć domyślnego stylu.

Dodaj te opcje do istniejących events.html?session=YOUR_SESSION_ID połączyć z &. Zachowaj swoją sesję, hasło i opcje połączenia.

• accent, pagebg, cardbg, textcolor i mutedcolor: CSS kolory. Zakoduj kolor szesnastkowy # jako %23 w URL lub pomiń #.
• fontsize=14: rozmiar tekstu, 10–40 pikseli. padding=8, gap=4 i radius=6: dopełnienie wiersza, odstęp między zdarzeniami i promień narożnika, każde 0–40 pikseli.
• noheader ukrywa nagłówek strony; noanimation wyłącza animację wejścia.
• Połącz style z lightmode, transparent, font, googlefont, scale, notime i hidemeta. Tryb przezroczysty zastępuje tło strony; Tła kart pozostają oddzielnie regulowane.

Na przykład dołącz &style=twitch&accent=%23e5b94f&padding=8&fontsize=14 dla gęstszej listy działań ze złotym akcentem.

Wybierz, co ma się pojawiać w kanale aktywności

W sekcji Kanał aktywności / Wydarzenia → Włącz i dostosuj, otwórz Wybierz, które wydarzenia się pojawią lub Zawartość i zachowanie wiersza. Pozostaw elementy sterujące wyłączone i pola puste, aby zachować widok domyślny. Skopiuj zaktualizowany link po ich zmianie. Te elementy sterujące dotyczą tylko tego pliku danych; zwykły czat pozostaje wykluczony.

Każdy wiersz należy do jednej kategorii na podstawie nazwy zdarzenia. Nazwane członkostwo, prezenty i zakupy zachowują swoją kategorię, nawet jeśli zawierają kwotę. Wskazówki z hasDonation i żadna rozpoznana nazwa zdarzenia nie należy do kategorii wiadomości płatnych, włączając Twitch bity DOM. Odznaki członkowskie na zwykłym czacie nie zmieniają go w wydarzenie członkowskie.

Aby uzyskać lepszą kontrolę, użyj filterevents=supersticker,watch_streak aby ukryć dokładne nazwy wydarzeń. Dopasowywanie ignoruje wielkość liter i wykorzystuje istniejące aliasy zdarzeń z kanału; nie przeszukuje tekstu wiadomości. Wykluczenia kategorii i dokładnych nazw łączą się z istniejącymi filtrami dotyczącymi źródła, tylko darowizn, tylko subskrybentów w prezencie i wartości minimalnej. Włączenie kilku filtrów może spowodować pozostawienie żadnych pasujących zdarzeń. Zobacz dokumentację zdarzeń dla ładunków specyficznych dla źródła.

• hidemessage, hidecontentimg, hideplatformicons, hideeventlabels i hideamounts ukryj odpowiednie elementy wiersza. Nie odrzucają zdarzenia ani nie zmieniają treści wysyłanych w ramach funkcji „kliknij, aby wyświetlić”. Wbudowane emotki stanowią część tekstu wiadomości. Kwoty lub nazwy zapisane w tekście wiadomości, metadanych lub szczegółach Hype Train nie są redagowane przez te kontrole.
• nofeature wyłącza funkcję „kliknij, aby” w tym kanale. Nadal można otworzyć szczegóły metadanych.
• hidecategorytag hides only the generic category tag, such as Donation or Event, while keeping the descriptive event label. In the popup, enable Hide category tag w sekcji Zawartość i zachowanie wiersza.
• eventduration=60 usuwa wiersz z tego kanału po 60 sekundach. Puste lub 0 utrzymuje istniejące zachowanie przechowywania; wartości dodatnie mieszczą się w zakresie od 1 do 86 400 sekund. Hype Train aktualizacje restartują swój timer; zakończone pociągi nadal znikają po maksymalnie 30 sekundach. Usunięcie nie powoduje usunięcia zdarzenia wysłanego już do polecanej nakładki.
• hideempty ukrywa wiadomość oczekującą, gdy nie są widoczne żadne zdarzenia.

Pobierz i zachowaj strukturę plików

1. Pobierz źródłowy plik ZIP i wyodrębnij go. Te przewodniki korzystają ze źródła beta; przechowuj pliki z jednego pobrania razem.
2. Kopiuj multi-alerts.html na my-alerts.html obok oryginału. Jeśli wybierzesz inną stronę lub motyw, zachowaj jej kopię w oryginalnym folderze tego pliku.
3. Otwórz skopiowany kod HTML i przywoływany do niego CSS/JS w swoim edytorze lub narzędziu AI. Dodaj dostarczoną grafikę/czcionki do tego samego projektu i użyj ścieżek względnych. Zacznij od zastąpień CSS; dołącz moduł renderujący podczas zmiany wygenerowanych znaczników.

Poniższe pliki pomogą Ci znaleźć projekt i zachowanie. To jest lista do przeczytania, a nie kompletny pakiet zależności: zachowaj wyodrębniony folder w stanie nienaruszonym, łącznie z obrazami, czcionkami, skryptami i wszelkimi plikami danych.

Podłącz swoją kopię i otwórz ją w OBS

Uruchom SSN i najpierw spraw, aby oryginalnie wygenerowany adres URL nakładki zaczął działać. The session= łączy się z tą sesją SSN; to nie jest nazwa Twojego kanału ani nazwa tego pliku. Utrzymuj działanie SSN, odpowiedniej funkcji i jej źródeł danych.

1. Przeciągnij edytowany plik HTML do przeglądarki Chrome lub Edge. Skopiuj jego adres z paska adresu; zaczyna się od file:///.
2. Skopiuj wszystko z ? dalej w działającym łączu nakładki SSN i dodaj go na końcu adresu tego pliku. Zachowaj wszystkie ustawienia, w tym sesję, hasło i inne # zakończenie.
3. Otwórz wynik w przeglądarce, a następnie ustaw źródło przeglądarki OBS URL na ten sam adres z Plik lokalny niezaznaczone. Dopasuj wymiary źródłowe do zamierzonego projektu.

Dla powyższego pliku startowego adres lokalny wygląda następująco; Twój rzeczywisty link może zawierać dodatkowe wymagane opcje:

file:///C:/SSN/social_stream-beta/my-alerts.html?session=YOUR_SESSION

Użyj rzeczywistego adresu pliku na swoim komputerze. OBS zapisuje go ze źródłem; przechowuj pobrany folder w tym samym miejscu. Po zapisaniu zmian w projekcie odśwież źródło przeglądarki. The udostępniony przewodnik konfiguracji zawiera przykłady dla komputerów Mac i opcjonalny program uruchamiający dla pola wyboru Plik lokalny.

Gdzie zmienić projekt

Zmień ramkę alertu, typografię, rozmieszczenie ikon, dekoracje postępu/chronometrażu i ruch. W Multi-Alerts większość układu jest tworzona w formacie multi-alerts.js; uwzględnij go, prosząc sztuczną inteligencję o zmianę struktury. W przypadku izolowanego rozwidlenia skopiuj także ten skrypt i zaktualizuj tylko odwołanie do skopiowanego skryptu HTML.

Zachowaj klasyfikację zdarzeń i filtry. Może korzystać z płatnego czatu hasDonation bez event: "donation"; platformy mają również określone nazwy wydarzeń. Skorzystaj z dokumentację zdarzeń i przewodnik po zgodności , aby wybrać próbki. Zachowaj osobno pierwotną wyświetlaną kwotę i wszelkie numeryczne zastąpienia w USD.

Skopiuj ten monit AI

Przekaż AI skopiowane pliki źródłowe i grafikę referencyjną. Wymień szczegóły w nawiasach. Zachowaj instrukcje dotyczące bezpieczeństwa wprowadzania w wierszu poleceń.

Customize my-alerts.html, copied from multi-alerts.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].

Restyle this [Multi-Alerts / event feed] as [design]. Include the companion JS when changing generated markup. Keep event classification, filters, queues, timing, sound controls, deduplication, and reset behavior. Honor numeric donoValue including zero; display hasDonation in its original unit. Do not collapse distinct event types into a generic donation event.

Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.

Przetestuj ten typ nakładki

Najpierw skorzystaj z podglądu lub konfiguracji testowej. The przewodnik po wiadomościach testowych wyjaśnia, jak wysyłać fikcyjne ładunki poprzez SSN; test przesłany do Twojej sesji produkcyjnej może uruchomić istniejące automatyzacje.

1. Użyj narzędzia wiadomości testowych, aby wysłać konkretną wiadomość dotyczącą obserwowania, subskrypcji, prezentu, najazdu lub płatnej wiadomości obsługiwanej przez Twoje źródło; sprawdź, które pola są faktycznie obecne.
2. Wyślij dwa alerty blisko siebie, aby sprawdzić animacje kolejki i wyjścia. Przetestuj pustą wiadomość z etykietą darowizny i długą nazwą.
3. W przypadku kanałów zdarzeń sprawdź przewijanie, filtrowanie i wszelkie zachowanie funkcji po kliknięciu. Aby uzyskać efekty dźwiękowe, sprawdź źródło dźwięku w OBS oraz obraz.

Uruchom także plik Kontrola renderowania danych wejściowych względem zmienionych ścieżek renderowania. Po zapisaniu zmian odśwież źródło przeglądarki OBS pomiędzy próbami i powtórz widoczną interakcję. Podgląd przeglądarki nie określa przechwytywania na żywo ani zachowania OBS.

Więcej materiałów: Zgodność zdarzeń · Efekty alertów · Ustawienia zdarzeń · Dokumentacja zdarzeń · Rozwiązywanie problemów z konfiguracją lokalną.