Principe & Fonctionnement
Quand je dois afficher une chatroom sur un overlay, j’évite les services tout prêts car je trouve les visuels de base pas très beau et cela manque de personnalisation.
Ainsi, au lieu d’utiliser le widget “Chatroom” de base de StreamElements, j’ai pris l’habitude de créer le mien de zéro, ce qui me donne l’occasion de vraiment travailler l’aspect graphique pour l’intégrer dans une DA.
J’ai d’ailleurs appris cette technique en suivant ce super tuto de **Grafikart.fr.**
Quelques exemples…
Chatroom dans le style de Persona 5
Pour un prototype d’overlay dans le style de Persona 5, j’ai essayé de coder une chatroom similaire.
La direction artistique du jeu est très marqué et j’ai essayé de retranscrire ici les aspects “bulle de dialogue” et le contourage blanc et rouge.

Chatroom type boîte de dialogue
Un essai rapide pour tester le visuel global de la chatroom, que j’ai jamais vraiment utilisé par la suite. Il est largement inspiré d’un Codepen que je ne retrouve pas à l’heure actuelle.
Outils & technologies
- OBS Studio et les sources “Navigateur Internet”
- Streamelements
- HTML/CSS/JavaScript & GSAP