Installez vos alertes en quelques minutes
Le guide complet de FrameWork Alerts pour OBS et Streamlabs : en vidéo et pas à pas à l’écrit.
Streamlabs + OBS
Toutes les alertes FrameWork s’installent de la même façon : une Browser Source dans OBS, une variante Text Over Image dans Streamlabs et les Custom Fields fournis dans votre téléchargement. Regardez la vidéo une fois ou suivez les étapes écrites ci-dessous.
Guide vidéo complet, en anglais · Streamlabs + OBS
Partie 1
Configurer la Browser Source dans OBS
Ouvrez votre plateforme d’alertes (Streamlabs) et allez dans la section Alerts.
Choisissez le type d’alerte à configurer (Followers, Subscribers, Donations, etc.) et décochez les types d’alertes que vous n’utilisez pas pour les alertes plein écran.
Copiez la Widget URL fournie par la plateforme.
Ouvrez OBS → ajoutez une nouvelle source → choisissez Browser Source → donnez-lui un nom clair (par ex. Alerts - Fullscreen).
Collez l’URL copiée dans le champ URL.
Réglez Width et Height sur la résolution de votre canevas :
- Vous la trouverez dans OBS sous Settings → Video → Base (Canvas) Resolution
Activez « Shutdown source when not visible ».
Cliquez sur OK et vérifiez que cette Browser Source est tout en haut de votre liste de sources, au-dessus des autres.
Partie 2
Configurer la variante de l’alerte
Dans votre plateforme d’alertes, ajoutez une nouvelle variante pour le type d’alerte choisi et donnez-lui un nom clair.
Réglez le Layout sur « Text Over Image » (indispensable pour que l’alerte s’affiche correctement).
Dans la section Image, glissez-déposez votre fichier d’alerte et cliquez sur Select.
Réglez Alert Duration :
- Lisez l’alerte et notez sa durée complète.
- Retirez 1 seconde à cette durée et saisissez le résultat dans le champ Alert Duration.
- Exemple : si l’alerte dure 35 secondes → saisissez 34 secondes.
Sound → laissez tel quel (ignorez-le).
Alert Animation → réglez sur Fade In / Fade Out (recommandé).
Text Animation et Font → personnalisez à votre goût.
Partie 3
Ajouter le HTML / CSS / JS personnalisé
Activez l’interrupteur Custom HTML/CSS.
Retournez dans le dossier de votre alerte et ouvrez le fichier nommé « Custom Fields — For Full Screen Alerts ».
Copiez-collez chaque fichier dans la section correspondante de la plateforme :
- HTML → dans l’onglet HTML
- CSS → dans l’onglet CSS
- JS → dans l’onglet JS
Cliquez sur « Custom Fields » → « Edit Custom Fields » → collez le fichier Custom Fields.
Cliquez sur « Update Custom Fields », puis sur Save (en bas à droite).
Partie 4
Affiner avec les Custom Fields
Une fois enregistré, ouvrez Custom Fields pour accéder à ces options :
| Option | Description |
|---|---|
| Text Delay | Lisez l’alerte et mettez-la en pause quand l’écran devient noir. Notez ce moment : toutes les alertes ont environ 4 secondes d’écran noir à la fin. Saisissez ici ce temps exact. |
| Text Horizontal Position | Règle la position du texte de gauche à droite. Mettez 50 pour le centrer. |
| Text Vertical Position | Règle la position du texte de haut en bas. Mettez 50 pour le centrer. |
| Alert Volume | Optimisé d’origine. Baissez-le si nécessaire. |
Une fois tout configuré, cliquez sur Test Alert pour vérifier que tout fonctionne correctement.
Partie 5
Corriger les petites alertes dans la même section
Si vous avez une alerte plein écran et une petite alerte dans la même catégorie (par ex. une alerte Follower plein écran + une petite alerte Follower), la petite s’affichera à la mauvaise taille car elles partagent le même lien de widget. Suivez ces étapes pour corriger cela.
Ouvrez la variante de la petite alerte.
Activez Custom HTML/CSS.
Retournez dans le dossier de votre alerte et ouvrez « Custom Fields — For Non-Full-Screen Alerts ».
Copiez-collez chaque fichier dans le bon onglet :
- HTML → onglet HTML
- CSS → onglet CSS
- JS → onglet JS
Cliquez sur « Edit Custom Fields » → collez le fichier Custom Fields → cliquez sur « Update Custom Fields » → cliquez sur Save.
Ouvrez les Custom Fields de cette variante et réglez :
- Horizontal Position : mettez 50
- Vertical Position : mettez 25
- Image Size : règle la taille d’affichage de l’alerte
- Alert Layout : réglez sur Image Above avec l’option de layout de la plateforme (pas celle des Custom Fields)
Vos alertes sont maintenant entièrement installées et configurées. En cas de problème, envoyez un ticket d’assistance depuis notre site et nous vous répondrons au plus vite.
Bloqué à une étape ?
Envoyez-nous un ticket d’assistance avec votre plateforme et l’étape où vous en êtes, et le studio vous guidera.
Envoyer un ticket d’assistance