Guía de instalación

Instala tus alertas en minutos

La guía completa de FrameWork Alerts para OBS y Streamlabs: en video y paso a paso por escrito.

Streamlabs + OBS

Todas las alertas de FrameWork se instalan igual: una Browser Source en OBS, una variación Text Over Image en Streamlabs y los Custom Fields que vienen en tu descarga. Mira el video una vez o sigue los pasos escritos de abajo.

Guía completa en video, en inglés · Streamlabs + OBS

Parte 1

Configurar la Browser Source en OBS

  1. Abre tu plataforma de alertas (Streamlabs) y ve a la sección Alerts.

  2. Elige el tipo de alerta que quieres configurar (Followers, Subscribers, Donations, etc.) y desmarca los tipos de alerta que no uses para alertas a pantalla completa.

  3. Copia la Widget URL que te da la plataforma.

  4. Abre OBS → añade una nueva fuente → elige Browser Source → ponle un nombre claro (p. ej., Alerts - Fullscreen).

  5. Pega la URL copiada en el campo URL.

  6. Ajusta Width y Height a la resolución de tu lienzo:

    • La encontrarás en OBS en Settings → Video → Base (Canvas) Resolution

  7. Activa “Shutdown source when not visible”.

  8. Haz clic en OK y asegúrate de que esta Browser Source esté arriba del todo en tu lista de fuentes, por encima de las demás.

Parte 2

Configurar la variación de la alerta

  1. En tu plataforma de alertas, añade una nueva variación para el tipo de alerta elegido y ponle un nombre claro.

  2. Configura el Layout como “Text Over Image” (es necesario para que la alerta se vea correctamente).

  3. En la sección Image, arrastra y suelta tu archivo de alerta y haz clic en Select.

  4. Configura Alert Duration:

    • Reproduce la alerta y anota su duración completa.
    • Réstale 1 segundo a esa duración y escríbela en el campo Alert Duration.
    • Ejemplo: si la alerta dura 35 segundos → escribe 34 segundos.

  5. Sound → déjalo como está (ignóralo).

  6. Alert Animation → configúralo en Fade In / Fade Out (recomendado).

  7. Text Animation y Font → personalízalos a tu gusto.

Parte 3

Añadir el HTML / CSS / JS personalizado

  1. Activa el interruptor Custom HTML/CSS.

  2. Vuelve a la carpeta de tu alerta y abre el archivo llamado “Custom Fields — For Full Screen Alerts”.

  3. Copia y pega cada archivo en su sección correspondiente de la plataforma:

    • HTML → en la pestaña HTML
    • CSS → en la pestaña CSS
    • JS → en la pestaña JS

  4. Haz clic en “Custom Fields” → “Edit Custom Fields” → pega el archivo Custom Fields.

  5. Haz clic en “Update Custom Fields” y luego en Save (abajo a la derecha).

Parte 4

Ajustes finos con los Custom Fields

Una vez guardado, abre Custom Fields para acceder a estas opciones:

Text DelayReproduce la alerta y páusala cuando la pantalla se ponga negra. Anota ese momento: todas las alertas tienen ~4 segundos de pantalla negra al final. Escribe aquí ese tiempo exacto.
Text Horizontal PositionControla la posición del texto a izquierda y derecha. Ponlo en 50 para centrarlo.
Text Vertical PositionControla la posición del texto arriba y abajo. Ponlo en 50 para centrarlo.
Alert VolumeViene optimizado de serie. Bájalo si hace falta.

Cuando todo esté configurado, haz clic en Test Alert para comprobar que funciona correctamente.

Parte 5

Corregir alertas pequeñas en la misma sección

Si tienes una alerta a pantalla completa y una alerta pequeña en la misma categoría (p. ej., alerta Follower a pantalla completa + alerta Follower pequeña), la pequeña aparecerá con un tamaño incorrecto porque comparten el mismo enlace de widget. Sigue estos pasos para corregirlo.

  1. Abre la variación de la alerta pequeña.

  2. Activa Custom HTML/CSS.

  3. Vuelve a la carpeta de tu alerta y abre “Custom Fields — For Non-Full-Screen Alerts”.

  4. Copia y pega cada archivo en la pestaña correcta:

    • HTML → pestaña HTML
    • CSS → pestaña CSS
    • JS → pestaña JS

  5. Haz clic en “Edit Custom Fields” → pega el archivo Custom Fields → haz clic en “Update Custom Fields” → haz clic en Save.

  6. Abre Custom Fields de esta variación y configura:

    • Horizontal Position: ponlo en 50
    • Vertical Position: ponlo en 25
    • Image Size: controla el tamaño con el que aparece la alerta
    • Alert Layout: configúralo en Image Above con la opción de layout propia de la plataforma (no la de Custom Fields)

Tus alertas ya están instaladas y configuradas por completo. Si tienes algún problema, envía un ticket de soporte desde nuestro sitio web y te responderemos lo antes posible.

¿Te atascaste en un paso?

Envíanos un ticket de soporte con tu plataforma y el paso en el que estás, y el estudio te guiará.

Enviar un ticket de soporte