Superposición

Utiliza Overlay para mostrar alertas, chats, metas y otros elementos visuales en tu transmisión. Overlay te permite crear diseños personalizados combinando diferentes capas, agrupadas en media, eventos de Twitch y widgets. Puedes crear múltiples overlays, típicamente uno por escena en tu software de transmisión, por ejemplo, escenas de inicio, principal y final. Añade cada overlay como una fuente de navegador separada y utiliza solo un overlay por escena para evitar conflictos como sonidos de alerta duplicados.

Configuración de Overlay:

Media

Text and labels

Para añadir una capa de Text & Labels, haz clic en + y selecciona Text & labels. El Content se utiliza para el texto mostrado en el overlay. Escribe $ para insertar una variable para contenido dinámico, como un saludo a un espectador.

Preferencias:

• Hide until something happens — mantiene la capa oculta hasta que ocurre un evento desencadenante.
• Hide when all text variables are empty — oculta la capa siempre que cada variable en el texto no tenga valor.

Image and video

Para añadir una capa de Image:

1. Haz clic en + y selecciona Image.
2. Haz clic en Upload para subir una imagen:
   • Formatos aceptados: GIF, JPEG, PNG.
   • Tamaño máximo: 20 MB.

Para añadir una capa de Video:

1. Haz clic en + y selecciona Video.
2. Haz clic en Upload para subir un vídeo:
   • Formatos aceptados: MP4, WEBM, M4V, MOV.
   • Tamaño máximo de archivo: 20 MB.

Twitch events

Alert

Para añadir una capa de Alert, haz clic en + y selecciona Alert.

Tipos de alerta — Follow, Tip, Subscription, Resubscription, Subscription gift, Community gift, Charity donation, Twitch cheer, Twitch raid. Habilita o deshabilita cada tipo, y anula cualquiera de las configuraciones anteriores para ese tipo individualmente.

Haz clic en Default alert settings para configurar la configuración predeterminada para todos los tipos de alerta. La tabla a continuación describe cada configuración:

Para posicionar la alerta, arrástrala a cualquier ubicación en el overlay. Para probarla, usa el botón Test para previsualizar cada tipo de alerta antes de ir en vivo.

Banner

Para añadir una capa de Banner, haz clic en + y selecciona Banner.

Configuración:

• Background image — sube una imagen o selecciona una de la galería incorporada.
• Hide banner timing — habilita Periodically hide/show this banner, luego establece Hide (seconds) y Then show (seconds) para controlar el ciclo.

Añade uno o más banners con Add new; elimina cualquiera con el icono de la papelera, o haz clic en uno para configurarlo. La tabla a continuación describe cada configuración:

El fondo del encabezado, el color de fondo, la transparencia y la fuente también son personalizables por banner.

Chat

Para añadir una capa de Chat, haz clic en + y selecciona Chat.

Configura los siguientes ajustes:

• Show avatars — muestra la foto de perfil del espectador junto a su mensaje.
• Show platform icon — muestra el icono de la plataforma junto a cada mensaje.
• Show colored line for platform — muestra una línea de color que indica el rol del remitente. Colores de rol:
  • Streamer (Tú)
  • Moderador
  • Suscriptor
  • Turbo
  • Espectador
• Show message and username on separate lines — muestra el nombre de usuario y el mensaje en líneas separadas.
• Reverse direction — controla si los nuevos mensajes aparecen desde la parte superior o inferior.
• Duration (seconds) — tiempo que un mensaje permanece en pantalla.

Events

Para añadir una capa de Events, haz clic en + y selecciona Events.

Configura los siguientes ajustes:

• Event types — selecciona qué tipos de eventos mostrar. Tipos disponibles:
  • Propinas
  • Seguidores
  • Suscriptores
  • Resuscriptores
  • Donaciones benéficas
  • Aplauso de Twitch
  • Incursión de Twitch
• Number of events — el número máximo de eventos mostrados a la vez.

Goal

Una meta rastrea el progreso hacia un objetivo, como el conteo de seguidores, el conteo de suscriptores o los bits de Twitch. Para añadir una capa de Goal, haz clic en + y selecciona Goal, luego haz clic en Add goal. Configura los siguientes ajustes:

También puedes subir una imagen de fondo o seleccionar una de la galería.

Trigger

Las capas de activador crean comandos de chat que muestran medios y/o sonido en tu transmisión. El acceso puede limitarse por rol de chat, o costar puntos de fidelidad de tu programa de fidelización de Partner Network (los puntos de canal de Twitch no se utilizan para esto).

Para añadir una capa de Trigger, haz clic en + y selecciona Trigger. Configura el activador usando los siguientes ajustes:

Widgets

Countdown

Las capas de cuenta regresiva muestran una cuenta regresiva en vivo para el inicio de tu transmisión, la revelación de un evento o un sub-a-thon.

Para añadir una capa de Countdown, haz clic en + y selecciona Countdown.

Configura los siguientes ajustes:

• Title — texto mostrado sobre la cuenta regresiva (por ejemplo, Comenzando pronto)
• Target — objetivo de la cuenta regresiva:
  • Pick date and time — cuenta regresiva hasta una fecha y hora fijas.
  • Set duration from now — cuenta regresiva para una duración especificada.
• Display format:
  • Días : Horas : Minutos : Segundos
  • Horas : Minutos : Segundos
  • Minutos : Segundos
  • Segundos
• Show labels under each digit — muestra las etiquetas para las unidades de tiempo utilizadas en la cuenta regresiva.
• Show a custom message when complete — muestra un mensaje personalizado después de que termine la cuenta regresiva.
• Style — radio del borde.

Now playing

La capa Now playing muestra la canción que se está reproduciendo actualmente en un reproductor de música conectado a Last.fm.

Para añadir una capa de Now playing:

1. Haz clic en + y selecciona Now playing.
2. Crea una cuenta en Last.fm si no tienes una.
3. Configura un scrobbler de Last.fm — la herramienta que envía tus datos de música a Last.fm. Muchos reproductores lo soportan de forma nativa, otros necesitan software adicional o una extensión de Chrome para reproductores basados en web. Last.fm se sincroniza con Spotify, YouTube, Apple Music, Tidal y SoundCloud.
4. Vincula tu reproductor de música a tu cuenta de Last.fm.

También puedes subir una imagen de fondo o seleccionar una de la galería.

Si la canción no aparece en tu overlay, verifica tu perfil de Last.fm para confirmar que tu scrobbler está enviando datos de canciones allí. Si la canción no aparece en Last.fm tampoco, el scrobbler en sí no está funcionando — verifica la conexión o extensión de Last.fm de tu reproductor.

Code

Las capas de código permiten a los desarrolladores construir sus propias capas de overlay con código personalizado. No hay límite en la cantidad de capas que puedes añadir a tu overlay.

Para añadir una capa de Code, haz clic en + y selecciona Code.

Configura los siguientes ajustes:

1. Establece el Message — una variable que tu código puede referenciar (por defecto: Hola ${username})
2. Haz clic en Open editor para editar tu capa usando HTML, CSS, JavaScript o Blueprint.
3. Haz clic en Save para aplicar tus cambios.

Añade tu overlay a tu software de transmisión

Para añadir tu overlay a tu software de transmisión, ve a la pestaña Overlay en tu panel de control, copia tu URL de overlay y añádela como una fuente de navegador/web:

Lightstream

Lightstream Studio utiliza el mismo editor de overlay que Partner Network — cada tipo de capa disponible en el editor de Overlay de Partner Network también está disponible directamente en Lightstream Studio, y cualquier escena que construyas allí es visible en Partner Network. En la mayoría de los casos, si estás usando Lightstream Studio, puedes construir tu overlay directamente allí en lugar de importar uno desde Partner Network.

Si ya construiste un overlay separado en la cuenta de creador de Partner Network y quieres llevarlo a Lightstream a través de URL:

1. Ve a la página de Overlay.
2. Haz clic en el botón de cadena de URL para copiar tu URL de overlay.
3. Ve a Lightstream:

1. 1. Para Lightstream Studio Browser Source:
      1. Haz clic en Añadir.
      2. En la sección de Integraciones de terceros haz clic en Fuente de navegador.
      3. Elige Xsolla Partner Network.
      4. Pega tu URL y haz clic en Comprobar URL.

1. 2. Para Lightstream Classic Browser Source:
      1. Haz clic en Añadir capa.
      2. Haz clic en:
         • Integraciones de terceros y elige Xsolla Partner Network.
         • El banner de Partner Network en la parte inferior.
      3. Pega tu URL y haz clic en Comprobar URL.

OBS Studio

Para añadir tu overlay en OBS Studio:

1. Ve a la página de Overlay.
2. Haz clic en el botón de URL para copiar tu URL de overlay.
3. En OBS Studio, haz clic en el signo + en la sección de Sources y selecciona Browser.

4. Nombra la fuente y haz clic en OK.

5. Pega tu URL de overlay en el campo de URL. Bajo Width & height, ajusta la resolución a tu overlay (por defecto: 1920 x 1080 px).

Transmisión desde consola

Las consolas Xbox y PlayStation no soportan fuentes de navegador, por lo que no puedes añadir un overlay a tu transmisión desde la consola misma. Recomendamos usar Lightstream:

1. Configura tu consola para transmitir a Lightstream en lugar de directamente a Twitch.
2. Añade tu overlay en el editor web de Lightstream. Lightstream envía la transmisión combinada a Twitch, por lo que solo necesitas un dispositivo con un navegador web.

Alternativamente, transmite desde un PC usando una tarjeta de captura y software de transmisión.

Incluso sin un overlay configurado, las propinas y las notificaciones en el chat seguirán funcionando si están habilitadas.