Configurar widgets en el overlay
Crea widgets individuales para OBS, copia sus URLs independientes y ajusta chat, contadores, metas, alertas u otros widgets personalizados con HTML, CSS y JS propios.
Los widgets son componentes visuales individuales que aparecen sobre el stream. Cada uno tiene su propia URL de Browser Source para OBS.
Tipos de widgets disponibles
| Widget | Descripción |
|---|---|
| Chat Box | Mensajes recientes del chat en directo |
| Lista de eventos | Últimos eventos/alertas de Twitch mostrados en pantalla |
| Contador de espectadores | Viewers en vivo en tiempo real |
| Meta de seguidores | Objetivo visual de seguidores con barra de progreso |
| Meta de suscriptores | Objetivo visual de suscriptores con barra de progreso |
| Meta de bits | Objetivo visual de bits donados con barra de progreso |
| Webcam Overlay | Marco decorativo sobre la webcam (sube un PNG con transparencia) |
| Intermisión | Pantalla de pausa para mostrar durante descansos |
| Stand By | Pantalla de espera para antes de empezar el stream |
| Cronómetro | Speedrun timer (cuenta arriba/abajo, vueltas); también se controla desde el chat con !timerstart !timerpause !timerlap !timerstop |
Las alertas animadas de follow/sub/bits/raid se crean y personalizan en el mismo panel (Studio → Overlay y Alertas → Alertas unificadas) y se documentan más abajo en Widget de Alertas. El TTS (lectura de chat en voz alta) y el widget Now Playing son paneles aparte, con guía propia. Las alertas de “streamer en vivo” que se publican en Discord son otra función distinta: ver Configurar alertas de stream personalizadas.
Crear y añadir un widget a OBS
- Entra en Leksimus Studio → Overlay y Alertas → Widgets de overlay.
- Pulsa el botón + junto al tipo de widget que quieras (por ejemplo, + Chat Box o + Meta de seguidores).
- Configura las opciones del widget:
- Etiqueta: nombre interno para identificarlo.
- Habilitado: activa o desactiva el widget sin eliminarlo.
- Opciones específicas del tipo: fuente, colores, animaciones, etc.
- Haz clic en Guardar.
- El widget queda en la lista con su propio botón para Copiar URL del widget — no hace falta escribirla ni construirla a mano.
La URL del widget contiene el token del canal. Trátala como información sensible y no la compartas públicamente.
- En OBS, abre Fuentes → + → Browser Source.
- Nombra la fuente, por ejemplo Chat Widget.
- Pega la URL del widget.
- Configura tamaño y posición según el diseño de tu stream.
Para el widget de alertas, posiciónalo centrado o donde quieras que aparezcan las animaciones. Resolución sugerida: 1920×1080.
- Si el widget no muestra nada, verifica que está Activo en el dashboard.
- Los cambios en la configuración se aplican en tiempo real sin recargar el Browser Source.
Opciones de personalización por widget
Widget de Chat
| Opción | Descripción |
|---|---|
| Fuente y tamaño | Tipografía del texto del chat |
| Colores | Fondo, texto y badges de usuario |
| Máximo de mensajes | Cuántos mensajes aparecen simultáneamente |
| Filtrar comandos | Ocultar mensajes que empiezan con ! |
| Solo subs/mods | Filtrar quién aparece |
Widget de Alertas
Se edita desde Studio → Overlay y Alertas → Alertas unificadas, una tarjeta por tipo de evento.
| Opción | Descripción |
|---|---|
| Activar / Probar | Enciende la alerta y dispara un evento de prueba sobre el overlay |
| Título / Subtítulo | Texto de la tarjeta, máx. 100 / 200 caracteres. Variables: {username} {amount} {viewers} {months} {tier} |
| Posición | Slot del 1 al 9 (varias alertas pueden coexistir en distintas zonas del overlay) |
| Duración / Animación | 1 a 30 segundos; animación de entrada/salida configurable |
| Color | Sólido o gradiente (color A / color B) |
| Borde | Opcional, color y grosor de 1 a 8 px |
| Imagen o GIF | URL (máx. 500 caracteres), admite GIF animado |
| Sonido | URL de MP3/WAV/OGG (máx. 500 caracteres) + control de volumen |
Eventos disponibles: Follow, Sub Tier 1/2/3, Sub Prime, Resub Tier 1/2/3, Resub Prime, Gift Sub, Bits/Cheer, Raid, Hype Train, Recompensa (canje de puntos) y En directo.
Kick solo soporta “En directo” y “Follow” (vía webhooks oficiales de Kick). El resto de eventos (subs, bits, raids, hype train, recompensas) son exclusivos de Twitch.
Además del diseño con los campos de arriba, cada tarjeta admite su propia plantilla personalizada — ver la siguiente sección.
Plantilla personalizada (HTML, CSS y JS)
Casi todos los widgets (excepto el Cronómetro) y las tarjetas de Alertas aceptan reemplazar su diseño por defecto con HTML, CSS y JS propios, en la sección “Plantilla personalizada” del editor de cada widget.
| Campo | Límite | Notas |
|---|---|---|
| HTML | 30.000 caracteres | Reemplaza el interior del widget/tarjeta |
| CSS | 30.000 caracteres | Se aplica solo a este widget |
| JS | 30.000 caracteres | Se ejecuta una vez al insertar el widget/tarjeta en el DOM |
El límite se aplica por campo y se trunca automáticamente al escribir; no hay límite de tamaño total combinado.
Variables y argumentos por tipo
Variables disponibles en el HTML: {currentValue} {targetValue} {progress} {label} {type} {items} (los campos que aplican dependen del tipo de widget; en un Contador de espectadores, por ejemplo, {currentValue} es el número de viewers).
CSS: usa .overlay-widget como selector raíz — Leksimus lo escopea automáticamente a ese widget, así que no hay colisión de estilos con otros widgets de la misma página.
.overlay-widget { background: rgba(0,0,0,0.8); border-radius: 12px; }
.overlay-widget .valor { font-size: 3rem; color: #9147ff; }JS: recibe los argumentos root (elemento DOM del widget), widget, state y settings.
// Argumentos: root (elemento DOM), widget, state, settings
const val = root.querySelector('.valor');
val.style.color = state.progress > 0.9 ? '#2ecc71' : '#9147ff';Variables disponibles en el HTML: {title} {subtitle} {icon} {image} {username} {amount} {message}.
CSS: usa .lk-alert-card como selector raíz.
JS: recibe el argumento card (elemento DOM de la tarjeta) y se ejecuta cada vez que la tarjeta entra al DOM.
// `card` = elemento DOM de la tarjeta
card.querySelector('.titulo').style.color = 'red';El HTML, CSS y JS personalizados no pasan por ningún filtro de sanitización: se insertan y ejecutan tal cual dentro del Browser Source de OBS, sin sandbox. Pega solo código que hayas escrito tú o que venga de una fuente en la que confíes plenamente — un script malicioso pegado aquí corre con acceso completo a esa página del overlay.
Gestionar widgets existentes
| Acción | Descripción |
|---|---|
| Editar | Modifica la configuración del widget |
| URL | Copia la URL del widget, oculta por defecto |
| Activo/Inactivo | Indica si el widget está habilitado |
| Eliminar | Elimina el widget permanentemente |