Disposición y fuente de navegador
El último paso: colocar los widgets en la pestaña Diseño de la página Overlay, y llevarlo todo a tu software de streaming.
La página
La página Overlay funciona como la de un widget:
- Estilos generales y Diseño, las pestañas encima del editor, cambian lo que muestra. Estilos generales es el estilo de overlay.
- La columna de la izquierda: en la pestaña Disposición, Lienzo, Posiciones y Colocación de los widgets. Posiciones y Colocación de los widgets abren una segunda columna a su lado: las nueve posiciones, o los widgets.
- La zona principal: los ajustes de la fila elegida.
- Lista de overlays, el panel contra el borde derecho de la ventana: tus overlays, la vista previa del elegido y su URL. La flecha de arriba lo pliega en un riel estrecho. Arrastra su borde izquierdo para ensancharlo, hasta la mitad de la ventana; conserva su ancho.
Varios overlays
Puedes crear varios overlays — uno horizontal y uno vertical, o uno por escena. Cada uno tiene su propia URL, así que cada uno va en su propia fuente de navegador.
El panel Lista de overlays, contra el borde derecho de la ventana, los gestiona:
- Crear un nuevo overlay añade uno, llamado Overlay 2, Overlay 3… Muestra todos los widgets activados.
- El desplegable Overlay elige el que estás editando. Toda la pestaña Disposición, la vista previa y la URL de debajo son de ese overlay.
- Su nombre se edita en el sitio, bajo el desplegable (Overlay sin nombre si está vacío), con el tamaño de su lienzo al lado.
- Duplicar hace una copia — Main overlay (copy) — con la misma disposición y los mismos widgets.
- Eliminar pide confirmación y avisa de que cualquier fuente de navegador que apunte a su URL dejará de funcionar. El último overlay no se puede borrar.
El primer overlay se llama Main overlay.
| Propio de cada overlay | Compartido por todos los overlays |
|---|---|
| Tamaño del lienzo, espaciados, ajustes de las nueve posiciones, widgets que muestra, su posición, su orden y su tamaño, altura de cada barra | Ajustes de los widgets, estilos de los widgets, estilo del overlay (pestaña Estilos generales), conexión |
Qué overlay ejecuta las acciones
Los mensajes de chat, los sonidos, las publicaciones en Discord, los shoutouts y todas las cuentas (objetivos, subathon, Contadores de stream, Contador de espectadores, Primero del chat, Recompensas por actividad, grupos de los créditos) los hace un solo overlay, para que nada se envíe ni se cuente dos veces. Por defecto es el primer overlay.
Con más de un overlay, el recuadro bajo la URL dice cuál:
- En ese: Este overlay ejecuta las acciones — se encarga de los mensajes, sonidos, publicaciones en Discord y cuentas de todos los widgets activados, se muestren aquí o no. Mantén cargada su fuente de navegador: no marques nunca «Apagar la fuente cuando no sea visible».
- En los demás: Solo visualización — Actions run in "Main overlay", con un botón Ejecutar las acciones aquí para pasar ese papel al overlay que estás mirando. Después, vuelve a copiar las URL de los dos overlays.
El overlay que ejecuta las acciones también hace funcionar, sin mostrarlos, todos los widgets activados que no muestra. Un saludo mostrado solo en tu overlay vertical publica igualmente su mensaje una vez, desde el overlay que ejecuta las acciones. El Reproductor de clips, la Lluvia de emotes y gifs y la Cuenta atrás solo muestran: cada overlay que los enseña reproduce los suyos.
Los overlays de solo visualización siguen lo que el overlay que ejecuta las acciones guarda en Streamer.Bot: objetivos, subathon, contadores, espectadores, el Primero del chat, la pausa del relé de chat y la de Encuestas y predicciones. Si borras el overlay que ejecuta las acciones, el papel pasa al primero que quede.
Lienzo
La fila Lienzo reúne el tamaño del overlay y sus espaciados.
Tamaño del lienzo — haz que coincida con el lienzo de tu stream: la resolución base en los ajustes de vídeo de tu software de streaming (en OBS Studio, Ajustes → Vídeo → Resolución base). Cada overlay tiene el suyo.
| Preajuste | Tamaño |
|---|---|
| 4K (3840×2160) | 3840 × 2160 |
| 2K (2560×1440) | 2560 × 1440 |
| 1080p (1920×1080) | 1920 × 1080 |
| 1080p vertical (1080×1920) | 1080 × 1920 |
El valor por defecto es 1080p (1920×1080).
Después, los espaciados:
| Ajuste | Por defecto | Detalle |
|---|---|---|
| Distancia a los bordes | 24 px | Distancia a los bordes del lienzo, a 1080p. De 0 a 200. |
| Espacio entre widgets | 14 px | Entre dos widgets que comparten posición, a 1080p. De 0 a 80. |
Posiciones
El lienzo tiene nueve posiciones, tal como se llaman en pantalla:
| Izquierda | Centro | Derecha | |
|---|---|---|---|
| Arriba | Arriba a la izquierda | Arriba al centro | Arriba a la derecha |
| Medio | En medio a la izquierda | Centro | En medio a la derecha |
| Abajo | Abajo a la izquierda | Abajo al centro | Abajo a la derecha |
Una posición es tan ancha y tan alta como los widgets que contiene, dentro de los límites que fijes. La fila Posiciones abre una columna con las nueve posiciones, cada una con Horizontal o Vertical bajo su nombre. Elige una (queda remarcada en la vista previa) para ajustarla en la zona principal:
| Ajuste | Detalle |
|---|---|
| Horizontal / Vertical | Horizontal: los widgets uno al lado de otro; una fila llena pasa a la línea siguiente, sin salirse nunca de la posición. Vertical: uno debajo de otro. |
| Horizontal | Izquierda, Centro o Derecha: dónde se colocan los widgets a lo ancho de la posición. |
| Vertical | Arriba, Centro o Abajo: dónde se colocan de arriba abajo. |
| Ancho mín. | 0 = as wide as its widgets: tan ancha como sus widgets. |
| Ancho máx. | 0 = up to the canvas edge: hasta el borde del lienzo. |
| Alto mín. | 0 = as tall as its widgets: tan alta como sus widgets. |
| Alto máx. | 0 = up to the canvas edge: hasta el borde del lienzo. |
| Ocultar lo que sobresale | Recorta lo que pasa del tamaño máximo, en lugar de dejar que se desborde. |
Los dos primeros están bajo Alineación de los widgets, los tamaños bajo Ancho y alto. Cada tamaño va en px (a 1080p), en % del lienzo, en em, vw o vh, la unidad elegida junto a su nombre; al cambiar de unidad, el valor se convierte. Por defecto para esta posición devuelve la posición elegida a sus valores por defecto.
Por defecto, cada posición es una columna alineada con su lado y su borde (En medio a la izquierda: a la izquierda, centrada; Abajo al centro: centrada, abajo), de al menos el 30 % del ancho del lienzo. Tres son distintas:
| Posición | Por defecto |
|---|---|
| Arriba a la izquierda | Al menos el 20 % de ancho, como mucho el 48 % del alto del lienzo, desbordamiento oculto. |
| Arriba a la derecha | Una fila, como mucho el 76 % del ancho del lienzo (contadores, espectadores y cuentas atrás uno al lado de otro). |
| Abajo a la derecha | Como mucho 840 px de alto, desbordamiento oculto. |
Barras horizontales
El chat, los objetivos y subathon y el marcador también pueden mostrarse como barra horizontal: una banda a todo lo ancho, arriba o abajo del lienzo. En los ajustes del widget, Horizontal la activa y Vertical la desactiva (el chat: Orientación de los mensajes; los objetivos y subathon: Modo de visualización; el marcador: Orientación) — es el ajuste por defecto en los tres.
Las nueve posiciones se reparten el sitio que dejan las barras, así que una barra nunca tapa otro widget. Varias barras en el mismo borde se apilan en el orden de los widgets. Una barra Centro divide el lienzo en dos: las posiciones de arriba y del medio por encima, las de abajo por debajo. Los widgets a pantalla completa (créditos finales, lluvia de emotes y gifs) siguen cubriendo todo el lienzo.
En la lista Colocación de los widgets, una barra indica Barra superior, Barra central o Barra inferior, y sus ajustes son:
| Ajuste | Detalle |
|---|---|
| Posición | Arriba, Centro o Abajo. |
| Altura | Fijo (por defecto): la banda mantiene su alto muestre lo que muestre el widget, así que las posiciones nunca se mueven. Auto: la banda es tan alta como lo que muestra el widget, y no ocupa sitio mientras no muestra nada (el marcador oculto, un chat vacío): las posiciones usan entonces ese sitio. |
| Alto fijo | Con Fijo: alto de la banda, en px (a 1080p), en % del lienzo, en em, vw o vh, la unidad elegida junto al nombre del campo. |
El aspecto de la barra es el Contenedor del widget, la primera tarjeta de su pestaña Estilo — consulta Apariencia.
Colocación de los widgets
La fila Colocación de los widgets abre una columna con los widgets activados, cada uno con su posición bajo su nombre (si no hay ninguno, la zona principal lo dice y lleva a la página Widgets). El interruptor de cada fila muestra u oculta el widget en este overlay. Arrastra una fila por su asa para cambiar el orden — los widgets de una misma posición se apilan en ese orden. Haz clic en uno para colocarlo en la zona principal; queda resaltado en la vista previa. Un widget a pantalla completa no tiene nada que colocar.
| Ajuste | Por defecto | Detalle |
|---|---|---|
| Posición | según el widget | Una de las nueve posiciones. |
| Ancho | según el widget | Ancho en px (a 1080p), en % del lienzo, en em, vw o vh, la unidad elegida junto al nombre del campo. 0 = the position's width (in a row: as wide as its content): el ancho de la posición (en una fila, el de su contenido). |
| Escala | 100 % | Multiplicador de tamaño. De 50 a 250. |
| Desplazamiento horizontal | 0 px | Desplazamiento fino desde la posición. De -400 a 400. |
| Desplazamiento vertical | 0 px | Desplazamiento fino desde la posición. De -400 a 400. |
Por defecto para este widget devuelve la posición, el ancho, el tamaño y los desplazamientos de un widget a sus valores por defecto, sin tocar los demás.
Las posiciones por defecto:
| Widget | Posición | Ancho |
|---|---|---|
| Chat | Barra inferior, de 50 px de alto (Abajo a la derecha sin la barra) | todo el ancho |
| Primero del chat | Abajo a la derecha | 0 |
| Saludo a los chatters | Abajo a la derecha | 0 |
| Recompensas por actividad | ninguna — no muestra nada | — |
| Lluvia de emotes y gifs | pantalla completa | — |
| Shoutout | Centro | el del reproductor (800 px, en su estilo Fondo) |
| Reproductor de clips | Centro, desactivado | el del reproductor (1280 px, en su estilo Fondo) |
| Alertas | Abajo al centro | 0 |
| Objetivos y subathon | Barra superior, de 100 px de alto (Arriba a la izquierda sin la barra) | todo el ancho (380 px sin la barra) |
| Contadores de stream | Arriba a la derecha | 0 |
| Contador de espectadores | Arriba a la derecha | 0 |
| Encuestas y predicciones | Arriba a la izquierda | 0 |
| Cuenta atrás | Arriba a la derecha | 360 px |
| Créditos finales | pantalla completa | — |
| Webhooks de Discord | ninguna — no muestra nada | — |
Comprobar antes de salir en directo
El panel Lista de overlays muestra el overlay elegido al tamaño de su lienzo. Dos controles ayudan:
- Mostrar las posiciones, encima de la vista previa en la pestaña Disposición, dibuja las nueve guías de posición sobre ella.
- Reproducir eventos de demostración, bajo la vista previa, envía un evento de ejemplo a cada widget que muestra el overlay, para que veas moverse todo el overlay sin esperar a un espectador real. Se vuelve a reproducir al elegir otro overlay.
Añadirlo a tu software de streaming
Funciona en OBS Studio, Streamlabs Desktop, Meld Studio, XSplit y cualquier otra aplicación con fuentes de navegador. Hazlo con cada overlay.
Copiar la URL
Bajo la vista previa, en URL de la fuente de navegador, haz clic en Copiar. Abrir en una pestaña nueva muestra el overlay solo en tu navegador. La parte de los ajustes de la URL aparece en puntos, para que nunca salga en una pantalla compartida: el botón del ojo (Mostrar la URL / Ocultar la URL) la muestra, y Copiar siempre copia la URL completa.
Crear la fuente
En tu software de streaming, añade una fuente de navegador y ponle un nombre.
Pegar y dimensionar
Pega la URL y ajusta el ancho y el alto al tamaño del lienzo del overlay — la indicación te lo dice, por ejemplo 1920 × 1080 en 1080p, 1080 × 1920 en vertical. Si tu fuente de navegador tiene la opción Actualizar el navegador cuando la escena se active, déjala desmarcada.
Cerrar la pestaña
El overlay funciona solo. Puedes cerrar el sitio: es Streamer.Bot, en tu PC, quien lo alimenta.
Un widget por separado
Para colocar un widget en una escena aparte, desactiva Añadir al overlay junto al título de su página: sale de todos los overlays y su propia URL de la fuente de navegador aparece bajo la vista previa. Mientras el interruptor está activado, la página dice To use it as its own browser source, switch off "Añadir al overlay". — así un widget nunca se muestra dos veces en directo.
Cuando el overlay muestra un mensaje
| Mensaje | Qué hacer |
|---|---|
| Conectando… | Streamer.Bot aún no responde: ábrelo y arranca su servidor WebSocket. El overlay sigue intentándolo solo. |
| This browser source has no settings. | La URL se cortó: vuelve a copiar la URL completa desdel Editor de overlays. |
| The settings in this URL could not be read. | Lo mismo: vuelve a copiar la URL desdel Editor de overlays. |
La ventana de controles
Todos los controles manuales de los widgets — saltar una alerta, vaciar el chat, +1 en un contador, iniciar el subathon… — en una sola ventana, junto a tu overlay en lugar de encima. Su URL está bajo la del overlay, en Ventana de controles:
Los controles manuales de todos los widgets en una sola ventana. Añádela como dock personalizado en tu programa de streaming (OBS Studio, Streamlabs Desktop, Meld Studio…), o ábrela en su propia ventana del navegador. Añádela como panel personalizado en tu software de streaming, o ábrela en su propia ventana del navegador.
Solo hay una ventana de controles para todos tus overlays: sus botones pasan por Streamer.Bot y llegan a todas las fuentes de navegador a la vez. Con varios overlays, su URL está bajo el que ejecuta las acciones; los demás indican Solo visualización.
En OBS Studio: Paneles → Paneles de navegador personalizados, ponle un nombre y pega la URL. Como la del overlay, esta URL contiene tus ajustes: vuelve a copiarla cuando indique Has cambiado ajustes desde que copiaste esta URL, y no la enseñes nunca si usas una contraseña de Streamer.Bot.
La ventana muestra un grupo por cada widget activado, en el orden de los widgets. Solo conoce los widgets activados cuando copiaste su URL: después de activar uno, vuelve a copiar la URL. Se conecta sola a Streamer.Bot, y su cabecera muestra el estado de la conexión. La rueda dentada abre Opciones de visualización:
| Opción | Detalle |
|---|---|
| Títulos | Apilado (cada grupo bajo su título, por defecto) o Pestañas (un grupo cada vez; una lista desplegable cuando la ventana es estrecha). |
| Controles mostrados | Un interruptor por widget, para dejar fuera los grupos que nunca usas. |
Saved in this window only: each dock or window keeps its own choices: cada panel o ventana guarda sus propias elecciones. Los mismos controles están en la página de cada widget, en su pestaña Controles.
| Mensaje | Qué hacer |
|---|---|
| No controls here: switch on a widget that has some. | Ninguno de los widgets activados tiene controles. |
| Todos los controles están ocultos. | Abre Opciones de visualización y vuelve a activar algunos. |
| This window has no settings. | La URL se cortó: vuelve a copiar la URL de los controles desdel Editor de overlays. |
Por qué hay que volver a copiar la URL
Tus ajustes se guardan en el almacenamiento local de tu navegador. Tu software de streaming es otro programa: no puede leer ese almacenamiento.
Por eso toda la configuración se comprime y se coloca en el hash de la URL — la parte
después del #. Solo entran los valores que difieren de los de por defecto, y solo de
los widgets que esa fuente de navegador muestra o ejecuta, lo que mantiene la URL
razonable. Las imágenes que subes (la imagen de una alerta, de una cuenta atrás, una
insignia de logro) no van en ella: se guardan en Streamer.Bot, de donde las lee la fuente
de navegador.
Lo que se deriva, por orden de importancia:
- Una URL pegada en una fuente de navegador es una foto fija. Contiene los ajustes tal como estaban al copiarla. Si cambias un texto de alerta, el overlay sigue mostrando el antiguo hasta que vuelvas a copiar la URL. Bajo la vista previa, Has cambiado ajustes desde que copiaste esta URL te avisa cuando la URL copiada del overlay elegido se ha quedado desfasada. Un ajuste de widget cambia la URL de todos los overlays: vuelve a copiar cada una.
- Tu contraseña de Streamer.Bot no sale de tu PC. El hash de una URL nunca se envía al servidor web — es la parte de una dirección que el navegador se guarda para sí.
Los contadores de los objetivos, el reloj del subathon y los demás valores guardados son la excepción: viven en Streamer.Bot (mediante la acción Stream UI - Backend), así que siguen sea cual sea la URL que pegues.
Guardar una copia de tus ajustes
El almacenamiento del navegador desaparece si borras los datos del sitio, cambias de equipo o de navegador. Guarda una exportación: el botón Haz una copia de tus ajustes, junto al título del Editor de overlays, lleva a la pestaña Copia de seguridad de la página Ajustes. Contiene todos los overlays.