Personnalisation des incrustations

Commencez par les modèles, puis utilisez les options URL et le CSS uniquement si nécessaire.

Le plus rapide : choisir un modèle

Vous avez un thème de chat StreamElements ou Streamlabs ? Importez votre widget personnalisé avec le guide des thèmes de chat.

Les modèles sont le moyen le plus simple d'obtenir une incrustation soignée sans écrire du CSS de zéro.

Galerie de modèles avec recherche, filtres par catégorie et aperçus
Recherchez et filtrez les modèles, puis copiez l'URL d'incrustation générée dans OBS.

Niveaux de personnalisation

NiveauUtilisationEmplacement
Commandes du modèleModifications visuelles rapides.Galerie de modèles.
Paramètres URLComportement, libellés, filtres, échelle, limites.Paramètres de requête de l'URL de l'incrustation.
CSS personnalisé OBSPetits ajustements de style pour une seule source OBS.Propriétés de la source navigateur OBS.
CSS hébergé/auto-hébergéStyles réutilisables entre incrustations.&css= ou &b64css=.
Incrustation personnaliséeComportement entièrement personnalisé.guide des incrustations personnalisées.

Options URL courantes

featured.html?session=YOUR_SESSION&scale=1.1&limit=10
  • session connecte l'incrustation au bon salon de chat.
  • scale modifie la taille sans réécrire le CSS.
  • limit contrôle le nombre de messages qui restent visibles sur les pages prises en charge.
  • hidesource masque les libellés des plateformes dans le Dock (dock.html uniquement).
  • css et b64css chargent des styles personnalisés.

Prévisualiser avant OBS

Aperçu d'incrustation montrant un message de chat Social Stream mis en forme
Ouvrez l'URL finale dans un navigateur normal avant de tester OBS.

Solutions courantes

  • Correct dans le navigateur, incorrect dans OBS : retirez le CSS personnalisé OBS et actualisez la source navigateur.
  • Police manquante : utilisez un fichier de police HTTPS direct et vérifiez les règles CORS/de liens directs.
  • Tout est invisible : vérifiez l'opacité, la couleur, les filtres et si la page attend des données de mise en avant/d'événement.
  • Les modifications d'URL ne font rien : actualisez la source OBS ou remplacez l'URL.