Guía · 6 pasos
Cómo añadir un custom widget en StreamElements
Un custom widget es un widget de StreamElements cuyo código aportas tú. Así se entregan la mayoría de los widgets premium cuando no hay instalación en un clic, y se configura en unos cinco minutos.
Respuesta corta
Abre un overlay en StreamElements, haz clic en +, elige Static/Custom › Custom widget, selecciona el widget nuevo y haz clic en Open Editor. Pega el código en las pestañas HTML, CSS, JS y FIELDS, cierra el editor, haz clic en Save y añade la URL del overlay a OBS como fuente de navegador.
Paso a paso
Abre o crea un overlay
En StreamElements, ve a Streaming tools › My overlays. Abre un overlay existente o crea uno nuevo de 1920×1080.
Añade un custom widget
En el editor del overlay, haz clic en + y elige Static/Custom › Custom widget. Aparece un widget de marcador de posición en el lienzo.
Abre el editor de código
Selecciona el widget y haz clic en Open Editor en el panel de la izquierda. El editor tiene cuatro pestañas: HTML, CSS, JS y FIELDS.
Pega el código
Sustituye el contenido de cada pestaña por el archivo correspondiente de tu descarga. Los archivos de código suelen llamarse como la pestaña (por ejemplo widget.html, widget.css, widget.js y fields.json). Pega el archivo de campos en FIELDS; con él se crean los ajustes que podrás cambiar después.
Guarda y colócalo
Cierra el editor y haz clic en Save, en la parte de arriba del editor del overlay. Arrastra el widget y cámbiale el tamaño en el lienzo; después usa sus ajustes en el panel de la izquierda para cambiar textos, colores y opciones.
Muéstralo en OBS
Copia la URL del overlay con el icono de enlace. En el panel Fuentes (Sources), haz clic en +, elige Navegador (Browser), ponle un nombre y haz clic en Aceptar (OK). Pega la URL, pon 1920×1080 y haz clic en Aceptar.
Conviene saber
- La pestaña FIELDS crea los ajustes del widget. Si el panel de ajustes se queda vacío después de pegar, comprueba que el archivo de campos fue a FIELDS y no a JS.
- Pega cada archivo entero en su pestaña. Un widget con el código cortado a medias suele quedarse en blanco.
- Pega solo código de fuentes en las que confíes. El código de un custom widget se ejecuta en tu overlay.
- Para probar alertas o chat, usa Emulate en el editor del overlay.
¿Prefieres no pegar código?
Nuestros packs incluyen un enlace de instalación de StreamElements en un clic que crea el overlay con todos los widgets ya configurados, así que puedes saltarte esto. Los archivos de código siguen en la descarga por si prefieres la instalación manual. Mira cómo instalar un overlay desde un enlace.
