# Añade un overlay de KickBot a OBS

> Añade cualquier overlay de KickBot (chat, alertas o TTS) a OBS Studio, Streamlabs Desktop o Meld Studio como fuente de navegador, con tamaño, audio y soluciones.

Source: https://kickbot.com/es/docs/getting-started/add-browser-source-obs

Cada overlay de KickBot es un enlace web. Para mostrarlo en tu stream de Kick, copia el enlace desde el panel de KickBot y añádelo a tu software de streaming como **fuente de navegador** (browser source). Funciona igual para el overlay de chat, las alertas, el TTS, las alertas de propinas y las imágenes IA, en OBS Studio, Streamlabs Desktop, Meld Studio y otras apps compatibles con fuentes de navegador. No tienes que instalar nada.

## Busca el enlace del overlay

Cada función tiene su propio enlace. Cópialo desde la página que se indica abajo.

| Overlay | Dónde copiar el enlace | Más ayuda |
|---|---|---|
| Overlay de chat, alertas, contadores y otros widgets | **Widgets** > **Widgets guardados**, después de instalar un widget de la Biblioteca de widgets | [Biblioteca de widgets](https://kickbot.com/es/docs/widgets/widget-library), [overlay de chat](https://kickbot.com/es/docs/widgets/chat-overlay) |
| Texto a voz | **TTS** > **Ajustes**, **Browser source para OBS** | [Configura el TTS](https://kickbot.com/es/docs/tts/set-up-tts) |
| Alertas de propinas | **Propinas** > **Widget** | [Alertas de propinas](https://kickbot.com/es/docs/tipping/tip-alerts) |
| Imágenes IA | **Chat Bot** > **Imágenes IA**, **Widget** | [Imágenes IA](https://kickbot.com/es/docs/ai/ai-images) |

> **Caution:** No compartas los enlaces de tus overlays. Un enlace funciona para cualquiera que lo tenga. No lo pegues en el chat ni lo muestres en el stream.

## Elige el tamaño

Un widget de la Biblioteca de widgets muestra su tamaño en **Tamaño en el stream**, por ejemplo 800 × 600 px. Usa ese ancho y ese alto en la fuente de navegador. El mismo tamaño aparece en el widget, en **Widgets guardados**.

![La tarjeta Sobre este widget en la Biblioteca de widgets, con Tamaño en el stream de 800 por 600 px](https://kickbot.com/docs/images/getting-started/add-browser-source-obs/01-size-on-stream.webp "Usa los valores de Tamaño en el stream como ancho y alto de la fuente de navegador.")

Si una página no muestra ningún tamaño, ajusta la fuente de navegador al tamaño de tu lienzo, por ejemplo 1920 × 1080. Después mueve o cambia el tamaño de la fuente en tu escena. La mayoría de los overlays tienen fondo transparente, así que en el stream solo se ve el contenido.

## OBS Studio

1. En el recuadro **Sources** (Fuentes) de tu escena, haz clic en **+** y elige **Browser** (Navegador).
2. Escribe un nombre, por ejemplo "KickBot chat", y confirma.
3. En la ventana de propiedades, pega el enlace del overlay en **URL**.
4. Pon en **Width** (Ancho) y **Height** (Alto) el tamaño del overlay.
5. En los overlays con sonido (TTS, alertas, alertas de propinas), activa **Control audio via OBS** (Controlar audio a través de OBS). La fuente aparece entonces en el **Audio Mixer** (Mezclador de audio), donde puedes cambiar su volumen.
6. Haz clic en **OK** (Aceptar). Arrastra la fuente al lugar del lienzo donde la quieras.

Otras opciones de la fuente de navegador en OBS:

- **Shutdown source when not visible** (Apagar la fuente cuando no sea visible): descarga el overlay cuando su escena no está al aire. Déjala desactivada para alertas y TTS, así no te pierdes nada mientras estás en otra escena.
- **Refresh browser when scene becomes active** (Actualizar el navegador cuando la escena se active): recarga el overlay cada vez que cambias a la escena. Si un mensaje se está reproduciendo, se corta al recargar el overlay.
- **Refresh cache of current page** (Actualizar la caché de la página actual): un botón que recarga el overlay al momento. Úsalo después de cambiar ajustes en KickBot o cuando el overlay se vea mal.

OBS explica cada opción en su [guía de la fuente de navegador](https://obsproject.com/kb/browser-source).

> **Dato útil:** Para usar los mismos overlays en muchas escenas, ponlos en una sola escena, por ejemplo "Overlays de KickBot". Luego añade esa escena como fuente en tus otras escenas. Así añades cada enlace una sola vez.

## Streamlabs Desktop

1. En la vista de estudio, haz clic en **+** junto a **Sources** (Fuentes).
2. Elige **Browser Source** (Fuente de navegador), escribe un nombre y haz clic en **Add Source** (Añadir fuente).
3. En los ajustes de la fuente, pega el enlace del overlay en el campo de URL y pon el ancho y el alto.
4. Cierra los ajustes y coloca la fuente en su sitio.

Streamlabs Desktop tiene las mismas opciones **Shutdown source when not visible** y **Refresh browser when scene becomes active** que OBS. Consulta el artículo de Streamlabs sobre [fuentes de navegador](https://streamlabs.com/content-hub/post/introducing-browser-source-interaction-for-streamlabs-desktop). Si no oyes un overlay, revisa que no esté silenciado en el mezclador de audio.

## Meld Studio

1. En el panel **Layers** (capas), haz clic en **+** y elige **Browser**.
2. Pega el enlace del overlay en el campo **URL** del **Inspector**.
3. Cambia el tamaño de la capa en el lienzo, o pon W y H en el Inspector.
4. En los overlays con sonido, activa **Add an audio track for the source** (añadir una pista de audio para la fuente), debajo del campo URL. Meld no añade por sí solo una pista de audio a las capas de navegador.

También puedes pegar un enlace directamente en el lienzo de Meld para crear una capa de navegador. El icono de recarga junto al campo URL recarga el overlay. Meld explica las capas en su [documentación de capas](https://meldstudio.co/docs/layers/).

## Solución de problemas

**La fuente está vacía.**
- Muchos overlays solo muestran algo cuando hay algo que mostrar. Un overlay de chat está vacío hasta que alguien escribe en el chat. Una alerta solo aparece cuando ocurre un evento.
- Vuelve a copiar el enlace desde el panel y pégalo en la fuente. Si borraste un widget y lo instalaste de nuevo, tiene un enlace nuevo.
- Recarga el overlay: **Refresh cache of current page** en OBS, o el icono de recarga en Meld.
- Revisa que la fuente no esté oculta (el icono del ojo) y que no esté detrás de otra fuente de la lista.

**No se oye el TTS ni las alertas.**
- OBS: activa **Control audio via OBS** en las propiedades de la fuente y revisa que la fuente no esté silenciada en el **Audio Mixer**.
- Meld: activa **Add an audio track for the source**.
- Revisa los ajustes de volumen de la función en KickBot, por ejemplo el volumen del TTS en [Ajustes de TTS](https://kickbot.com/es/docs/tts/set-up-tts).
- Para oír tú mismo el overlay mientras haces stream en OBS, abre **Edit** > **Advanced Audio Properties** (Editar > Propiedades avanzadas de audio) y pon el **Audio Monitoring** (Monitorización de audio) de la fuente en **Monitor and Output** (Monitorizar y emitir). Los espectadores lo oyen de todas formas.

**Los cambios en KickBot no aparecen en el stream.** Recarga el overlay con **Refresh cache of current page**. Algunos overlays solo leen sus ajustes cuando se cargan.

**El overlay se ve cortado o muy pequeño.** Pon en la fuente el ancho y el alto del overlay, como aparece en **Tamaño en el stream**. Cambia el tamaño en las propiedades de la fuente, no estirando la fuente en el lienzo, para que el texto se vea nítido.

## Preguntas frecuentes

**¿Cómo añado el chat de Kick a OBS?**

Instala un widget de chat de la Biblioteca de widgets, copia su enlace desde **Widgets guardados** y añádelo a OBS como fuente **Browser** (Navegador) con el tamaño que indica el widget. Consulta [overlay de chat](https://kickbot.com/es/docs/widgets/chat-overlay).

**¿Los overlays de KickBot funcionan con Streamlabs y Meld?**

Sí. Funcionan con cualquier software de streaming compatible con fuentes de navegador, como OBS Studio, Streamlabs Desktop y Meld Studio.

**¿Puedo usar un mismo enlace de overlay en más de una escena?**

Sí. Añade la misma fuente a cada escena, o pon tus overlays en una escena y añade esa escena a las demás.

**¿Los overlays afectan el rendimiento de mi PC?**

Los overlays son páginas web ligeras. El trabajo pesado, como generar el audio del TTS, se hace en los servidores de KickBot. La fuente de navegador solo muestra y reproduce el resultado.