É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.
| Type | Quand | Ce que contient data |
|---|---|---|
alerte | Follow, abonnement, bits, raid, points… | kind (follow, subscribe, resub, subgift, cheer, raid, points), titre, sous, et les variables de l’alerte (liste). essai vaut true pour une alerte émulée, rejoue pour une alerte renvoyée depuis le fil d’activité. |
chat | Un message dans le chat | user, login, message, couleur, badges, commande (vrai pour une commande du bot), bot (vrai pour un bot reconnu), morceaux (le texte découpé en texte et emotes). |
chat-retrait | La modération retire un message | id du message, ou login de la personne pour un ban ou une exclusion. |
compteur | Un compteur change | nom, valeur. |
jeu | Pendu, motus, devine le mot | L’état de la partie, jamais la solution tant qu’elle tourne. |
clip | Un clip vient d’être créé | Le clip et qui l’a fait. |
alertes-retrait | Une vague de follows est bloquée | kind des alertes retirées de la file. |
etat | Au chargement | Les compteurs, la citation, les objectifs (voir plus bas). |
config | L’overlay a été modifié | Rien d’utile : la page se redessine d’elle-même. |
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.
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.