Создавайте индивидуальные баночки и цели для наконечников.

Показывайте разные GIF по мере роста сбора

Используйте один изменённый оверлей с полосой цели и изображением. Полоса уже рассчитывает прогресс; изображение должно следовать этому же прогрессу, а не считать пожертвования отдельно. Для этого нужна изменённая копия оверлея, а не дополнительный встроенный параметр.

1. В SSN настройте Копилка и индикатор цели с Жидкая полоса цели (Fluid Goal Bar), своим заголовком, целью и фильтрами пожертвований. Для этой фиксированной денежной цели 500 $ оставьте Подсчёт очков чаши хайпа (Hype Cup Scoring) выключенным и отключите повторяющиеся или повышающиеся цели. Перед изменением убедитесь, что исходная ссылка работает.
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 перед использованием реального сеанса с исходными настройками. Восстановление и сброс сумм проверьте отдельно в тестовом сеансе, поскольку предпросмотр не сохраняет суммы.

Выберите правильную стартовую страницу

Банка подсказок/счетчик целей может отображать разные показатели и стили одного и того же. tipjar.html. Сначала настройте предполагаемую метрику в SSN, а затем сохраните этот сгенерированный URL-адрес при изменении дизайна. Оценка хайпа в этой цели отличается от счетчика просмотров/болтовни в hype.html.

Загрузите и сохраните файловую структуру.

1. Загрузите исходный ZIP-файл. и извлеките его. В этих руководствах используется бета-версия; храните файлы из одной загрузки вместе.
2. Копировать tipjar.html на my-goal.html рядом с оригиналом. Если вы выберете другую страницу или тему, сохраните ее копию в исходной папке этого файла.
3. Откройте скопированный HTML и связанный с ним CSS/JS в редакторе или инструменте искусственного интеллекта. Добавьте предоставленные изображения/шрифты в тот же проект и используйте относительные пути. Начните с переопределений CSS; включать рендерер при изменении сгенерированной разметки.

Следующие файлы помогут вам разобраться в конструкции и поведении. Это список для чтения, а не полный пакет зависимостей: сохраните извлеченную папку нетронутой, включая изображения, шрифты, сценарии и любые файлы данных.

Подключите свою копию и откройте ее в OBS.

Запустите SSN и сначала заставьте работать исходный сгенерированный URL-адрес наложения. 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 сохраняет его вместе с исходником; сохраните загруженную папку там же. После сохранения изменений дизайна обновите исходный код браузера. общее руководство по настройке включает примеры для Mac и дополнительную панель запуска для флажка «Локальный файл».

Где изменить дизайн

Измените оформление банки, цвета заливки, дорожку полосы, метку цели, типографику суммы и анимацию завершения. Начните с существующих элементов управления стилем и цветом, описанных в разделе руководство по целям. Для пользовательских иллюстраций храните ресурсы рядом с копией и обновляйте только путь к ней, на который она ссылается.

Метрика цели, правила завершения/сброса, постоянство и подсчет доноров относятся к ее поведению. Сохраняйте их при изменении презентации. Не конвертируйте необработанные монеты, подаренные подписки и доллары США в одно немаркированное число. Сохраните числовое значение 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.

Проверьте этот тип наложения.

Сначала используйте предварительную или тестовую настройку. руководство по тестовому сообщению объясняет, как отправлять вымышленные полезные данные через SSN; тест, отправленный в ваш производственный сеанс, может активировать существующие средства автоматизации.

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

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

Дополнительные материалы: Показатели и контроль целей · Поля для пожертвований · Справочник событий · Устранение неполадок при локальной настройке.