Utiliser les overlays de streaming gratuitement avec OBS : étape par étape

OBS Studio est la norme gratuite pour la diffusion en direct. Il est bien conçu, il est open source et fonctionne de manière stable sous Windows, macOS et Linux. Ce qu'il ne peut pas faire : afficher de lui-même des alertes de don ou un objectif de don. Vous avez besoin d'une plate-forme d’overlay pour cela, et dans ce guide, nous expliquons comment intégrer ces overlays dans OBS.

Le concept : source navigateur

OBS a un type de source intégré appelé Navigateur . Avec cela, OBS charge une page Web sous forme de calque dans votre scène, avec un arrière-plan transparent. Nos pages d’overlay ne sont que cela : une mini-page Web qui écoute les dons et les événements entrants et ne s'affiche que lorsque quelque chose se produit.

Avantage : pas de programme supplémentaire, pas de téléchargement séparé, pas de filigrane. Vous collez une URL et vous avez terminé.

Étape 1 : Recherchez vos URL d’overlay

Créez d'abord un compte DonoLink et choisissez un nom d'utilisateur. Allez ensuite sur le tableau de bord, cliquez sur Overlays dans la barre latérale et vous verrez les six types d’overlay :

• Alertes : animation + son à chaque don
• Objectif du don : barre avec votre objectif et votre position actuelle
• Dons récents : liste des cinq derniers
• Chat : votre chat Twitch dans une boîte personnalisable
• Médias : clips YouTube demandés par les spectateurs
• Classement : meilleurs donateurs du jour/semaine/mois

Vous disposez d'une URL unique pour chaque type contenant votre nom d'utilisateur. Par exemple pour les alertes : https://donolink.nl/overlay/jouwnaam/alerts .

Étape 2 : Ajouter une source navigateur dans OBS

1. Ouvrez OBS Studio.
2. Sélectionnez la scène où vous souhaitez afficher l’overlay. De nombreux streamers créent une scène Overlay distincte, qu’ils ajoutent ensuite comme source dans leurs autres scènes.
3. Dans le panneau Sources, cliquez sur le signe plus et choisissez Navigateur .
4. Donnez un nom à la source (par exemple Alertes DonoLink ) et cliquez sur OK.
5. Collez le lien dans le champ URL.
6. Réglez la largeur sur 1920 et la hauteur sur 1080 pour les alertes et le chat. Pour l’overlay de cibles, 600 de large et 200 de haut suffisent ; pour les dons récents de 400 de large et 600 de haut.
7. Décochez Fermer la source si elle n’est pas visible. Sinon, vous manquerez les dons d’overlay qui arrivent pendant que vous changez temporairement de scène.
8. Cochez Actualiser la page lorsque la scène devient active. Cela garantit que l’overlay se charge toujours à nouveau lorsque vous démarrez votre stream.
9. Cliquez sur OK.

Faites glisser la source au bon endroit dans votre mise en page. Pour les alertes, c'est généralement en haut au centre ; pour l’objectif en haut à droite ou en bas de la barre de webcam.

Étape 3 : tester l'alerte

Dans le tableau de bord, accédez à Overlays et ouvrez l'onglet d'alerte. Il y a un bouton de test qui envoie un don fictif à votre overlay. Activez-le et voyez si l'animation et le son apparaissent dans OBS.

Pas de son ? Vérifiez si la source navigateur n'est pas figée (clic droit sur la source, Audio réglages du mixeur). OBS dispose parfois d'un curseur de volume distinct par source navigateur.

Étape 4 : personnaliser les alertes

L'alerte standard convient, mais la plupart des streamers veulent quelque chose de personnalisé. Dans le tableau de bord, vous pouvez ouvrir le personnalisateur d'alerte et créer votre propre variante par montant de don : un don de 1 € reçoit une petite cloche, un don de 25 € reçoit des feux d'artifice et un don de 100 € reçoit un GIF avec votre propre logo.

Pour chaque variante que vous définissez :

• Image, GIF ou vidéo en cours de lecture (faites glisser un fichier vers le bloc à télécharger, max 10 Mo)
• Extrait sonore ou le carillon intégré
• Modèle de texte ( {naam} a fait un don de {bedrag} )
• Couleur, police, position, durée, animation du texte
• TTS (lecture du message) allumé ou éteint

Vous pouvez voir un aperçu de l'ensemble de la configuration en direct dans une petite fenêtre d’aperçu du stream à côté de l'éditeur. Ajustez, enregistrez et votre overlay OBS s’actualisera automatiquement.

Étape 5 : Ajouter un objectif de don

L’objectif de dons est une source navigateur distincte avec sa propre URL. Définissez l'objectif dans le tableau de bord (par exemple nouveau micro 200 € ) et la date de début ( à partir de maintenant ). La barre comptabilise automatiquement les dons versés à partir de cette date.

Astuce : définissez le montant de départ sur zéro et le montant de l’objectif sur quelque chose qui est réalisable en un ou deux streams. Un objectif de 2 000 € qui atteint 15 € au bout d'une heure est décourageant ; un objectif de 50 € qui atteint 35 € au bout d'une heure est motivant.

Étape 6 : Dons récents et classement

L’overlay des dons récents montre les cinq derniers donateurs avec le montant et le message. Il utilise les mêmes données que les alertes. Pratique pour les spectateurs qui rejoignent le stream plus tard : ils peuvent immédiatement voir que quelqu'un vient d'envoyer quelque chose.

Le classement montre les principaux donateurs d'une période (jour, semaine, mois ou de tous les temps). Pour les spectateurs qui reviennent, il s'agit d'un élément social : ils voient leur nom, et s'ils reculent de deux places, ils ont une excuse pour en remettre dix.

Étape 7 : chat et médias

L’overlay de chat lit votre chat Twitch de manière anonyme et l'affiche dans une zone personnalisable de votre mise en page. Aucune connexion API requise : vous entrez votre login Twitch dans les paramètres et le tour est joué.

L’overlay multimédia permet aux spectateurs de demander un clip YouTube via un lien spécial ( donolink.nl/u/votrenom/request ). Vous gérez la file d'attente et lisez des clips dans une source navigateur sur votre stream. Combinez-le avec un montant minimum de don pour filtrer les demandes indésirables.

Problème : l’overlay ne se charge pas

Dans OBS, faites un clic droit sur la source et sélectionnez Propriétés , alors Actualiser le cache . Si cela ne fonctionne pas, collez l'URL dans un vrai navigateur pour voir si l’overlay y apparaît. S'il apparaît dans le navigateur mais pas dans OBS, il s'agit presque toujours d'un problème de cache ; supprimez la source et ajoutez-la à nouveau.

Prêt ? Bon. Vous disposez désormais d’une configuration d’overlay professionnelle sans abonnement ni filigrane. Pour un guide complet de l’ensemble de la configuration initiale, lisez notre guide de démarrage .