Twitch Chat Bubble Overlay

This is a fully configurable dynamic chat overlay.
I wanted to create my own aesthetic looking and functional chat overlay, while learning to code.
The outcome is this overlay, you can use and configure however you like.

Disclaimer

This is a learning project and barely maintained.
If you are looking for another chat overlay in this style I can recommend to take a look at Zaytri's chat overlay

Features

Pronouns, Badges & Timestamps
This chat overlay integrates & shows the pronouns provided by the popular browser add-on by Alejo (not affiliated)
It can also show off the badges your viewers collected & make the current time visible for the VOD. (including the premium FFZ ones)
The current release includes the most used Twitch badges, but not all of them.
All the options shown can be mixed and matched to one's liking.

Keep your stream clean
This overlay will remove messages from the overlay, if they get removed from the chat through moderating actions (like clearing chat or timing out people)
If you set up the message delay the messages won't even show up on the overlay, if they are removed during the delay time.
This is in consideration of hate raids happening on Twitch as well as only a few of the popular chat overlays I know reacting to moderation actions.

Light-, Dark-, Custom- & "text only"-mode
2 presets and a fully customizable color scheme are available for you to use.
If you don't like the chat bubble style there's also a text only option.

3rd party emotes
This overlay supports BetterTwitchTV, FrankerFaceZ and 7TV Emotes. (as well as the default Twitch ones of course)

No matter the side, you're covered
The overlay can be displayed left or right facing adjusted to your needs.

Planned Features

I've been working on this for quite some time and I'm not planing on working on this as actively as I've been for the 2.0 release.
So the following are things that could still be done, but will take time:

• Add custom FrankerFaZ badges to replace standard ones (toggleable) (added in 2.1)
• Add 7TV emotes (added in 2.1)
• Improve animations & look
• Saving chat upon refresh
• Port the widget to Streamelements

Setup

1. Download all the files and extract them somewhere on your PC

2. Open the config.js with an text editor (Notepad++ is recommended)

   1. Fill in your Twitch username & TwitchID (provided here [3rd party site])

   2. Edit all the other parameters to your liking

3. Add the "chat bubble.html" file as a browser source in OBS by using 'local file' further instructions
   (recommended settings: width=800 px, height=1000 px)

Troubleshooting

1. Chat doesn't carry over to other scenes
   Make sure "refresh browser when scene becomes active" is disabled in the browser source settings. Otherwise it will refresh the browser and your messages will be gone.
2. The overlay doesn't show messages
   Make sure you spelt your Twitch username correctly and added the TwitchID (both are needed to guarantee the overlay to work)
   

If you find any other problems, please let me know and I'll try to fix them. Feel free to open an issue here on GitHub.

Credits:

This overlay is only possible thanks to ComfyJS made by @Instafluff as well as TMI.js

Fonts used OpenDyslexic & Google Fonts: Roboto, Patrick Hand, VT323

Special thanks to EmmerWhalelord (beta testing, bug hunting, feature request), Witchking (beta testing) & Tzantzarel (helping with 7TV emotes)