Superposition
Utilisez Overlay pour afficher des alertes, des chats, des objectifs et d’autres éléments visuels sur votre flux. Overlay vous permet de créer des dispositions personnalisées en combinant différentes couches, regroupées en médias, événements Twitch et widgets. Vous pouvez créer plusieurs overlays, généralement un par scène dans votre logiciel de diffusion — par exemple, une scène de démarrage, principale et de fin. Ajoutez chaque overlay comme une source de navigateur distincte et utilisez un seul overlay par scène pour éviter les conflits tels que les sons d’alerte en double.
Paramètres de l’Overlay :
| Paramètre | Description |
|---|---|
| Nom de l’overlay | Nommez l’overlay pour savoir à quoi il sert. |
| Taille de l’écran | Faites correspondre la résolution de l’overlay à la sortie de votre logiciel de diffusion (par défaut : 1920 x 1080 px). |
| Arrière-plan en direct | La couleur de fond affichée dans votre outil de diffusion (par défaut : transparent). |
| Arrière-plan de l’éditeur | La couleur de fond affichée dans l’éditeur du Partner Network. |
Media
Text and labels
Pour ajouter une couche Text & Labels, cliquez sur + et sélectionnez Text & labels. Le champ Content est utilisé pour le texte affiché sur l’overlay. Tapez $ pour insérer une variable pour le contenu dynamique, comme une mention spéciale d’un spectateur.
Préférences :
- Hide until something happens — garde la couche cachée jusqu’à ce qu’un événement déclencheur se produise.
- Hide when all text variables are empty — masque la couche chaque fois que toutes les variables du texte n’ont pas de valeur.
Dernier abonné : $username qui n’apparaît qu’une fois que quelqu’un s’abonne — combinez une variable dans le champ Content avec la bascule Hide until something happens pour la garder hors de vue le reste du temps.Image and video
Pour ajouter une couche Image :
- Cliquez sur + et sélectionnez Image.
- Cliquez sur Upload pour télécharger une image :
- Formats acceptés : GIF, JPEG, PNG.
- Taille maximale : 20 Mo.
Pour ajouter une couche Video :
- Cliquez sur + et sélectionnez Video.
- Cliquez sur Upload pour télécharger une vidéo :
- Formats acceptés : MP4, WEBM, M4V, MOV.
- Taille maximale du fichier : 20 Mo.
Twitch events
Alert
Pour ajouter une couche Alert, cliquez sur + et sélectionnez Alert.
Types d’alerte — Follow, Tip, Subscription, Resubscription, Subscription gift, Community gift, Charity donation, Twitch cheer, Twitch raid. Activez ou désactivez chaque type, et remplacez individuellement les paramètres ci-dessus pour ce type.
Cliquez sur Default alert settings pour configurer les paramètres par défaut pour tous les types d’alerte. Le tableau ci-dessous décrit chaque paramètre :
| Paramètre | Description | Valeurs |
|---|---|---|
| Médias | Image ou vidéo affichée dans l’alerte. | Téléchargez un fichier ou sélectionnez-en un dans la galerie intégrée. |
| Effet sonore | Audio joué lorsque l’alerte apparaît. Utilisez Play pour l’écouter et Volume pour régler son niveau de lecture. | Téléchargez un fichier audio. |
| Durée | Temps pendant lequel l’alerte reste à l’écran. | Secondes |
| Délai du texte | Délai avant que le texte de l’alerte n’apparaisse. | Secondes |
| Masquer le texte après | Temps avant que le texte de l’alerte ne disparaisse après son apparition. | Secondes |
| Animation d’entrée | Animation d’entrée. | |
| Animation de sortie | Animation de sortie. |
Pour positionner l’alerte, faites-la glisser à n’importe quel endroit sur l’overlay. Pour la tester, utilisez le bouton Test pour prévisualiser chaque type d’alerte avant de passer en production.
Banner
Pour ajouter une couche Banner, cliquez sur + et sélectionnez Banner.
Paramètres :
- Background image — téléchargez une image ou sélectionnez-en une dans la galerie intégrée.
- Hide banner timing — activez Periodically hide/show this banner, puis définissez Hide (seconds) et Then show (seconds) pour contrôler le cycle.
Ajoutez une ou plusieurs bannières avec Add new ; supprimez-en une avec l’icône de la corbeille, ou cliquez sur une pour la configurer. Le tableau ci-dessous décrit chaque paramètre :
| Paramètre | Description | Valeurs |
|---|---|---|
| Titre | Étiquette pour cette bannière. | |
| Type | Type de contenu affiché dans la bannière. | Derniers pourboires, Meilleurs pourboires, Meilleurs pourboireurs, Derniers abonnés, Derniers dons caritatifs, Meilleurs dons caritatifs, Derniers raids, Dernières acclamations, Meilleures acclamations, Meilleurs acclamateurs, Aucun |
| Message | Texte affiché lors du cycle de la bannière. Prend en charge les variables de texte. | |
| Période | Période utilisée pour le type sélectionné. | Aujourd’hui, Cette semaine, Ce mois, Cette année, Tout le temps |
| Max affiché | Nombre maximum de spectateurs affichés par type. | |
| Animation | Animation de la bannière. | Fondu entrant et sortant, Défilement, Afficher tout |
| Afficher les avatars en ligne | Avatar Twitch du spectateur affiché sur la bannière. | Activé, Désactivé |
L’arrière-plan de l’en-tête, la couleur de fond, la transparence et la police sont également personnalisables par bannière.
Chat
Pour ajouter une couche Chat, cliquez sur + et sélectionnez Chat.
Configurez les paramètres suivants :
- Show avatars — affiche la photo de profil du spectateur à côté de son message.
- Show platform icon — affiche l’icône de la plateforme à côté de chaque message.
- Show colored line for platform — affiche une ligne colorée indiquant le rôle de l’expéditeur. Couleurs des rôles :
- Streamer (Vous)
- Modérateur
- Abonné
- Turbo
- Spectateur
- Show message and username on separate lines — affiche le nom d’utilisateur et le message sur des lignes séparées.
- Reverse direction — contrôle si les nouveaux messages apparaissent en haut ou en bas.
- Duration (seconds) — temps pendant lequel un message reste à l’écran.
Events
Pour ajouter une couche Events, cliquez sur + et sélectionnez Events.
Configurez les paramètres suivants :
- Event types — sélectionnez les types d’événements à afficher. Types disponibles :
- Pourboires
- Abonnés
- Abonnés
- Réabonnés
- Dons caritatifs
- Acclamation Twitch
- Raid Twitch
- Number of events — nombre maximum d’événements affichés en même temps.
Goal
Un objectif suit la progression vers une cible, comme le nombre d’abonnés, le nombre de followers ou les bits Twitch. Pour ajouter une couche Goal, cliquez sur + et sélectionnez Goal, puis cliquez sur Add goal. Configurez les paramètres suivants :
| Paramètre | Description | Valeurs |
|---|---|---|
| Type d’objectif | Métrique suivie par l’objectif. |
|
| Nom | Nom de l’objectif. | |
| Cible | Valeur cible pour le type d’objectif sélectionné. | |
| Disposition | Apparence de l’objectif. |
|
| Commande de déclenchement | La commande qui déclenche une couche Déclencheur sur la même scène lorsque l’objectif est atteint. |
Vous pouvez également télécharger une image d’arrière-plan ou en sélectionner une dans la galerie.
Trigger
Les couches de déclencheur créent des commandes de chat qui affichent des médias et/ou des sons sur votre flux. L’accès peut être limité par rôle de chat, ou coûter des points de fidélité de votre programme de fidélité Partner Network (les points de chaîne Twitch ne sont pas utilisés pour cela).
Pour ajouter une couche Trigger, cliquez sur + et sélectionnez Trigger. Configurez le déclencheur à l’aide des paramètres suivants :
| Paramètre | Description | Valeurs |
|---|---|---|
| Description | Description affichée dans la liste des commandes disponibles de votre site de créateur. | |
| Commande | Commande de chat utilisée pour déclencher l’action. | |
| Coût en points | Points de fidélité requis pour utiliser le déclencheur. | |
| Temps de recharge | Temps avant que le déclencheur puisse être utilisé à nouveau. | Secondes |
| Durée de l’image | Temps pendant lequel le média reste à l’écran. | Secondes |
| Accès par rôle | Utilisateurs autorisés à utiliser le déclencheur. | Tous, Abonnés, Aucun (liste blanche) |
| Médias | Image ou vidéo affichée lorsque le déclencheur est activé. | JPG, PNG, GIF, MPEG (max 20 Mo) |
| Effet sonore | Audio joué lorsque le déclencheur est activé. | MP3, WAV, OGG (max 20 Mo) |
Widgets
Countdown
Les couches de compte à rebours affichent un compte à rebours en direct jusqu’au début de votre flux, à la révélation d’un événement ou à un sub-a-thon.
Pour ajouter une couche Countdown, cliquez sur + et sélectionnez Countdown.
Configurez les paramètres suivants :
- Title — texte affiché au-dessus du compte à rebours (par exemple, Démarrage imminent)
- Target — cible du compte à rebours :
- Pick date and time — compte à rebours jusqu’à une date et une heure fixes.
- Set duration from now — compte à rebours pour une durée spécifiée.
- Display format :
- Jours : Heures : Minutes : Secondes
- Heures : Minutes : Secondes
- Minutes : Secondes
- Secondes
- Show labels under each digit — affiche les étiquettes pour les unités de temps utilisées dans le compte à rebours.
- Show a custom message when complete — affiche un message personnalisé après la fin du compte à rebours.
- Style — rayon de la bordure.
Now playing
La couche Now playing affiche la chanson actuellement jouée sur un lecteur de musique connecté à Last.fm.
Pour ajouter une couche Now playing :
- Cliquez sur + et sélectionnez Now playing.
- Créez un compte Last.fm si vous n’en avez pas.
- Configurez un scrobbler Last.fm — l’outil qui envoie vos données musicales à Last.fm. De nombreux lecteurs le prennent en charge nativement, d’autres nécessitent un logiciel supplémentaire ou une extension Chrome pour les lecteurs basés sur le Web. Last.fm se synchronise avec Spotify, YouTube, Apple Music, Tidal et SoundCloud.
- Liez votre lecteur de musique à votre compte Last.fm.
Vous pouvez également télécharger une image d’arrière-plan ou en sélectionner une dans la galerie.
Si la chanson n’apparaît pas sur votre overlay, vérifiez votre profil Last.fm pour confirmer que votre scrobbler envoie les données de chanson là-bas. Si la chanson n’apparaît pas non plus sur Last.fm, le scrobbler lui-même ne fonctionne pas — vérifiez la connexion ou l’extension Last.fm de votre lecteur.
Code
Les couches de code permettent aux développeurs de créer leurs propres couches d’overlay avec du code personnalisé. Il n’y a pas de limite au nombre de couches que vous pouvez ajouter à votre overlay.
Pour ajouter une couche Code, cliquez sur + et sélectionnez Code.
Configurez les paramètres suivants :
- Définissez le champ Message — une variable que votre code peut référencer (par défaut :
Hello ${username}) - Cliquez sur Open editor pour éditer votre couche en utilisant HTML, CSS, JavaScript ou Blueprint.
- Cliquez sur Save pour appliquer vos modifications.
Ajouter votre overlay à votre logiciel de diffusion
Pour ajouter votre overlay à votre logiciel de diffusion, allez dans l’onglet Overlay de votre dashboard, copiez l’URL de votre overlay et ajoutez-la comme source de navigateur/web :
Lightstream
Lightstream Studio utilise le même éditeur d’overlay que Partner Network — chaque type de couche disponible dans l’éditeur Overlay de Partner Network est également disponible directement dans Lightstream Studio, et toute scène que vous y construisez est visible dans Partner Network. Dans la plupart des cas, si vous utilisez Lightstream Studio, vous pouvez construire votre overlay directement là-bas au lieu d’en importer un depuis Partner Network.
Si vous avez déjà construit un overlay séparé dans le compte créateur Partner Network et souhaitez l’importer dans Lightstream via URL :
- Allez sur la page Overlay.
- Cliquez sur le bouton de chaîne URL pour copier l’URL de votre overlay.
- Allez sur Lightstream :
- Pour Lightstream Studio Browser Source :
- Cliquez sur Ajouter.
- Dans la section Intégrations tierces, cliquez sur Source de navigateur.
- Choisissez Xsolla Partner Network.
- Collez votre URL et cliquez sur Vérifier l'URL.
- Pour Lightstream Studio Browser Source :
- Pour Lightstream Classic Browser Source :
- Cliquez sur Ajouter une couche.
- Cliquez :
- Intégrations tierces et choisissez Xsolla Partner Network.
- La bannière Partner Network en bas.
- Collez votre URL et cliquez sur Vérifier l'URL.
- Pour Lightstream Classic Browser Source :
OBS Studio
Pour ajouter votre overlay dans OBS Studio :
- Allez sur la page Overlay.
- Cliquez sur le bouton de chaîne URL pour copier l’URL de votre overlay.
- Dans OBS Studio, cliquez sur le signe + sous la section Sources et sélectionnez Browser.
- Nommez la source et cliquez sur OK.
- Collez votre URL d’overlay dans le champ URL. Sous Width & height, faites correspondre la résolution à votre overlay (par défaut : 1920 x 1080 px).
Diffusion sur console
Les consoles Xbox et PlayStation ne prennent pas en charge les sources de navigateur, vous ne pouvez donc pas ajouter un overlay à votre flux depuis la console elle-même. Nous recommandons d’utiliser Lightstream :
- Configurez votre console pour diffuser vers Lightstream au lieu de directement vers Twitch.
- Ajoutez votre overlay dans l’éditeur Web de Lightstream. Lightstream envoie le flux combiné à Twitch, vous n’avez donc besoin que d’un appareil avec un navigateur Web.
Alternativement, diffusez depuis un PC en utilisant une carte de capture et un logiciel de diffusion.
Même sans overlay configuré, les pourboires et les notifications dans le chat fonctionneront toujours si activés.
Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entrée.
