Diseña tus propias superposiciones de Social Stream

Crea tu propia superposición en 5 pasos

1. Elige la superposición que quieras cambiar.
2. Descargar el ZIP fuente, descomprímelo y copia el archivo HTML de esa superposición.
3. Edita la copia por tu cuenta o pídeselo a una herramienta de IA.
4. Abre tu copia en OBS con los ajustes de tu sesión SSN añadidos a su dirección.
5. Pruébalo con el disparador real de la superposición.

Elige qué superposición cambiar

Puedes cambiar colores, fuentes, diseño, imágenes y movimiento de una superposición. La archivo HTML es la página. El URL de OBS apunta a ella y añade tu sesión y los ajustes de visualización.

Cada tipo de superposición escucha cosas distintas. Una página de chat, una de mensajes destacados y una encuesta no usan las mismas entradas. Abre la guía de diseño de la que usas:

¿Quieres algo ya preparado? Prueba la Galería de superposiciones o Galería de plantillas. ¿Traes un diseño de chat de StreamElements o Streamlabs? Sigue la guía de importación. Esa exportación incluye sus propios pasos de configuración.

Descargar los archivos

1. Descargar el ZIP del código beta. O abre el repositorio beta y elige Código → Descargar ZIP.
2. Descomprímelo en una carpeta que vayas a conservar, como C:\SSN\social_stream-beta\. No edites dentro del ZIP. No necesitas reinstalar SSN.
3. Busca el archivo de tu superposición (tabla anterior). Haz una copia junto al original, como poll.html → my-poll.html. Para un tema como themes/featured-styles/featured-modern.html, conserva la copia en la misma carpeta.
4. Abre la copia en un editor de texto o código. Guárdala como .html, no .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

Conserva tu enlace de sesión

Inicia SSN, conecta una fuente y comprueba que funcione la superposición original. Luego copia el enlace completo desde la herramienta SSN de esa superposición.

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

El valor después de session= es tu sesión SSN. No es tu canal de YouTube, nombre de Twitch, archivo ni título de encuesta. SSN y la página deben usar la misma sesión y contraseña. Mantén SSN activo: las superposiciones solo reciben datos, no capturan chat.

Si tu copia queda vacía, comprueba primero el enlace original. Algunas páginas solicitan los ajustes que faltan; otras permanecen ocultas o redirigen. Poner la sesión correcta en el enlace evita adivinar.

Abre tu archivo en OBS

Abre el archivo editado directamente desde tu equipo. No necesitas servidor.

1. Arrastra tu copia HTML a Chrome o Edge. Copia su dirección. Empieza por file:///.
2. Del enlace de superposición SSN que funciona, copia todo desde ? en adelante. Pégalo al final de la dirección del archivo. Así conservas sesión, contraseña, ajustes y cualquier fragmento # .
3. Abre esa dirección combinada en el navegador para probarla.
4. En OBS, añade una Fuente de navegador (Browser Source). Deja Archivo local (Local file) sin marcar. Pega la dirección completa en URL y configura el ancho y el alto.

Ejemplo: este enlace de SSN…

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

…se convierte en esto para una copia de encuesta descargada en Windows:

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

En macOS empieza por file:///Users/..., en Linux normalmente file:///home/.... Copiar desde el navegador resuelve por ti los espacios y las barras.

<!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 explica los modos archivo/URL, los tamaños, el CSS personalizado y la actualización en su Referencia de fuente del navegador.

Cambia el diseño o pídeselo a una IA

Prepara tu logotipo, archivos de fuentes, colores de marca, tamaño del lienzo y una referencia visual. Una página web normalmente no puede cargar fuentes ni imágenes desde el disco de otro ordenador.

Aviso de IA

Usa el prompt específico de cada guía de diseño o empieza con este. Da a la IA el archivo copiado y los estilos y scripts que carga.

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.

Evita que el chat entrante se convierta en código

Los nombres, mensajes, títulos, importes y enlaces provienen de espectadores y servicios externos. Trátalos como texto, nunca como código. Límpialos donde el renderizador los coloca en la página.

<!-- 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 página ya tiene un saneador, consérvalo. No añadas otro.
• Para archivos en subcarpetas, corrige las rutas de los scripts.
• No pegues nombres sin tratar en cadenas de atributos ni colores sin tratar en código de estilos. Valida los valores de estilo antes de asignarlos propiedad a propiedad.
• El HTML limpiado tampoco es seguro para ejecutarlo como JavaScript ni para usarlo como instrucción de IA.

Más información: Guía de OWASP sobre destinos seguros y saneamiento de HTML.

Pruébala por partes

Archivos que dar a tu IA

Da a la IA el archivo de la superposición y los CSS/JS que carga, además de estos. La referencia de eventos por sí sola no explica los controles de una encuesta ni el código de diseño de cada superposición.

Solucionar problemas

Corrige primero el problema confirmado más pequeño. Un cambio de estilo no debería necesitar modificar scripts de captura ni añadir campos de evento. Si compartes un fork público, incluye sus recursos y excluye los lanzadores privados.