Tu primer widget

Un widget del Estudio es una página web pequeña que OBS carga como fuente de navegador. Escuchas eventos de tus plataformas con el SDK (Widget), los pintas con HTML y CSS, y el Estudio se encarga de validarlo, guardarlo por versiones y darte la URL para OBS.

Los cuatro archivos

• index.html lo que va dentro de <body>
• style.css los estilos
• script.js tu código, con Widget ya disponible
• manifest.json los eventos, los textos y el menú de parámetros

• index.html solo lleva el contenido del <body>. El Estudio lo envuelve en una página completa: enlaza style.css, carga widget.js (el SDK) y después tu script.js.
• style.css es CSS normal. El fondo del widget debe ser transparent para que OBS lo mezcle con la escena.
• script.js es tu código. No hace falta importar nada: Widget existe desde el primer momento y conecta solo con tu Streamer.bot (o con TikFinity, en TikTok) usando los datos de la URL.
• manifest.json declara qué usa el widget: los eventos que escucha, las acciones de Streamer.bot, los textos en cada idioma, los archivos propios y el menú de parámetros. Todo lo que Widget lee sale de aquí; el SDK solo entrega los eventos que declares en events.

Nota

Los widgets sin código (como Alertas) tienen además un diseño que se edita arrastrando. Ese diseño genera una parte de estos mismos archivos: el editor visual y el de código son dos formas de editar lo mismo.

Del editor a OBS

1. Probar. La vista previa del editor está conectada a un simulador de Streamer.bot: disparas un evento desde «Probar» y tu widget lo recibe como si llegara de tu canal. Con «Probar en OBS» pegas una URL temporal en OBS y el mismo evento aparece allí, sin necesitar Streamer.bot.
2. Guardar versión. Valida el borrador. Los errores impiden publicarlo; los avisos no. Se conservan las 40 últimas versiones y puedes restaurar cualquiera al borrador.
3. Publicar. Eliges qué versión sirve tu URL de OBS (por ahora, en privado: solo tú, con tu URL).
4. Configurar. Ahí están tu URL, los parámetros que se guardan con ella y lo que el widget necesita de Streamer.bot. Cambiar un parámetro no crea una versión.
5. OBS. En Fuentes → + → Navegador pegas la URL. Un widget nuevo mide 800 × 600, que es lo que OBS propone por defecto, así que basta con aceptar. En Streamer.bot, activa su servidor WebSocket (por defecto, 127.0.0.1:8080).

Siguientes pasos

• Mira las plantillas con las que puedes empezar.
• Consulta la referencia de Widget y la de cada evento.