Concevoir des pots de conseils et des objectifs personnalisés

Afficher un GIF différent à mesure que la collecte progresse

Utilisez un seul overlay personnalisé contenant la barre et vos illustrations. La barre calcule déjà la progression ; les illustrations doivent la suivre plutôt que compter les dons séparément. Cette recette nécessite une copie modifiée de l'overlay, pas un réglage intégré supplémentaire.

1. Dans SSN, configurez Tirelire et jauge d'objectif avec Barre d’objectif fluide (Fluid Goal Bar), votre titre, l'objectif et les filtres de dons. Pour cet objectif monétaire fixe de 500 $, laissez Score Hype Cup (Hype Cup Scoring) désactivé et désactivez les objectifs récurrents ou croissants. Faites fonctionner le lien d'origine avant de le personnaliser.
2. Suivi Téléchargez et conservez la structure du fichier ci-dessous pour créer my-goal.html. Enregistrez vos cinq GIF à côté de ce fichier avec les noms du tableau. Utilisez des canevas de même taille pour éviter que l'illustration saute ou s'étire au changement.
3. Fournissez à votre éditeur ou outil d'IA le code copié et les GIF. Utilisez les instructions de jalons ci-dessous avec la consigne complète de personnalisation. Demandez une image à côté de la barre existante.
4. Prévisualisez la copie modifiée à chaque jalon, puis suivez Séance et OBS pour la connecter avec les paramètres de votre lien d'origine. Ajoutez l'overlay combiné comme une seule source navigateur OBS.

Les noms de fichiers sont des exemples : fournissez vos propres illustrations. Ces montants en dollars concernent cet objectif monétaire fixe. Pour les objectifs de comptage, Hype, récurrents ou croissants, sélectionnez l'image d'après le pourcentage affiché par la barre.

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.

Répéter sans changer les totaux réels

Ouvrez votre copie modifiée avec les paramètres d'aperçu ci-dessous. Changez startamount aux valeurs de la consigne et actualisez entre les vérifications. L'aperçu utilise des données d'exemple et désactive les connexions en direct, les totaux enregistrés et le son.

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

À 125 $, le GIF du premier jalon doit apparaître à côté d'une barre remplie à 25 %. Retirez preview et le paramètre de répétition startamount avant d'utiliser votre vraie session et ses paramètres d'origine. Vérifiez séparément les totaux restaurés et les réinitialisations dans une session de test, car l'aperçu n'enregistre pas les totaux.

Choisissez la bonne page de démarrage

Le Tip Jar / Goal Meter peut présenter différentes métriques et styles à partir du même tipjar.html. Configurez d'abord la métrique prévue dans SSN, puis conservez cette URL générée lors de la modification de la conception. Le score de battage publicitaire dans cet objectif est différent du compteur de spectateurs/bavardeurs dans hype.html.

Téléchargez et conservez la structure du fichier

1. Téléchargez le ZIP source et extrayez-le. Ces guides utilisent la source bêta ; conservez les fichiers d’un téléchargement ensemble.
2. Copier tipjar.html à my-goal.html à côté de l'original. Si vous choisissez une page ou un thème différent, conservez sa copie dans le dossier d'origine de ce fichier.
3. Ouvrez le code HTML copié et son CSS/JS référencé dans votre éditeur ou outil d'IA. Ajoutez les illustrations/polices fournies au même projet et utilisez des chemins relatifs. Commencez par les remplacements CSS ; inclure le moteur de rendu lors de la modification du balisage généré.

Les fichiers suivants vous aident à trouver la conception et le comportement. Il s'agit d'une liste de lecture, pas d'un ensemble de dépendances complet : conservez le dossier extrait intact, y compris les images, les polices, les scripts et tous les fichiers de données.

Connectez votre copie et ouvrez-la dans OBS

Démarrez SSN et faites fonctionner en premier l'URL de superposition générée d'origine. Le session= se connecte à cette session SSN ; ce n'est pas le nom de votre chaîne ou le nom de ce fichier. Gardez SSN, la fonctionnalité concernée et ses sources de données en cours d'exécution.

1. Faites glisser votre fichier HTML modifié vers Chrome ou Edge. Copiez son adresse depuis la barre d'adresse ; ça commence par file:///.
2. Copiez tout depuis ? dans votre lien de superposition SSN de travail et ajoutez-le à la fin de cette adresse de fichier. Conservez tous les paramètres, y compris la session, le mot de passe et tout # fin.
3. Ouvrez le résultat dans un navigateur, puis définissez la source du navigateur OBS. URL à la même adresse avec Fichier local décoché. Faites correspondre les dimensions source à votre conception prévue.

Pour le fichier de départ ci-dessus, l'adresse locale ressemble à ceci ; votre lien réel peut contenir des options supplémentaires requises :

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

Utilisez l'adresse réelle du fichier sur votre ordinateur. OBS l'enregistre avec la source ; conservez le dossier téléchargé au même endroit. Après avoir enregistré les modifications de conception, actualisez la source du navigateur. Le guide de configuration partagé inclut des exemples Mac et un lanceur facultatif pour la case à cocher Fichier local.

Où modifier le design

Modifiez l'illustration du pot, les couleurs de remplissage, la piste de barre, l'étiquette d'objectif, la typographie du montant et l'animation d'achèvement. Commencez par les contrôles de style et de couleur existants décrits dans le guide des objectifs. Pour les illustrations personnalisées, conservez les ressources à côté de votre copie et mettez à jour uniquement son chemin référencé.

La métrique de l'objectif, les règles d'achèvement/réinitialisation, la persistance et le comptage des donateurs appartiennent à son comportement. Conservez-les tout en changeant de présentation. Ne convertissez pas les pièces brutes, les abonnements offerts et les USD en un seul numéro sans étiquette. Conserver un chiffre donoValue de zéro lorsque la source le fournit.

Copiez cette invite AI

Donnez à l'IA vos fichiers sources copiés et vos illustrations de référence. Remplacez les détails entre crochets. Conservez les instructions de sécurité de saisie dans l’invite.

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.

Testez ce type de superposition

Utilisez d'abord une configuration d'aperçu ou de test. Le guide des messages de test explique comment envoyer des charges utiles fictives via SSN ; un test soumis à votre session de production peut déclencher ses automatisations existantes.

1. Essayez d'abord le mode aperçu de la page (?preview avec vos options de style) ; supprimer l'aperçu lors de la connexion de la session réelle.
2. Utilisez des exemples d'événements de support correspondant à la métrique choisie. Vérifiez zéro, les progrès partiels, l'objectif atteint et les progrès au-delà de l'objectif.
3. Vérifiez les paramètres de réinitialisation/report et une actualisation de la source entre les répétitions. Inspectez les étiquettes de devises, les titres longs et tout effet sonore ou de complétion dans OBS.

Exécutez également le vérifications du rendu des entrées par rapport aux chemins de rendu que vous avez modifiés. Après avoir enregistré les modifications, actualisez la source du navigateur OBS entre les répétitions et répétez l'interaction visible. Les aperçus du navigateur n'établissent pas de capture en direct ni de comportement OBS.

Autres références : Métriques et contrôles d'objectifs · Champs de don · Référence des événements · Dépannage de la configuration locale.