Guide · 6 étapes
Comment ajouter un widget personnalisé dans StreamElements
Un widget personnalisé est un widget StreamElements dont tu fournis toi-même le code. C'est ainsi que la plupart des widgets premium sont livrés quand il n'y a pas d'installation en un clic, et ça prend environ cinq minutes.
Réponse rapide
Ouvre un overlay dans StreamElements, clique sur +, choisis Static/Custom › Custom widget, sélectionne le nouveau widget et clique sur Open Editor. Colle le code dans les onglets HTML, CSS, JS et FIELDS, ferme l'éditeur, clique sur Save, puis ajoute l'URL de l'overlay dans OBS comme source Navigateur.
Pas à pas
Ouvre ou crée un overlay
Dans StreamElements, va dans Streaming tools › My overlays. Ouvre un overlay existant, ou crée-en un nouveau en 1920×1080.
Ajoute un widget personnalisé
Dans l'éditeur d'overlay, clique sur + et choisis Static/Custom › Custom widget. Un widget provisoire apparaît sur le canevas.
Ouvre l'éditeur de code
Sélectionne le widget et clique sur Open Editor dans le panneau de gauche. L'éditeur a quatre onglets : HTML, CSS, JS et FIELDS.
Colle le code
Remplace le contenu de chaque onglet par le fichier correspondant de ton téléchargement. Les fichiers de code portent en général le nom de l'onglet (par exemple widget.html, widget.css, widget.js et fields.json). Colle le fichier de champs dans FIELDS ; il crée les réglages que tu pourras modifier ensuite.
Enregistre et positionne
Ferme l'éditeur et clique sur Save en haut de l'éditeur d'overlay. Fais glisser et redimensionne le widget sur le canevas, puis utilise ses réglages dans le panneau de gauche pour changer textes, couleurs et options.
Affiche-le dans OBS
Copie l'URL de l'overlay avec l'icône de lien. Dans le panneau Sources, clique sur +, choisis Navigateur (Browser), donne un nom à la source puis clique sur OK. Colle l'URL, règle 1920×1080 et clique sur OK.
Bon à savoir
- L'onglet FIELDS crée les réglages du widget. Si le panneau de réglages est vide après le collage, vérifie que le fichier de champs est bien dans FIELDS et pas dans JS.
- Colle chaque fichier en entier dans son onglet. Un widget dont le code est coupé en cours de route reste en général vide.
- Ne colle que du code venant de sources de confiance. Le code d'un widget personnalisé s'exécute dans ton overlay.
- Pour tester les alertes ou le chat, utilise Emulate dans l'éditeur d'overlay.
Tu préfères ne pas coller de code ?
Nos packs incluent un lien d'installation StreamElements en un clic qui crée l'overlay avec chaque widget déjà configuré, tu peux donc passer cette étape. Les fichiers de code restent dans le téléchargement pour une installation manuelle. Voir comment installer un overlay depuis un lien.
