Concevez vos propres superpositions de flux social

Créer votre superposition en 5 étapes

1. Choisir la superposition que vous souhaitez modifier.
2. Téléchargez le ZIP source, décompressez-le et copiez le fichier HTML de cette superposition.
3. Modifier la copie vous-même, ou demandez-le à un outil d'IA.
4. Ouvrir votre copie dans OBS avec les réglages de votre session SSN ajoutés à son adresse.
5. Tester avec le vrai déclencheur de la superposition.

Choisir la superposition à modifier

Vous pouvez modifier les couleurs, polices, disposition, images et animations d'une superposition. La Fichier HTML est la page. Le URL OBS pointe vers elle et ajoute votre session et les réglages d'affichage.

Chaque type de superposition écoute des données différentes. Une page de chat, une page de messages en avant et un sondage n'utilisent pas les mêmes entrées. Ouvrez le guide du type utilisé :

Vous voulez quelque chose de prêt ? Essayez la Galerie d’incrustations ou Galerie de modèles. Vous importez un habillage de chat StreamElements ou Streamlabs ? Suivez le guide d'importation. Cette exportation possède ses propres étapes de configuration.

Téléchargez les fichiers

1. Télécharger le ZIP du code bêta. Ou ouvrez le dépôt bêta et choisissez Code → Télécharger le code postal.
2. Décompressez-le dans un dossier que vous conserverez, comme C:\SSN\social_stream-beta\. Ne modifiez pas dans le ZIP. Il n'est pas nécessaire de réinstaller SSN.
3. Trouvez le fichier de votre superposition (tableau ci-dessus). Faites une copie à côté de l'original, comme poll.html → my-poll.html. Pour un thème comme themes/featured-styles/featured-modern.html, gardez la copie dans le même dossier.
4. Ouvrez la copie dans un éditeur de texte ou de code. Enregistrez-la en .html, non .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

Garder votre lien de session

Lancez SSN, connectez une source et vérifiez la superposition originale. Copiez ensuite le lien complet depuis l'outil SSN de cette superposition.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

La valeur après session= est votre session SSN. Ce n'est pas votre chaîne YouTube, nom Twitch, nom de fichier ou titre de sondage. SSN et la page doivent utiliser la même session et le même mot de passe. Gardez SSN actif : les superpositions reçoivent seulement les données, elles ne capturent pas le chat.

Si votre copie reste vide, vérifiez d'abord le lien original. Certaines pages demandent les réglages manquants ; d'autres restent masquées ou redirigent. Mettre la bonne session dans le lien évite les suppositions.

Ouvrir votre fichier dans OBS

Ouvrez le fichier modifié directement depuis votre ordinateur. Aucun serveur nécessaire.

1. Glissez votre copie HTML dans Chrome ou Edge. Copiez son adresse. Elle commence par file:///.
2. Depuis votre lien de superposition SSN fonctionnel, copiez tout à partir de ? et tout ce qui suit. Collez-le à la fin de l'adresse du fichier. Cela conserve session, mot de passe, réglages et tout fragment # .
3. Ouvrez cette adresse combinée dans votre navigateur pour la tester.
4. Dans OBS, ajoutez une Source navigateur. Laissez Fichier local décoché. Collez l'adresse complète dans URL et définissez la largeur et la hauteur.

Exemple : ce lien SSN…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…devient ceci pour une copie de sondage téléchargée sous Windows :

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Sous macOS, elle commence par file:///Users/..., sous Linux généralement file:///home/.... Copier depuis le navigateur gère les espaces et les barres obliques pour vous.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS explique les modes fichier/URL, les dimensions, le CSS personnalisé et l'actualisation dans sa Référence de la source du navigateur.

Modifier le design ou le demander à l'IA

Préparez votre logo, fichiers de police, couleurs, dimensions du canevas et une référence visuelle. Une page web ne peut généralement pas charger des polices ou images depuis le disque d'un autre ordinateur.

Invite IA

Utilisez le prompt propre à chaque guide de design ou commencez avec celui-ci. Donnez à l'IA le fichier copié et les styles et scripts chargés.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

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 and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

Empêcher le chat entrant de devenir du code

Noms, messages, titres, montants et liens viennent de spectateurs et de services externes. Traitez-les comme du texte, jamais comme du code. Nettoyez-les là où le moteur de rendu les place sur la page.

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• Si la page possède déjà un assainisseur, gardez-le. N'en ajoutez pas un second.
• Pour les fichiers dans des sous-dossiers, corrigez les chemins des scripts.
• N'insérez pas de noms bruts dans des chaînes d'attributs ni de couleurs brutes dans le balisage de style. Validez les valeurs de style avant de les affecter propriété par propriété.
• Le HTML nettoyé ne peut toujours pas être exécuté comme JavaScript ou utilisé comme instruction pour l'IA en toute sécurité.

Pour en savoir plus : Guide OWASP des points d'insertion sûrs et de l'assainissement HTML.

Tester une partie à la fois

Fichiers à fournir à votre IA

Fournissez à l'IA le fichier de la superposition et les CSS/JS chargés, ainsi que ceux-ci. La référence des événements seule n'explique pas les commandes d'un sondage ni le code de disposition de chaque superposition.

Résoudre les problèmes

Corrigez d'abord le plus petit problème confirmé. Un changement de style ne devrait pas nécessiter de modifier les scripts de capture ou d'ajouter des champs d'événement. Si vous partagez un fork public, incluez ses ressources et excluez les lanceurs privés.