There is no back-end required; Twitch provides all the chat/user information via the module tmi.min.js. The app simply styles the chat rooms in a way that provides the owner of the room some specific feedback.
- Add a
Browsersource
- Go to its properties and point the url to:
https://twitch-chat-presence.firebaseapp.com
- Make the source background transparent
- Paste the following code into the
Custom CSSfield:
#container {background-color: transparent;} #settings-icon {opacity: 0;}
- This will turn background elements transparent. Now it functions like an overlay.
- Setup app from source window
- If you need to login/setup the website that is serving as your source. To do this, right click on the browser source and click
Interact. - A new window will popup that allows you to interact with the website. Do what you need then close this window.
- Move/resize the source window as needed.
- Done! Now you should see a similiar result as below:
Just click on index.html to start.
This app is entirely a front-end so you can deploy to any static web hosting server.
This browser app color codes chat messages to let you know who is present or has left the channel. It will also draw moderator/staff/sub/etc badges next to names and fade out messages by age. Overall this app aims to help make sense of the chat in regards to being engaging with your audience which can be tough to keep track of while playing games.
- White = Unchanged status of chatter.
- Green = Chatter just joined the channel.
- Red = Chatter just left the channel.