# Éditeur de widgets > Crée ton propre widget pour ton stream Kick en HTML, CSS et JavaScript dans l'éditeur de widgets KickBot, teste-le avec de faux événements et publie-le. Source: https://kickbot.com/fr/docs/widgets/widget-builder L'éditeur de widgets te permet de créer ton propre overlay pour ton stream Kick en HTML, CSS et JavaScript. KickBot envoie à ton code les événements Kick en direct (follows, subs, subs offerts, KICKs, raids, messages du chat et plus encore), donc tu n'as besoin de te connecter à aucune API. Tu peux utiliser le widget sur ton propre stream, et le publier pour que d'autres streamers l'installent depuis la Bibliothèque de widgets. Ouvre-le sur [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder). L'éditeur s'adresse aux personnes qui savent un peu coder. Si tu veux juste un overlay tout prêt, utilise la [Bibliothèque de widgets](https://kickbot.com/fr/docs/widgets/widget-library). Pour la référence du code (événements, données et paramètres), consulte la [Référence de l'éditeur de widgets](https://kickbot.com/fr/docs/widgets/widget-builder-reference). ![L'accueil de l'éditeur de widgets KickBot avec le bouton Nouveau widget, un widget avec une URL masquée et la section Référence](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "L'éditeur de widgets liste tes widgets et leurs URL pour OBS.") ## Crée un nouveau widget 1. Ouvre [kickbot.com/dashboard/widget-builder](https://kickbot.com/dashboard/widget-builder) et clique sur **Nouveau widget**. 2. Choisis **Vide**, ou pars d'un modèle : **Viewer Count**, **Simple Follower Goal** ou **Basic Chat Widget**. Un modèle copie le code de ce widget KickBot, pour que tu puisses le modifier. 3. Saisis un **Nom du widget**. Pour un widget vide, règle aussi la **Largeur** et la **Hauteur** en pixels (800 × 600 par défaut). 4. Clique sur **Créer le widget**. L'éditeur s'ouvre. ![La fenêtre Nouveau widget avec Vide et les modèles Viewer Count et Simple Follower Goal](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "Pars d'un widget vide ou d'un modèle.") > **Note:** Avec le forfait Gratuit, tu peux avoir jusqu'à 10 widgets dans l'éditeur de widgets. Avec Premium, il n'y a pas de limite. Les widgets que tu installes depuis la bibliothèque ne comptent pas. ## L'éditeur L'éditeur a trois parties : les paramètres à gauche, le code au milieu et un aperçu en direct à droite. ![L'éditeur de widgets avec les Paramètres de base et les Variables utilisateur à gauche, l'onglet de code HTML au milieu et l'aperçu à droite](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "Paramètres, code et aperçu dans l'éditeur de widgets.") - **Paramètres de base** : le nom, et la largeur et la hauteur d'affichage du widget. - **Variables utilisateur** : des paramètres que les streamers peuvent changer sans code, comme une couleur, un texte ou un objectif chiffré. Consulte [Variables utilisateur](https://kickbot.com/fr/docs/widgets/widget-builder-reference#user-variables). - **Envoyer un événement test** : des boutons qui envoient un faux événement (Sub, Sub offert, KICKs, Follow, Raid, Message et plus encore) à l'aperçu. - **Visibilité** : indique si le widget est privé ou publié, et contient le bouton **Publier le widget**. - **Code** : des onglets pour **HTML**, **CSS** et **JavaScript**. Utilise **Disposition de l'éditeur** en haut pour afficher un fichier (**Simple**) ou deux fichiers à la fois (**Côte à côte** ou **Empilé**). - **Aperçu** : montre le widget à sa taille, mis à l'échelle pour tenir dans l'écran. Il se met à jour pendant que tu tapes. Utilise le bouton de rechargement pour le relancer, ou le bouton qui l'ouvre dans une nouvelle fenêtre (pratique pour ouvrir la console du navigateur). L'éditeur enregistre ton travail tout seul pendant que tu tapes. **Enregistrer** enregistre tout d'un coup, et le texte en dessous indique le dernier enregistrement. **Quitter** te ramène à la liste des widgets. L'éditeur a besoin d'un grand écran. Sur un téléphone, KickBot te demande de l'ouvrir sur un ordinateur. Ton widget est enregistré, tu peux donc continuer depuis l'ordinateur. ## Teste ton widget 1. Ouvre **Envoyer un événement test**. 2. Clique sur un événement, par exemple **Follow** ou **Message**. 3. Regarde l'aperçu réagir. Les événements de test ont la même forme que les vrais événements, avec des données d'exemple. Ils vont seulement dans l'aperçu de cette page, jamais dans OBS ni sur ton stream. Pour tester avec de vrais événements, ajoute le widget dans OBS et lance un live, ou demande à un ami de follow ta chaîne. ## Utilise ton widget en live Chaque widget que tu crées apparaît aussi dans [Widgets enregistrés](https://kickbot.com/dashboard/saved-widgets), avec « Ton propre widget » sous le nom. Son URL lance toujours la dernière version de ton code. 1. Sur la page de l'éditeur de widgets, clique sur **Copier l'URL** sur ton widget. 2. Dans OBS, ajoute une source **Browser** (Navigateur dans OBS en français), colle l'URL et règle la largeur et la hauteur sur la taille du widget. 3. Clique sur **OK**. Si tu modifies le code pendant que le widget est dans OBS, actualise la source navigateur pour charger le nouveau code. Quand tu changes la valeur d'une variable utilisateur dans Widgets enregistrés et que tu cliques sur **Enregistrer**, OBS recharge le widget tout seul. Pour plus d'aide, consulte [Ajouter une source navigateur dans OBS](https://kickbot.com/fr/docs/getting-started/add-browser-source-obs). > **Caution:** Garde l'URL privée. Toute personne qui l'a peut afficher ton widget sur son écran. ## Publie dans la Bibliothèque de widgets Publie un widget quand tu veux que d'autres streamers le trouvent et l'installent. 1. Dans l'éditeur, ouvre **Visibilité** et clique sur **Publier le widget**. 2. Ajoute une **Image principale** et au moins une autre image. Tu peux ajouter jusqu'à 10 images en tout, de 10 Mo maximum chacune. Le format 1920 × 1080 est idéal. 3. Rédige une **Description** : ce que le widget affiche et comment le configurer. 4. Envoie-le. La fenêtre affiche **Widget publié !**, et le widget part en validation. L'équipe KickBot vérifie chaque widget. S'il est approuvé, il apparaît dans la Bibliothèque de widgets avec ton nom Kick comme créateur. La validation prend en général moins de 24 heures. > **Caution:** Tu ne peux publier un widget qu'une seule fois. Ensuite, l'éditeur affiche « Widget déjà publié. Contacte le support pour toute modification (le versioning arrive bientôt) ». Teste bien ton widget avant de le publier. ## Supprime un widget Sur la page de l'éditeur de widgets, ouvre le menu **⋯** d'un widget et clique sur **Supprimer**. Son code et ses paramètres sont supprimés, et tu ne peux pas annuler. ## Membres de l'équipe Les membres de l'équipe ont besoin de la permission **Éditeur de widgets** pour ouvrir l'éditeur et créer des widgets. Il leur faut **Configurer les widgets** pour voir les URL des widgets. Consulte [Gérer l'équipe](https://kickbot.com/fr/docs/account/team). ## FAQ **Dois-je savoir coder ?** Oui, un peu de HTML, de CSS et de JavaScript. Si tu ne codes pas, installe plutôt un widget depuis la [Bibliothèque de widgets](https://kickbot.com/fr/docs/widgets/widget-library) et change ses paramètres. **Puis-je modifier un widget KickBot de la bibliothèque ?** Tu ne peux pas changer le code d'un widget de la bibliothèque. Crée un nouveau widget à partir du modèle **Viewer Count**, **Simple Follower Goal** ou **Basic Chat Widget** pour obtenir une copie de son code que tu peux modifier. **Mon widget peut-il charger des polices, des images ou d'autres scripts ?** Oui. Ton HTML, ton CSS et ton JavaScript tournent dans une page web normale dans OBS, donc tu peux utiliser des polices web, des images et des scripts d'autres sites. Utilise les variables utilisateur **Image/GIF**, **Vidéo** ou **Audio** pour permettre aux streamers d'importer leurs propres fichiers. **Puis-je créer des widgets avec l'API KickBot ?** Oui. L'API KickBot peut lister, créer et mettre à jour tes widgets. Consulte la [référence de l'API des widgets](https://kickbot.com/docs/api/reference/widgets).