Cartes de viewers
Donne à chaque viewer une carte de scores : ses propres scores — messages pendant le stream et depuis toujours, Bits, récompenses… — en sections d'une ou deux colonnes, ses badges de chat et son niveau d'abonnement, et les badges des succès qu'il a débloqués. Une carte s'affiche quand un viewer la demande (une commande…), la carte de chaque viewer actif défile à tour de rôle, ou toutes défilent ensemble, chaque mode d'affichage sur ses propres déclencheurs, dans une seule source navigateur.
Les cartes de viewers font partie des widgets Stream Scores, avec le tableau des scores. Elles fonctionnent gratuitement dans un overlay, avec un mode d'affichage, 5 scores par plateforme et 5 succès par liste ; Stream Scores Licence lève ces limites → Stream Scores Licence.
Plateformes : Twitch, YouTube, Kick, et les intégrations par le nom
Pack d'actions : nécessaire — Stream UI - Backend écrit les variables des viewers, les ajoute aux groupes des succès et enregistre les captures. Voir Qui a besoin de quoi.
Fonctionnement
- Les scores vivent dans Streamer.Bot, dans les variables utilisateur de chaque viewer,
sur la plateforme d'où il vient —
temp_messages,messages… Vos propres actions peuvent les lire et les changer. - Seul ce que fait un viewer compte. Les sélecteurs de déclencheurs ne proposent que
ceux qu'un viewer déclenche : les événements des plateformes, Core › Commands, les
événements d'intégration qui nomment une personne, et User Global Variable Updated
(une variable d'un viewer qu'un autre outil écrit, comme le
firstInChatdu Premier du chat). - Les intégrations sont reconnues par le nom. Un don Ko-fi ne porte qu'un nom : il compte pour le viewer du même nom sur chaque plateforme où Streamer.Bot le connaît (il y a une variable utilisateur). Le champ qui contient le nom se règle sur la page Réglages, sous la ligne de l'intégration.
- Les succès sont des groupes d'utilisateurs. Quand un viewer déclenche un succès, il rejoint son Groupe Streamer.bot, le déclencheur personnalisé New Achievement Unlocked se déclenche (s'il est activé) et son Message dans le chat est posté dans son chat — une seule fois : un viewer déjà dans le groupe n'obtient rien.
- Les photos et badges viennent du chat. Aux premiers mots de chaque viewer, sa photo
de profil et ses badges de chat sont enregistrés dans ses variables
profilePicetuserBadges, pour sa carte. - Compté par l'overlay qui lance les actions, tant que le comptage est actif. Lancer le comptage et Arrêter le comptage, à la main ou par déclencheur, le règlent
(
streamUi.off.viewercardsdans Streamer.Bot). Par défaut, il démarre et s'arrête avec votre stream Twitch. Les photos sont enregistrées dans tous les cas. - Tout le monde compte, sauf vos utilisateurs ignorés : ils n'ont ni score, ni succès, ni carte.
La page
- Réglages, Style et Commandes, les onglets au-dessus de l'éditeur.
- Dans l'onglet Réglages, la colonne Réglages liste Modes d’affichage, Card options, Sections des cartes, Scores et Succès. Modes d’affichage ouvre ses trois modes dans une colonne à part ; les trois dernières ouvrent leurs plateformes dans une colonne à part, puis la liste de la plateforme à côté.
- Aperçu du widget contre le bord droit de la fenêtre : l'aperçu (la carte du viewer de démonstration), les boutons de test et l'URL propre au widget. Faites glisser son bord gauche pour l'élargir, jusqu'à la moitié de la fenêtre ; il garde sa largeur. Widget montre le widget dans sa position, découpé dans le canevas tel que votre source navigateur le dessine ; Sur le canevas, tout le canevas.
Mise en place
Connectez Streamer.Bot et ajoutez le pack d'actions
Activez-le
Activez Ajouter à l’overlay. Chaque plateforme démarre avec une section Chat et un score
💬 Messages : temp_messages pour le stream, messages depuis toujours.
Choisissez ce qui affiche une carte
Dans l'onglet Commandes, Afficher la carte seule dans la colonne Commandes, puis Ajouter un déclencheur — une commande !card, par exemple. Vous avez activé d'autres modes
d'affichage ? Chacun y a sa propre liste Afficher.
Mettez à jour votre source navigateur
Recopiez l'URL de l'overlay dans votre source navigateur → Disposition et source navigateur.
Réglages
Modes d’affichage
Trois façons d'afficher les cartes, chacune activée par l'interrupteur de sa ligne, avec sa propre liste de déclencheurs Afficher et son bouton Afficher dans l'onglet Commandes. Elles s'affichent toutes au même endroit du widget, donc une seule source navigateur suffit : un nouvel affichage remplace les cartes à l'écran, et Masquer les cartes masque ce qui est affiché. Seul Carte seule est activé par défaut. Sans Stream Scores Licence, un seul mode à la fois : désactivez-le avant d'en activer un autre.
| Mode | Réglages | Détail |
|---|---|---|
| Carte seule | Durée à l’écran (60 s) ; sous Options d’enregistrement, Enregistrer une image de chaque carte (désactivé) et son Dossier des captures (tapé, ou Parcourir…) | La carte de celui qui a lancé son déclencheur Afficher — il faut un déclencheur qu'un viewer déclenche. Les images sont des PNG, enregistrés par l'overlay qui lance les actions, quand il affiche les cartes. |
| Toutes les cartes à tour de rôle | Durée par carte (10 s), En boucle (activé) | La carte de chaque viewer actif, une à la fois, avec la Transition d’apparition du widget. N'importe quel déclencheur convient. |
| Toutes les cartes en défilement | Vitesse de défilement (50 px/s), En boucle (activé) | La carte de chaque viewer actif, qui défilent ensemble. N'importe quel déclencheur convient. |
En boucle désactivé : masqué après un passage.
Réglages de la carte
Les cartes affichées, puis les trois parties de la carte, de haut en bas. Tous les interrupteurs sauf le premier sont activés par défaut.
- Spectateurs : Abonnés et membres seulement (désactivé) : seulement les cartes des abonnés et des membres.
- En-tête : Afficher l’icône de plateforme, Afficher le niveau d’abonnement (niveaux Twitch I, II, III) et Afficher les badges du chat.
- Corps : Disposition des sections, les sections d'une carte Horizontal (côte à côte, par défaut) ou Vertical (les unes sous les autres).
- Pied de carte : Afficher les badges de succès, Afficher le nom de la chaîne (le nom et la photo de votre chaîne, les mots Viewer card) et Afficher la date.
Sections des cartes
Une ligne par plateforme, sa Liste des sections : les blocs de ses cartes, dans l'ordre.
| Champ | Détail |
|---|---|
| Titre de la section | Son titre sur la carte. |
| Colonnes | Une (une valeur par score) ou Deux (deux valeurs côte à côte). |
| Titre de la première colonne, Titre de la deuxième colonne | Avec deux colonnes : Ce stream, All time par défaut. |
Scores
Une ligne par plateforme, sa Liste des scores. Le score choisi :
| Champ | Détail |
|---|---|
| Nom du score | Son nom sur la carte. |
| Section de la carte | La section où elle se trouve. |
| Masquer la variable 1 | Deux colonnes : la première n'est pas affichée. |
| Nom de la variable · Variable 1 name · Variable 2 name | Les variables utilisateur du viewer qui contiennent ses valeurs, une par colonne. Sous chacune, Masquer si 0 (la valeur se masque tant qu'elle vaut 0, la ligne quand toutes ses valeurs affichées le valent) et Rendre la variable persistante (Rendre la variable persistante 1 / 2 : si elle est persistante). |
| Gérer dans Streamer.bot | Vos propres actions gardent les valeurs (ou un autre outil, comme le Premier du chat de Stream UI) : aucun déclencheur ne les compte ici. |
| Comparer les deux variables | Deux colonnes : Ce stream et depuis toujours (ses déclencheurs augmentent les deux, la première temporaire, la seconde persistante), Actuel et record (les deux persistantes) ou Deux valeurs indépendantes (chaque colonne ses propres déclencheurs, et son propre interrupteur Rendre la variable persistante). |
| Résumé | Chaque déclencheur compté lu comme une phrase, pour vérifier que le score fait ce que vous voulez : Le score Messages sera augmenté de 1 quand Chat Message se déclenche. Sans déclencheur, elle vous invite à en ajouter un. |
Déclencheurs comptés, à côté du score, chacun avec sa Incrément du score : Ajouter 1, Ajouter la valeur d’une variable ou Remplacer par la valeur d’une variable (avec Only replace if the new value is higher than the current value pour garder la plus haute). Avec Deux valeurs indépendantes, un sélecteur sous Ajouter un déclencheur choisit Variable 1 ou Variable 2. Un déclencheur User Global Variable Updated qui surveille la variable du score elle-même est ignoré, et la page le signale.
Le menu d'un score a aussi Copier vers YouTube (ou une autre plateforme).
Succès
Une ligne par plateforme, chacune avec sa Liste des succès. Un succès obtenu par une commande ou une intégration va dans la liste de chaque plateforme où il compte.
| Champ | Détail |
|---|---|
| Nom du succès | Par exemple Twitch Follow. |
| Groupe Streamer.bot | Le groupe d'utilisateurs que rejoint le viewer, par exemple twitch-follow. |
| Afficher le badge du succès | Sous Réglages du badge, Image du badge en dessous. Activé par défaut : son badge sur les cartes de ceux qui l'ont. Désactivé : pas de badge, ni de Image du badge. |
| Image du badge | Fichier local : une image de votre PC (Importer une image), réduite et enregistrée dans Streamer.Bot (connecté), pas dans l'URL de l'overlay. Lien : un lien d'image. |
| Message dans le chat | Posté dans le chat du viewer quand il est débloqué, par exemple 🎖️ {user} unlocked the "{achievement}" achievement! Variables : {user}, {achievement}, {group}, {platform}. |
| Déclencheur personnalisé au déblocage | Activé par défaut : le débloquer lance le déclencheur personnalisé New Achievement Unlocked dans Streamer.Bot, pour vos propres actions. |
Débloqué par, à côté : ses déclencheurs, avec une condition facultative — un resub de
12 mois, global.newValue ≥ 10… → Déclencheurs et conditions.
New Achievement Unlocked
Chaque fois qu'un viewer débloque un succès dont Déclencheur personnalisé au déblocage est activé, le widget lance aussi un déclencheur personnalisé dans Streamer.Bot, au même moment que le message de chat du succès. Servez-vous-en pour le fêter à votre façon : jouer un son, afficher une alerte, offrir des points de chaîne…
Le déclencheur est envoyé par l'overlay qui lance les actions, pendant le comptage. Il est ajouté par l'action Stream UI - Backend : après avoir importé de nouveau les actions, redémarrez Streamer.Bot pour que le déclencheur apparaisse.
Créez une action
Dans l'onglet Actions de Streamer.Bot, faites un clic droit dans la liste des actions et choisissez Ajouter. Donnez-lui un nom, par exemple Succès débloqué.
Ajoutez le déclencheur
Dans les Déclencheurs de l'action, faites un clic droit et choisissez Custom › Stream UI › New Achievement Unlocked.
Ajoutez vos sous-actions
Utilisez-y les variables ci-dessous, par exemple une sous-action Send Message to
Channel avec %message%, le message de chat du succès déjà rempli.
| Variable | Valeur | Détail |
|---|---|---|
userName | %userName% | Le nom du viewer. |
user | %user% | La même chose, comme le {user} du message de chat. |
platform | %platform% | twitch, youtube ou kick. |
achievementName | %achievementName% | Le nom du succès. |
achievement | %achievement% | La même chose, comme le {achievement} du message de chat. |
groupKey | %groupKey% | Son groupe Streamer.Bot, où se trouve désormais le viewer. |
group | %group% | La même chose, comme le {group} du message de chat. |
message | %message% | Son message de chat, rempli (vide s'il n'en a pas). |
Les actions qui y étaient liées sous l'ancien site Stream Scores continuent de fonctionner : le déclencheur et ses variables gardent leurs noms.
Style
Chaque élément suit le style de l'overlay champ par champ : un champ modifié devient celui du widget, avec une flèche de réinitialisation à côté. Style pour restyle une plateforme à part. Voir Apparence.
| Élément | Détail |
|---|---|
| Fonds › Conteneur, Fond, Fond de section | Le cadre du widget (le style Conteneur des widgets de l'overlay, il aligne la carte sur la position du widget), la carte (le style Fond des widgets de l'overlay, 600 px de large) et le bloc de chaque section. |
| Viewer › Photo de profil, Pseudo, Badges du chat, Icône de plateforme | La ligne du haut : la photo du viewer (Photos de profil de l'overlay), son nom (Titres), ses badges et sa plateforme (Icônes des plateformes). |
| Texte › Titre de la section, Titre de colonne, Nom du score, Valeur du score | Les textes des sections : les titres au style Sous-titres de l'overlay, les noms de score en Texte secondaire, les valeurs en Text. |
| Pied de carte › Badges de succès, Nom de la chaîne, Photo de la chaîne, « Carte de viewer » et date | Le pied de carte : les badges de succès (48 px), votre chaîne (Texte) et la date (Sous-titres). |
| Transition d’apparition | L'apparition et la disparition d'une carte, et le passage d'une carte à l'autre. |
Position par défaut
Centre, largeur automatique. → Onglet Disposition du Créateur d’overlay
Événements Streamer.Bot écoutés
| Événement | Ce qu'il déclenche |
|---|---|
| Les déclencheurs des scores et des succès | Compte les scores du viewer, débloque des succès |
Twitch.FirstWord, YouTube.FirstWords, Kick.FirstWords | Enregistre la photo et les badges du viewer |
| Les déclencheurs Afficher de chaque mode d'affichage activé, Masquer les cartes, Lancer le comptage et Arrêter le comptage | Affiche ou masque des cartes, lance ou arrête le comptage |
General.Custom | Les commandes viewerCardsShow et viewerCardsHide |
Misc.GlobalVariableUpdated, Misc.GlobalVariableCreated | Comptage lancé ou arrêté ailleurs |
Commandes
- La colonne Commandes : un Afficher par mode d'affichage activé (Afficher la carte seule, Afficher toutes les cartes à tour de rôle, Afficher toutes les cartes en défilement), puis Masquer les cartes, Lancer le comptage et Arrêter le comptage, chacun avec sa Liste des déclencheurs.
- La zone principale, et la fenêtre de contrôles : Lancer le comptage / Arrêter le comptage (Cartes de viewers : Comptage en cours ou Arrêté), les mêmes boutons Afficher (Afficher la carte seule affiche la carte de votre chaîne) et Masquer les cartes.
Vos propres actions Streamer.Bot peuvent aussi afficher et masquer les cartes. Les listes
de déclencheurs sont le plus simple : ajoutez une commande !carte à Afficher la carte seule et
elle affiche la carte de celui qui l'a tapée. Les deux commandes ci-dessous font la même
chose depuis n'importe quelle action, et lui laissent choisir le mode d'affichage et la
carte affichée. Elles ne demandent aucune action du pack.
viewerCardsShow
Affiche les cartes. Carte seule : la carte du viewer que la commande nomme, ou celle de votre chaîne quand elle ne nomme personne. Toutes les cartes à tour de rôle ou Grouped : la carte de chaque viewer actif, quel que soit le nom donné. Un mode désactivé (ou inutilisable sans la licence) n'affiche rien.
| Champ | Détail |
|---|---|
event | viewerCardsShow. Obligatoire. |
display | single, separate ou grouped. Sans lui : le premier mode activé. |
user | Le login du viewer. Sans lui : la carte de votre chaîne. |
userId | Son identifiant sur la plateforme : ses variables sont lues par identifiant. |
platform | twitch, youtube ou kick. Sans elle : votre première plateforme avec un compte connecté. |
Ouvrez l'action
Dans l'onglet Actions de Streamer.Bot, ouvrez l'action qui doit afficher une carte
(celle de votre commande !carte, d'une récompense de points de chaîne…), ou faites un
clic droit dans la liste → Ajouter pour en créer une.
Ajoutez la sous-action
Dans ses Sub-Actions, clic droit → Core › C# › Execute C# Code.
Collez le code
Collez ce code, cliquez sur Compile, puis sur Enregistrer. Il affiche la carte du viewer qui a lancé l'action.
using System;
using Newtonsoft.Json;
public class CPHInline
{
public bool Execute()
{
// The viewer who set the action off: their login, id and platform
CPH.TryGetArg("userName", out string login);
CPH.TryGetArg("userId", out string userId);
CPH.TryGetArg("userType", out string platform);
var command = new { @event = "viewerCardsShow", display = "single", user = login, userId, platform = platform?.ToLower() };
CPH.WebsocketBroadcastJson(JsonConvert.SerializeObject(command));
return true;
}
}
Pour afficher plutôt la carte de votre chaîne, remplacez les lignes de Execute()
au-dessus de return true; par la commande seule :
CPH.WebsocketBroadcastJson("{\"event\":\"viewerCardsShow\",\"display\":\"single\"}");
— ou separate / grouped à la place pour la carte de chaque viewer.
viewerCardsHide
Masque les cartes. Les mêmes étapes, avec ce code :
using System;
public class CPHInline
{
public bool Execute()
{
CPH.WebsocketBroadcastJson("{\"event\":\"viewerCardsHide\"}");
return true;
}
}
Stream Scores Licence
Sans la licence : un seul overlay affiche les cartes de viewers, un seul mode d'affichage est activé à la fois, et seuls les 5 premiers scores de chaque plateforme et les 5 premiers succès de la liste de chaque plateforme comptent et s'affichent — dans l'ordre de votre liste, donc la réordonner les choisit. Ceux au-delà de la limite restent modifiables, marqués Not used without Stream Scores Licence (les modes d'affichage activés pendant que vous aviez la licence aussi : seul le premier s'affiche) ; rien n'est jamais supprimé, et tout revient avec la licence. Stream Scores Licence (4,99 € par mois ou 99,99 € une fois, hors TVA) lève toutes les limites et retire les publicités → L'onglet Licence. La source navigateur vérifie la clé elle-même, depuis son URL.
Tableau des scores
Un tableau des scores du stream en direct — messages, follows, subs, Bits, pic de viewers… comptés sur chaque plateforme pendant le stream, à côté de leur record.
Shoutout
Affiche la photo d'un streamer et l'un de ses clips quand vous lui faites un shoutout, quand il vous raid, ou quand un streamer que vous connaissez arrive dans le chat.

