Cómo agregar una fuente web

Esta guía te muestra cómo agregar páginas web, widgets y contenido basado en navegador como capas en tu transmisión.

Pasos rápidos

Haz clic en Add New Layer (agregar nueva capa) en el panel Layers (capas)
Selecciona Web Source (fuente web) en el menú
Escribe la URL de la página web
Ajusta el tamaño y la posición según necesites

Entender las fuentes web

Una fuente web muestra una página web en vivo dentro de tu transmisión. Es como incrustar una ventana de navegador en tu transmisión.

Caso de uso	Ejemplo
Widgets	Superposiciones de chat, alertas, metas
Feeds sociales	Línea de tiempo de Twitter/X
Datos en vivo	Cotizaciones bursátiles, marcadores deportivos
Animaciones	Animaciones HTML5
Superposiciones personalizadas	Gráficos basados en navegador

Método 1: agregar desde el panel Layers

Paso 1: agrega una nueva capa

En el Layers panel (panel de capas), a la izquierda, haz clic en Add New Layer
Selecciona Web Source entre los tipos de capa disponibles
Se agrega una capa de fuente web a la escena

Una capa Web Source nueva en la escena con una página de marcador de posición y el ícono de ajustes de su barra de herramientas señalado

Paso 2: escribe la URL

Haz clic en el ícono de settings (ajustes), el engranaje, en la barra de herramientas encima de la capa
Deja seleccionado Use link (usar enlace) o cambia a Use HTML code (usar código HTML) para pegar el código en su lugar
Escribe la URL completa (incluyendo https://)

El desplegable de ajustes de Web Source resaltado: Use link o Use HTML code, el campo de URL, los deslizadores de ancho y alto del marco y Refresh Web Source

Paso 3: configura el tamaño

Define Frame width (ancho del marco) y Frame height (alto del marco) en el mismo desplegable
Tamaños habituales: 1920x1080, 800x600, 400x200
Usa el tamaño para el que se diseñó el widget, si aplica

Paso 4: coloca la capa

Arrástrala para colocarla en la escena
O define coordenadas X e Y exactas
Tráela al frente si hace falta para que se vea

Usos habituales de las fuentes web

Alertas de stream (Streamlabs, StreamElements)

URL: la URL de tu widget en la plataforma
Tamaño: normalmente 800x600 o personalizado
Posición: arriba o en el centro de la pantalla

Superposición de chat

URL: la URL del widget de chat de tu plataforma
Tamaño: 400x800 (vertical)
Posición: a un lado de la pantalla

Feed de redes sociales

URL: URL de inserción de la red social
Tamaño: varía según la plataforma
Posición: en una esquina o en un área dedicada

Cuenta regresiva

URL: URL de un temporizador de cuenta regresiva en línea
Tamaño: 400x200
Posición: donde los espectadores lo vean

Ajustes de la fuente web

Ajustes básicos

Ajuste	Descripción
URL	Dirección web que se muestra
Width (ancho)	Ancho de visualización en píxeles
Height (alto)	Alto de visualización en píxeles
Refresh Rate (frecuencia de actualización)	Cada cuánto se recarga (si aplica)

Ajustes avanzados

Ajuste	Descripción
Custom CSS (CSS personalizado)	Inyecta CSS para dar estilo a la página
Shutdown when hidden (apagar al ocultar)	Deja de cargar cuando la capa está oculta
Control audio (controlar audio)	Activa o desactiva el audio de la página web

Consejos para fuentes web

Rendimiento

Las fuentes web consumen recursos
No agregues demasiadas a la vez
Las páginas más simples cargan más rápido

Transparencia

Muchos widgets están diseñados con fondo transparente
Funciona automáticamente si la página lo admite
Busca la opción “transparent” en los ajustes del widget

Tamaño

Ajusta el tamaño de la fuente web al tamaño para el que se diseñó el widget
Escalar hacia arriba puede verse borroso
Escalar hacia abajo desperdicia recursos

Audio de las fuentes web

Las páginas web pueden reproducir audio
Contrólalo desde los ajustes de audio de la fuente web
O pon en cero el volumen propio de esa capa

Crear fuentes web personalizadas

Puedes crear tus propias páginas HTML:

Superposición personalizada simple

Crea un archivo HTML con tu contenido:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background: transparent; }
    .text { color: white; font-size: 48px; }
  </style>
</head>
<body>
  <div class="text">Tu texto aquí</div>
</body>
</html>

Alójalo en línea y usa la URL.

Contenido dinámico

Usa JavaScript para actualizar el contenido
Conéctate a APIs para obtener datos en vivo
Anima con CSS o JavaScript

Servicios de widgets populares

Streamlabs

Obtén la URL del widget en el panel de Streamlabs
Copia la URL única
Agrégala como fuente web
Alertas, metas, chat, etc.

StreamElements

Obtén la URL del overlay en StreamElements
Copia la URL del widget
Agrégala como fuente web

Otros servicios

OWN3D
Muxy
Stream Avatars
Widgets personalizados

Solución de problemas

¿La página web no carga?

Comprueba que la URL sea correcta y completa
Verifica que la URL funcione en un navegador normal
Revisa si el sitio permite la inserción (X-Frame-Options)
Algunos sitios bloquean la inserción en iframes

¿El contenido se ve de un tamaño incorrecto?

Ajusta las dimensiones de la fuente web al contenido
Revisa si el widget tiene un tamaño recomendado
No lo escales más allá del tamaño original

¿La fuente web está en blanco?

Puede que la página no permita la inserción
Prueba con otra URL
Revisa la consola del navegador en busca de errores

¿Se está reproduciendo audio de la fuente web?

Revisa los ajustes de audio de la fuente web
Pon el volumen de la capa en cero
Desactiva el audio en las propiedades de la fuente web

¿No se ven las actualizaciones?

Puede que la página esté en caché
Prueba la opción de actualizar o recargar
Borra la caché de la fuente web si está disponible

¿El fondo transparente no funciona?

Verifica que la página web admita transparencia
Revisa los ajustes del widget
Algunas páginas tienen fondo sólido de forma predeterminada

Consideraciones de seguridad

Usa solo URLs de confianza
No agregues fuentes web con credenciales de inicio de sesión visibles
Ten cuidado con páginas que muestren información personal
Las URLs de los widgets suelen ser privadas, no las compartas

Buenas prácticas

Prueba antes de salir en vivo: verifica que la fuente web se muestre correctamente
Iguala los tamaños: usa las dimensiones para las que se diseñó
Limita la cantidad: cada fuente web consume recursos
Usa HTTPS: se prefieren las URLs seguras
Ten respaldos: los servicios externos pueden caerse