Écrire un widget

Un widget fait main, c’est du HTML, du CSS et du JavaScript que tu écris toi-même, et qui réagit à ce qui se passe sur ta chaîne. Si les widgets tout faits ne suffisent pas, c’est par ici.

Où l’écrire

Sur le tableau de bord, ta chaîne, puis Widgets et Écrire un widget. Le code à gauche, le widget qui tourne à droite. De faux événements pour l’essayer sans attendre un vrai follow. Une erreur s’affiche avec sa ligne.

Une fois enregistré, il se pose dans un overlay depuis l’éditeur d’overlay, comme n’importe quel widget.

Réagir : akibot.on

akibot.on('alerte', (data) => {
  if (data.kind === 'follow') montrer(data.user + ' arrive !');
});

Le premier argument est le type d’événement, le second ta fonction, qui reçoit les données puis le type. '*' écoute tout.

Ce qu’il sait déjà : akibot.etat

akibot.etat.compteurs donne les compteurs de la chaîne ({ morts: 12 }), akibot.etat.citation la citation du moment, akibot.etat.objectifs la valeur des barres d’objectif. Mis à jour à chaque événement.

Ses réglages : akibot.champs et {{cle}}

Un widget peut déclarer des réglages, que la personne qui le pose change sans toucher au code : une couleur, un texte, un nombre. Types possibles : texte (texte), nombre (nombre), couleur (couleur), case (case à cocher), liste (liste de choix), image (image (adresse)). 30 réglages au plus.

La clé d’un réglage commence par une minuscule, puis lettres, chiffres et _. Sa valeur se lit de deux façons :

• dans le JavaScript, akibot.champs.couleur, déjà là à la première ligne ;
• dans le HTML et le CSS, {{couleur}} est remplacé avant le lancement. Dans le HTML, la valeur est échappée : un réglage ne peut pas glisser de balise.

<div class="nom">{{titre}}</div>

.nom { color: {{couleur}}; }

akibot.config donne le widget entier, tel qu’il est enregistré dans l’overlay.

Ce qu’un widget ne peut pas faire

Un widget de la galerie peut avoir été écrit par n’importe qui. Il tourne donc enfermé :

• aucune requête sortante : pas de fetch, pas de WebSocket, rien ne part ailleurs ;
• ni cookie, ni stockage, ni accès à la page autour ou au tableau de bord ;
• les images, les polices et les sons en https marchent, eux.

Sa taille est celle que tu règles dans l’éditeur d’overlay. Il ne peut pas la changer tout seul.

Le chat, c’est du texte. Écris-le avec textContent. En septembre 2026, des chercheurs ont montré qu’un message de chat posé en HTML dans un overlay peut aller jusqu’à prendre la main sur le PC du streamer, à cause du vieux Chromium d’OBS 32. Si ton widget fait quand même innerHTML = data.message, je nettoie au passage : plus de script, plus d’attribut onerror ou onclick, plus de lien javascript:. La mise en forme (<b>, <i>, les styles) reste. Un gestionnaire d’événement s’ajoute avec addEventListener, pas dans une chaîne de HTML.

Les limites

• 100 Ko de HTML, 100 Ko de CSS, 100 Ko de JavaScript. De quoi écrire un vrai widget, pas de quoi coller une bibliothèque entière.
• 30 réglages par widget.
• 50 widgets par chaîne.

Un exemple complet

Le dernier abonné, avec une couleur réglable (un réglage couleur de type couleur).

<!-- HTML -->
<div id="dernier">Personne encore</div>

/* CSS */
#dernier { font: 700 32px sans-serif; color: {{couleur}}; }

// JavaScript
const el = document.getElementById('dernier');
akibot.on('alerte', (data) => {
  if (['subscribe', 'resub', 'subgift'].includes(data.kind) && !data.essai) {
    el.textContent = data.user;
  }
});

Le partager

Un widget se publie dans la galerie depuis son éditeur. Tu acceptes qu’il soit repris et modifié ; celui qui le reprend en a une copie, et la galerie cite le tien comme original.

Comme il contient du code, je le relis avant qu’il apparaisse dans la galerie, et à chaque nouvelle version. Un overlay qui contient un widget fait main aussi. Le code de quelqu’un d’autre finit dans l’OBS d’un streamer : je préfère le lire avant.