Створюйте індивідуальні банки з наконечниками та цілі

Показуйте різні GIF у міру зростання збору

Використовуйте одну змінену накладку зі смугою цілі й зображенням. Смуга вже обчислює прогрес; зображення має відображати цей самий прогрес, а не рахувати пожертви окремо. Для цього потрібна змінена копія накладки, а не додатковий вбудований параметр.

1. У SSN налаштуйте Скарбничка донатів і лічильник цілі з Плавна смуга цілі, своїм заголовком, ціллю й фільтрами пожертв. Для цієї фіксованої грошової цілі 500 $ залиште Підрахунок Hype Cup вимкненим і вимкніть повторювані або зростаючі цілі. Перед зміною переконайтеся, що початкове посилання працює.
2. Підписка Завантажте та збережіть структуру файлу нижче, щоб створити my-goal.html. Збережіть п'ять GIF поруч із цим файлом, використовуючи назви з таблиці. Розміри полотна мають збігатися, щоб зображення не стрибало й не розтягувалося під час перемикання.
3. Передайте редактору або інструменту ШІ скопійований вихідний код і GIF. Використовуйте інструкції щодо етапів нижче разом із повним запитом для налаштування. Попросіть розмістити одне зображення поруч із наявною смугою.
4. Перевірте змінену копію на кожному етапі, а потім виконайте Сесія та OBS для підключення з початковими налаштуваннями посилання. Додайте об'єднану накладку як одне браузерне джерело OBS.

Назви файлів наведено для прикладу; надайте власні зображення. Ці суми в доларах стосуються фіксованої грошової цілі. Для підрахунку, Hype, повторюваних або зростаючих цілей вибирайте зображення за відсотком, який показує смуга.

Add milestone artwork beside the existing Fluid Goal Bar in my-goal.html.
Use these relative GIF files:
0%: goal-0.gif; 25%: goal-25.gif; 50%: goal-50.gif;
75%: goal-75.gif; 100%: goal-100.gif.

Read the existing getProgressState().percentage from the renderAmount()
update path. Do not add a second donation counter or change goal math.
Select the highest reached threshold. If progress jumps from 20% to 80%,
show goal-75.gif directly. Clamp the artwork selection to 0–100%.
Change img.src only when its selected file changes so ordinary updates
do not restart the GIF. Keep one fixed-size image box with object-fit: contain.
Provide meaningful alternative text and handle a missing image without
hiding or breaking the goal bar.

Update the artwork on first render, donations, manual total changes,
reset, restored totals, and recurring/advancing-goal transitions.
Keep the completion image while a fixed goal remains at or above 100%.
If the configured goal resets or advances, follow its displayed percentage.
Preserve the existing filters, session, password, currency/count/Hype
semantics, persistence, completion rules, and local dependencies.

Use the existing preview mode to test 0, 124, 125, 249, 250, 374,
375, 499, 500, and 600 against a fixed goal of 500. Also test a large
jump, a manual decrease, reset, refresh, and any enabled recurring rules.

Перевірка без зміни реальних сум

Відкрийте змінену копію з параметрами попереднього перегляду нижче. Задавайте startamount значення із запиту й оновлюйте сторінку між перевірками. Попередній перегляд використовує приклади даних і вимикає живі з'єднання, збережені суми та звук.

file:///C:/SSN/social_stream-beta/my-goal.html?preview&style=bar&goal=500&startamount=125

За 125 $ поруч зі смугою, заповненою на 25%, має з'явитися GIF першого етапу. Видаліть preview і тестовий startamount перед використанням реального сеансу з початковими налаштуваннями. Відновлення та скидання сум перевірте окремо в тестовому сеансі, оскільки попередній перегляд не зберігає суми.

Виберіть правильну початкову сторінку

Засіб Tip Jar/Goal Meter може представляти різні показники та стилі tipjar.html. Спочатку налаштуйте заплановану метрику в SSN, а потім збережіть цю згенеровану URL-адресу під час зміни дизайну. Підрахунок балів у цьому голі відрізняється від лічильника глядачів/розмов hype.html.

Завантажте та збережіть структуру файлу

1. Завантажити вихідний файл ZIP і витягніть його. У цих посібниках використовується джерело бета-версії; зберігати файли з одного завантаження разом.
2. Копіювати tipjar.html до my-goal.html поруч з оригіналом. Якщо ви обираєте іншу сторінку чи тему, збережіть її копію в оригінальній папці цього файлу.
3. Відкрийте скопійований HTML і CSS/JS, на який він посилається, у вашому редакторі або інструменті AI. Додайте надані ілюстрації/шрифти до того самого проекту та використовуйте відносні шляхи. Почніть із перевизначення CSS; включити рендерер під час зміни згенерованої розмітки.

Наступні файли допоможуть вам знайти дизайн і поведінку. Це список для читання, а не повний набір залежностей: збережіть витягнуту папку недоторканою, включаючи зображення, шрифти, сценарії та будь-які файли даних.

Підключіть свою копію та відкрийте її в OBS

Запустіть SSN і спершу запрацюйте оригінально згенеровану URL-адресу накладання. The session= значення підключається до цього сеансу SSN; це не назва вашого каналу чи назва цього файлу. Забезпечте роботу SSN, відповідної функції та її джерел даних.

1. Перетягніть відредагований файл HTML у Chrome або Edge. Скопіюйте його адресу з адресного рядка; це починається з file:///.
2. Копіювати все з ? далі у вашому робочому накладеному посиланні SSN і додайте його в кінець цієї адреси файлу. Зберігайте всі налаштування, включаючи сеанс, пароль тощо # закінчення.
3. Відкрийте результат у браузері, а потім установіть OBS джерело браузера URL за тією ж адресою с Локальний файл не позначено. Підберіть вихідні розміри до запланованого проекту.

Для початкового файлу вище локальна адреса виглядає так; ваше фактичне посилання може містити додаткові необхідні параметри:

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

Використовуйте фактичну адресу файлу на вашому комп’ютері. OBS зберігає його разом із джерелом; збережіть завантажену папку в тому ж місці. Після збереження змін дизайну оновіть джерело браузера. The спільний посібник із налаштування містить приклади Mac і додатковий засіб запуску для прапорця «Локальний файл».

Де змінити дизайн

Змініть ілюстрацію jar, кольори заливки, доріжку смуги, мітку цілі, типографіку кількості та анімацію завершення. Почніть із наявних елементів керування стилем і кольором, описаних у цільове керівництво. Для користувацьких ілюстрацій зберігайте ресурси поряд із вашою копією та оновлюйте лише шлях до неї.

Метрика цілі, правила завершення/скидання, наполегливість і підрахунок донорів належать до її поведінки. Зберігайте їх під час зміни презентації. Не конвертуйте необроблені монети, подаровані підписки та долари США в одне число без міток. Зберігайте цифру donoValue дорівнює нулю, коли його надає джерело.

Скопіюйте цю підказку AI

Надайте штучному інтелекту свої скопійовані вихідні файли та еталонні ілюстрації. Замініть деталі в дужках. Зберігайте інструкції з безпеки введення в підказці.

Customize my-goal.html, copied from tipjar.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].

Style this tip jar/goal as [design] for [canvas]. Change artwork, colors, layout, labels, and motion while preserving the chosen metric, amount calculation, source filters, streak handling, persistence, and completion/reset rules. Keep hasDonation display units and donoValue USD semantics. Do not fabricate progress when the feed is empty.

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.

Перевірте цей тип накладання

Спочатку скористайтеся попереднім переглядом або тестовою установкою. The посібник з тестових повідомлень пояснює, як надсилати вигадані корисні дані через SSN; тест, надісланий у ваш робочий сеанс, може запустити наявні автоматизації.

1. Спочатку спробуйте режим попереднього перегляду сторінки (?попередній перегляд із вашими параметрами стилю); видалити попередній перегляд при підключенні реального сеансу.
2. Використовуйте зразки подій підтримки, що відповідають вибраному показнику. Перевірте нуль, частковий прогрес, досягнення цілі та прогрес за межами цілі.
3. Перевірте налаштування скидання/перенесення та оновлення джерела між репетиціями. Перевірте мітки валют, довгі заголовки та будь-який звуковий ефект чи ефект завершення в OBS.

Також запустіть перевірки відтворення вхідних даних проти шляхів рендерингу, які ви змінили. Після збереження редагувань оновлюйте вихідний код веб-переглядача OBS між репетиціями та повторюйте видиму взаємодію. Попередній перегляд у веб-переглядачі не встановлює запис у реальному часі чи поведінку OBS.

Додаткові матеріали: Метрики та елементи керування цілями · Поля пожертвувань · Довідник подій · Усунення несправностей локального налаштування.