Guida all’installazione

Installa i tuoi alert in pochi minuti

La guida completa di FrameWork Alerts per OBS e Streamlabs: in video e passo passo per iscritto.

Streamlabs + OBS

Tutti gli alert FrameWork si installano allo stesso modo: una Browser Source in OBS, una variante Text Over Image in Streamlabs e i Custom Fields inclusi nel tuo download. Guarda il video una volta o segui i passaggi scritti qui sotto.

Guida completa in video, in inglese · Streamlabs + OBS

Parte 1

Configura la Browser Source in OBS

  1. Apri la tua piattaforma di alert (Streamlabs) e vai alla sezione Alerts.

  2. Scegli il tipo di alert che vuoi configurare (Followers, Subscribers, Donations ecc.) e deseleziona i tipi di alert che non usi per gli alert a schermo intero.

  3. Copia la Widget URL fornita dalla piattaforma.

  4. Apri OBS → aggiungi una nuova fonte → scegli Browser Source → dalle un nome chiaro (ad esempio, Alerts - Fullscreen).

  5. Incolla l’URL copiato nel campo URL.

  6. Imposta Width e Height sulla risoluzione della tua scena (canvas):

    • La trovi in OBS in Settings → Video → Base (Canvas) Resolution

  7. Attiva “Shutdown source when not visible”.

  8. Fai clic su OK e assicurati che questa Browser Source sia in cima all’elenco delle fonti, sopra tutte le altre.

Parte 2

Configura la variante dell’alert

  1. Nella tua piattaforma di alert, aggiungi una nuova variante per il tipo di alert scelto e dalle un nome chiaro.

  2. Imposta il Layout su “Text Over Image” (è necessario perché l’alert venga mostrato correttamente).

  3. Nella sezione Image, trascina il file dell’alert e fai clic su Select.

  4. Configura l’Alert Duration:

    • Riproduci l’alert e annota la sua durata completa.
    • Sottrai 1 secondo da questa durata e inseriscila nel campo Alert Duration.
    • Esempio: se l’alert dura 35 secondi → inserisci 34 secondi.

  5. Sound → lascialo così com’è (ignoralo).

  6. Alert Animation → impostala su Fade In / Fade Out (consigliato).

  7. Text Animation e Font → personalizzali come preferisci.

Parte 3

Aggiungi HTML / CSS / JS personalizzati

  1. Attiva l’interruttore Custom HTML/CSS.

  2. Torna alla cartella del tuo alert e apri il file chiamato “Custom Fields — For Full Screen Alerts”.

  3. Copia e incolla ogni file nella sezione corrispondente della piattaforma:

    • HTML → nella scheda HTML
    • CSS → nella scheda CSS
    • JS → nella scheda JS

  4. Fai clic su “Custom Fields” → “Edit Custom Fields” → incolla il file Custom Fields.

  5. Fai clic su “Update Custom Fields” e poi su Save (in basso a destra).

Parte 4

Regolazioni fini con i Custom Fields

Dopo aver salvato, apri i Custom Fields per accedere a queste opzioni:

Text DelayRiproduci l’alert e metti in pausa quando lo schermo diventa nero. Annota quel momento: tutti gli alert hanno ~4 secondi di schermo nero alla fine. Inserisci qui quel tempo esatto.
Text Horizontal PositionControlla la posizione del testo a sinistra e a destra. Imposta 50 per centrarlo.
Text Vertical PositionControlla la posizione del testo in alto e in basso. Imposta 50 per centrarlo.
Alert VolumeÈ già ottimizzato. Abbassalo se necessario.

Quando è tutto configurato, fai clic su Test Alert per verificare che funzioni correttamente.

Parte 5

Correggi gli alert piccoli nella stessa sezione

Se hai un alert a schermo intero e un alert piccolo nella stessa categoria (ad esempio, alert Follower a schermo intero + alert Follower piccolo), quello piccolo comparirà con la dimensione sbagliata perché entrambi condividono lo stesso link del widget. Segui questi passaggi per correggerlo.

  1. Apri la variante dell’alert piccolo.

  2. Attiva Custom HTML/CSS.

  3. Torna alla cartella del tuo alert e apri “Custom Fields — For Non-Full-Screen Alerts”.

  4. Copia e incolla ogni file nella scheda giusta:

    • HTML → scheda HTML
    • CSS → scheda CSS
    • JS → scheda JS

  5. Fai clic su “Edit Custom Fields” → incolla il file Custom Fields → fai clic su “Update Custom Fields” → fai clic su Save.

  6. Apri i Custom Fields di questa variante e imposta:

    • Horizontal Position: imposta 50
    • Vertical Position: imposta 25
    • Image Size: controla la dimensione con cui compare l’alert
    • Alert Layout: imposta Image Above usando l’opzione di layout della piattaforma stessa (non quella dei Custom Fields)

I tuoi alert sono ora installati e completamente configurati. Se hai qualche problema, apri un ticket di assistenza dal nostro sito e ti risponderemo il prima possibile.

Bloccato a un passaggio?

Apri un ticket di assistenza indicando la tua piattaforma e il passaggio a cui sei arrivato, e lo studio ti guida.

Apri un ticket di assistenza