Özel uç kavanozları ve hedefleri tasarlayın

Bağış kampanyanız ilerledikçe farklı bir GIF gösterin

Hedef çubuğunu ve görselinizi içeren tek bir özel katman kullanın. Çubuk ilerlemeyi zaten hesaplar; görsel bağışları ayrıca saymak yerine aynı ilerlemeyi izlemelidir. Bu yöntem, ek bir yerleşik ayar değil, katmanın düzenlenmiş bir kopyasını gerektirir.

1. SSN'de şunu yapılandırın: Bağış Kavanozu ve Hedef Göstergesi şununla: Akışkan Hedef Çubuğu, başlığınız, hedefiniz ve bağış filtrelerinizle yapılandırın. Bu sabit 500 dolarlık para hedefi için Hype Kupası Puanlaması kapalı olsun ve yinelenen veya artan hedefleri devre dışı bırakın. Özelleştirmeden önce asıl bağlantının çalıştığından emin olun.
2. Takip Dosya yapısını indirin ve saklayın aşağıdaki adımlarla şunu oluşturun: my-goal.html. Beş GIF'inizi tablodaki adlarla bu dosyanın yanına kaydedin. Görsel değişirken sıçramaması veya esnememesi için aynı tuval boyutlarını kullanın.
3. Düzenleyicinize veya AI aracınıza kopyalanan kaynak dosyalarını ve GIF'leri verin. Şunu kullanın: aşağıdaki aşama talimatları ile birlikte tam özelleştirme istemi. Mevcut çubuğun yanında tek bir görsel isteyin.
4. Düzenlediğiniz kopyayı her aşamada önizleyin, ardından şu adımları izleyin: Oturum ve OBS özgün bağlantı ayarlarınızla bağlamak için. Birleştirilmiş katmanı tek bir OBS Tarayıcı Kaynağı olarak ekleyin.

Dosya adları örnektir; kendi görsellerinizi sağlayın. Bu dolar tutarları sabit para hedefine aittir. Sayı, Hype, yinelenen veya artan hedeflerde görseli çubuğun gösterdiği yüzdeye göre seçin.

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.

Canlı toplamları değiştirmeden prova yapın

Düzenlediğiniz kopyayı aşağıdaki önizleme ayarlarıyla açın. Şunu değiştirin: startamount istemdeki değerlere ayarlayın ve kontroller arasında yenileyin. Önizleme örnek veriler kullanır; canlı bağlantıları, kayıtlı toplamları ve sesi devre dışı bırakır.

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

125 dolarda ilk aşama GIF'i, %25 dolu çubuğun yanında görünmelidir. Şunu kaldırın: preview ve prova için kullanılan startamount gerçek oturumunuzu ve özgün ayarlarını kullanmadan önce kaldırın. Önizleme toplamları kaydetmediğinden geri yüklenen toplamları ve sıfırlamaları ayrı bir test oturumunda kontrol edin.

Doğru başlangıç sayfasını seçin

İpucu Kavanozu/Hedef Ölçer aynı kaynaktan farklı metrikler ve stiller sunabilir. tipjar.html. Öncelikle amaçlanan metriği SSN'de yapılandırın, ardından tasarımı değiştirirken oluşturulan URL'yi koruyun. Bu goldeki abartılı puanlama, şu anki izleyici/sohbet sayacından farklı hype.html.

Dosya yapısını indirin ve saklayın

1. Kaynak ZIP'i indirin ve onu çıkarın. Bu kılavuzlar beta kaynağını kullanır; tek bir indirmedeki dosyaları bir arada tutun.
2. Kopyala tipjar.html şu değere: my-goal.html orijinalin yanında. Farklı bir sayfa veya tema seçiyorsanız kopyasını o dosyanın orijinal klasöründe saklayın.
3. Kopyalanan HTML'yi ve onun referans verdiği CSS/JS'yi düzenleyicinizde veya AI aracınızda açın. Sağlanan çizimleri/yazı tiplerini aynı projeye ekleyin ve ilgili yolları kullanın. CSS geçersiz kılmalarıyla başlayın; oluşturulan işaretlemeyi değiştirirken oluşturucuyu dahil edin.

Aşağıdaki dosyalar tasarımı ve davranışı bulmanıza yardımcı olur. Bu bir okuma listesidir, tam bir bağımlılık paketi değildir: resimler, yazı tipleri, komut dosyaları ve tüm veri dosyaları dahil olmak üzere çıkartılan klasörü olduğu gibi tutun.

Kopyanızı bağlayın ve OBS'de açın

SSN'yi başlatın ve ilk olarak orijinal oluşturulan yer paylaşımı URL'sinin çalışmasını sağlayın. session= değeri bu SSN oturumuna bağlanır; bu sizin kanal adınız veya bu dosyanın adı değil. SSN'yi, ilgili özelliği ve veri kaynaklarını çalışır durumda tutun.

1. Düzenlenen HTML dosyanızı Chrome veya Edge'e sürükleyin. Adresini adres çubuğundan kopyalayın; ile başlar file:///.
2. Her şeyi kopyala ? çalışan SSN yer paylaşımı bağlantınızda ileriye doğru gidin ve onu bu dosya adresinin sonuna ekleyin. Oturum, parola ve varsa tüm ayarları koruyun # bitiyor.
3. Sonucu bir tarayıcıda açın, ardından bir OBS Tarayıcı Kaynağını ayarlayın. URL ile aynı adrese Yerel dosya işaretli değil. Kaynak boyutlarını amaçlanan tasarımınızla eşleştirin.

Yukarıdaki başlangıç ​​dosyası için yerel adres şuna benzer; gerçek bağlantınız gerekli ek seçenekleri içerebilir:

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

Bilgisayarınızdaki gerçek dosya adresini kullanın. OBS onu kaynakla birlikte kaydeder; İndirilen klasörü aynı yerde tutun. Tasarım değişikliklerini kaydettikten sonra Tarayıcı Kaynağını yenileyin. paylaşılan kurulum kılavuzu , Mac örneklerini ve Yerel dosya onay kutusu için isteğe bağlı bir başlatıcıyı içerir.

Tasarımın nerede değiştirileceği

Kavanoz resmini, dolgu renklerini, çubuk izini, hedef etiketini, miktar tipografisini ve tamamlama animasyonunu değiştirin. bölümünde açıklanan mevcut stil ve renk kontrolleriyle başlayın. hedef kılavuzu. Özel resimler için varlıkları kopyanızın yanında tutun ve yalnızca referans verilen yolu güncelleyin.

Hedefin ölçüsü, tamamlama/sıfırlama kuralları, kalıcılığı ve bağışçı sayımı davranışına aittir. Sunumu değiştirirken bunları saklayın. Ham paraları, hediye abonelikleri ve USD'yi etiketlenmemiş tek bir numaraya dönüştürmeyin. Bir rakamı koru donoValue sıfırdır.

Bu AI istemini kopyalayın

AI'ya kopyaladığınız kaynak dosyalarınızı ve referans çizimlerinizi verin. Parantez içindeki ayrıntıları değiştirin. İstemde giriş güvenliği talimatlarını saklayın.

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.

Bu katman türünü test edin

Önce bir önizleme veya test kurulumu kullanın. test mesajı kılavuzu kurgusal yüklerin SSN aracılığıyla nasıl gönderileceğini açıklıyor; Üretim oturumunuza gönderilen bir test, mevcut otomasyonlarını tetikleyebilir.

1. Önce sayfanın önizleme modunu deneyin (?stil seçeneklerinizle önizleme); gerçek oturuma bağlanırken önizlemeyi kaldırın.
2. Seçilen ölçümle eşleşen örnek destek olaylarını kullanın. Sıfırı, kısmi ilerlemeyi, ulaşılan hedefi ve hedefin ötesindeki ilerlemeyi kontrol edin.
3. Provalar arasında sıfırlama/aktarma ayarlarını ve kaynak yenilemesini kontrol edin. OBS'deki para birimi etiketlerini, uzun başlıkları ve herhangi bir ses veya tamamlama efektini inceleyin.

Ayrıca şunu çalıştırın: girdi oluşturma kontrolleri değiştirdiğiniz işleme yollarına karşı. Düzenlemeleri kaydettikten sonra provalar arasında OBS Tarayıcı Kaynağını yenileyin ve görünür etkileşimi tekrarlayın. Tarayıcı önizlemeleri canlı yakalama veya OBS davranışı oluşturmaz.

Diğer başvuru kaynakları: Metrikler ve hedef kontrolleri · Bağış alanları · Olay referansı · Yerel kurulum sorunlarını giderme.