Quels éléments fonctionnent ?
L’importateur est destiné aux widgets de chat personnalisés créés pour StreamElements ou Streamlabs, y compris le composant de chat d’un pack de thèmes. Il vous faut les fichiers sources du widget. L’importateur n’importe pas un compte StreamElements entier ni un thème à partir d’une URL d’incrustation.
Utilisez soit l’application de bureau SSN pour Windows ou l’extension Chrome pour capturer le chat. Le thème importé affiche ce chat dans OBS. La compatibilité dépend du widget ; les fonctions de compte telles que les objectifs, la fidélité, les boutiques et les alertes peuvent nécessiter une conversion manuelle.
1. Récupérer les fichiers du widget
Partez du ZIP ou du dossier original du créateur. Recherchez le HTML, le CSS et le JavaScript, ainsi que les JSON de champs/données, les images et les polices. Sélectionnez un seul widget de chat si le pack contient plusieurs modèles.
Vous n’avez qu’un lien d’installation ? Demandez au créateur le code source du widget de chat ou utilisez le code disponible dans votre éditeur de widget personnalisé StreamElements. Une capture d’écran, une vidéo ou une URL de source Navigateur seule ne peut pas être convertie.
Le code de mon widget est dans l’éditeur StreamElements
Ouvrez l’éditeur de code du widget personnalisé. Enregistrez chaque partie disponible dans un fichier texte brut distinct : html.txt, css.txt, js.txt, fields.txt et data.txt. Copiez le contenu sans ajouter de mise en forme ni modifier le JSON. Si aucun fichier de données n’est disponible, l’importateur utilise les valeurs par défaut des champs.
Sélectionnez tous ces fichiers ensemble avec Choisir des fichiers (Choose Files). Incluez les images et polices locales ; Choisir un dossier (Choose Folder) préserve les chemins des dossiers. Consultez la Référence de l’éditeur de code StreamElements pour la structure du code et des champs.
N’importez que du code de confiance : le JavaScript du widget s’exécute dans l’aperçu et dans l’incrustation téléchargée.
2. Ouvrir l’importateur
Dans le menu SSN, sous la section Incrustations de chat prédéfinies, cherchez l’option Importer un thème de chat StreamElements / Streamlabs (Import StreamElements / Streamlabs chat skin). Votre session actuelle est renseignée. Vous pouvez aussi rechercher dans le menu StreamElements ou ouvrir directement l’importateur.
Utilisez Choisir un ZIP (Choose ZIP), Choisir des fichiers (Choose Files) ou Choisir un dossier (Choose Folder). Un aperçu de démonstration se charge après le traitement des fichiers. Examinez les avertissements d’importation ; utilisez Sélection avancée des fichiers (Advanced file selection) si les mauvais fichiers sources ont été détectés.
3. Connecter et prévisualiser
- Gardez SSN ouvert et vérifiez qu’un véritable message apparaît dans son dock de chat.
- Dans l’importateur, vérifiez le champ Identifiant de session SSN / Stream ID (SSN Session ID / Stream ID). S’il est vide, copiez-le depuis Options de session (Session Options) dans SSN. Il ne s’agit pas de votre nom d’utilisateur Twitch ou YouTube.
- Saisissez le mot de passe de session facultatif si vous en utilisez un.
- Utilisez Aperçu de démonstration (Demo Preview) pour les messages d’exemple, puis Aperçu en direct (Live Preview) et envoyez un nouveau message sur le chat de votre diffusion.
- Si Historique des messages (Message history) apparaît, ajustez la suppression temporisée ou le nombre maximal de messages.
L’aperçu de démonstration fonctionne sans session et utilise uniquement des messages d’exemple. L’aperçu en direct nécessite des messages arrivant de SSN ; un aperçu vide ne signifie pas à lui seul que la connexion a échoué.
4. Télécharger et ajouter à OBS
- Cliquez sur Télécharger le HTML OBS (Download OBS HTML) et enregistrez-le dans un emplacement permanent.
- Dans OBS, ajoutez une Source navigateur, activez Fichier local, puis sélectionnez ce fichier HTML.
- Définissez la largeur et la hauteur de la zone de chat, puis envoyez un autre message pour vérifier.
Votre session est déjà intégrée ; aucune modification d’URL n’est nécessaire dans OBS. Utilisez le fichier téléchargé comme source Navigateur. Gardez SSN et vos sources de capture de chat ouverts ; vous pouvez fermer l’importateur et StreamElements.
Le fichier exporté contient votre identifiant de session et votre mot de passe facultatif. Gardez-le privé. Pour modifier la session, le mot de passe ou les paramètres du widget plus tard, réimportez les fichiers originaux, téléchargez un nouveau fichier, puis actualisez la source OBS.
Si quelque chose ne fonctionne pas
- Aucun code de widget trouvé : utilisez les fichiers sources originaux. Les images, les seuls champs/données et les fichiers SSN déjà convertis ne sont pas le code source du widget.
- La démonstration est vide ou mal affichée : vérifiez les fichiers HTML/CSS/JS dans Sélection avancée des fichiers. Fournissez les fichiers de champs et de données correspondants ainsi que toutes les ressources.
- La démonstration fonctionne, l’aperçu en direct est vide : envoyez un nouveau message, vérifiez le dock SSN et assurez-vous que l’identifiant de session et le mot de passe correspondent.
- Le direct fonctionne, OBS est vide : vérifiez le fichier HTML local sélectionné, les dimensions et la visibilité de la source Navigateur, puis actualisez son cache.
- Polices ou images manquantes : examinez le résumé d’exportation. Les ressources distantes qui n’ont pas pu être intégrées nécessitent toujours une URL accessible et une connexion Internet.
- Les messages disparaissent : ajustez l’historique des messages si le widget expose cette option. Certains widgets gèrent la suppression dans leur propre JavaScript.
- Les API de compte ou plugins échouent : certains widgets nécessitent des modifications de code. Utilisez la consigne de conversion de l’importateur ou demandez de l’aide avec les fichiers originaux du widget et une capture du problème, sans partager vos identifiants de session.
Autres options : thèmes de chat intégrés, CSS personnalisé, ou Dépannage OBS.