Afficher le chat sur un overlay

Un petit tour des options possibles que j’ai pu tester ou que j’utilise pour afficher une chatroom dans un overlay de stream. A vous de creuser !

Avec la chatroom Twitch

Une solution simple mais pas très propre consiste à intégrer la fenêtre du chat directement dans l’overlay. Cela peut tout de même dépanner pour commencer.

Ajoutez une source Navigateur et ajoutez le lien de votre chatroom en version “fenêtré” sous la forme suivante (remplacez IDENTIFIANT par le nom de votre chaîne) :

   https://www.twitch.tv/popout/IDENTIFIANT/chat?popout=

Privilégiez un format en colonne avec une hauteur d’environ 800 pixels et une largeur d’environ 350 pixels.

Je vous conseille également de rogner la source de tous les élements superflus en maintenant la touche ALT puis en jouant avec la forme de la source.

Vous pouvez interagir avec une source “Navigateur” avec l’option Interagir. Vous en aurez besoin notamment pour cliquer sur l’option “Accepter les cookies” qui apparaitra.

Avec Prettych.at

Prettych.at propose plusieurs thèmes de chatroom assez sympathiques (mais qui ne fonctionne a priori qu’avec Twitch).

Pour intégrer une chatroom, indiquez le nom de votre chaîne Twitch, selectionnez un thème et cliquez sur Create. Récupérez le lien de la page web et intégrez le avec une source Navigateur avec pour hauteur environ 800px et pour largeur environ 350-400px.

Vous remarquerez qu’il est difficile d’intégrer proprement certains thèmes de chatroom mais si vous connaissez un petit peu le code CSS, il est possible de modifier l’apparence d’une source Navigateur.

Un exemple avec le thème CleanyBear, vous remarquerez qu’il affiche un arrière-plan violet et je préférerais qu’il soit transparent. Je me rends dans les propriétés de ma source et je remplis la section CSS personnalisé avec le bout de code suivant :

#root > div {
  background-color: transparent;
}

En deux mots, avec ce petit bout de code, j’indique à ma page de remplacer la couleur d’arrière-plan actuelle (violet) par du transparent (pas de couleur), c’est la magie du CSS !

Avec KapChat

Kapchat est un outil relativement simple à utiliser et plutôt efficace pour générer et intégrer une chatroom rapidement. Il y a quelques options de personnalisation disponibles, mais ce qui est proposé de base est déjà suffisant.

Vous devrez peut-être faire attention à l’option Chat Theme qui vous propose quelques themes visuels différents. A vous de tester pour voir ce qui correspond le mieux à votre overlay.

Le service vous donne ensuite un lien à coller dans une source Navigateur. Là aussi pour commencer je vous recommande un format de base en colonne, avec une hauteur d’environ 800 pixels et une largeur d’environ 350 pixels.

Avec un peu d’astuce et quelques connaissances en CSS, vous pourrez aussi détourner le design de la chatroom, comme on vient de le voir au point précédent.

Avec StreamElements

En vous connectant sur le service StreamElements avec votre compte Twitch (ou autres), vous aurez accès à pas mal d’options. En allant dans Streaming Tools puis Overlays, vous allez créer un nouvel élément avec le bouton New Overlay.

Une nouvelle page s’ouvre, séléctionnez Add Widget puis séléctionnez Your stream’s chat dans la section Stream Tools. A vous de jouer pour prendre en mains les options : taille de la chatroom, taille du texte, couleurs, polices de caractère… Vous aurez clairement plus de possibilités et de souplesse que les options précedentes. Sauvegardez, récupérez le lien et collez-le dans une source Navigateur sur OBS sur une hauteur de 1920px et une largeur de 1080px.

Vous aurez probablement besoin de faire quelques aller-retours entre StreamElements et OBS pour affiner l’intégration et la mise en forme.

Avec StreamElements + HTML/CSS/JavaScript

C’est la solution la moins facile d’accès mais celle que je privilégie, voyez ça comme une technique avancée ! J’utilise toujours StreamElements mais au lieu d’utiliser le widget vu au point précédent, j’utilise l’option Custom widget dans la section Static / Custom.

L’option Custom Widget permet de coder des éléments divers et variés et je m’en sers justement pour coder un design de chatroom de zéro. Cela me permet d’avoir véritablement d’avoir le contrôle sur la façon dont les messages s’affichent et le visuel.

J’utilise plusieurs ressources sur internet pour me guider, mais c’est le super tutoriel de chez Grafikart.fr qui m’a offert une base solide. A partir de là, j’adapte mes designs de chatroom selon la direction artistique de l’overlay (couleur, police de caractères…)