ChatRD is a chat overlay widget for OBS that unifies messages and events from **Twitch**, **YouTube**, **TikTok** (and more to come).


- 💬 **Multi-platform chat**

- 💬 **Multi-language events**

- 📊 **Events and Live stats**

- 🎨 **Customizable**

- 💾 **Saves your settings using localStorage and Streamer.Bot's Global Varaibles**

1. Make sure your **Twitch** and **YouTube** accounts are connected on **Streamer.bot** and you have **TikFinity Desktop App** installed and set up to your account on **TikTok**. **BOTH APPS NEED TO RUN ON THE SAME PC**.

2. In **Streamer.bot**, go to **Server/Clients → WebSocket Server** and make sure it is running

3. Import the string inside the file [streamerbot-import.vortisrd](https://github.com/vortisrd/chatrd/blob/main/streamerbot-import.vortisrd) to your **Streamer.bot** using the **Import** button at the top.

4. Open the [Settings Page](https://vortisrd.github.io/chatrd) in your browser

5. Choose your desired options

6. Click **"Copy URL"**

7. Add a Browser Source in OBS and paste the link

1. On **Streamer.bot**, go to **Server/Clients → WebSocket Server** and make sure the Address is set to the Local Network IP from the PC, for example **192.168.0.10** ... or, if you prefer, use 0.0.0.0.

2. On the [Settings Page](https://vortisrd.github.io/chatrd), make sure you set that IP on **Streamer.bot WebSocket Server**.

3. Turn the **"Run Locally"** switch on.

4. Click **"Copy URL"**

5. [Download ChatRD](https://github.com/vortisrd/chatrd/archive/refs/heads/main.zip) on the machine you want to see the chat on or want to set up OBS in, unzipping the file.

6. Open it on your browser or add it in OBS as Browser Source (don't tick **Local File**)following the file trail, for example: **file:///C:/PATH_TO_THE_FILE/chat.html**.

7. After **chat.html**, paste the URL copied from the configurator. The full link should be like this: **file:///C:/PATH_TO_THE_FILE/chat.html?language=ptbr&showPlatform=true&showAvatar=true&showTimestamps=false&showBadges=true&showPlatformStatistics=false&excludeCommands=true&showTwitchMessages=true&showTwitchFollows=true&showTwitchBits=true&showTwitchAnnouncements=true&showTwitchSubs=true&showTwitchGiftedSubs=true&showTwitchMassGiftedSubs=true&showTwitchGiftedSubsUserTrain=true&showTwitchRewardRedemptions=true&showTwitchRaids=true&showTwitchSharedChat=true&showTwitchViewers=true&showYouTubeMessages=true&showYouTubeSuperChats=true&showYouTubeSuperStickers=false&showYouTubeMemberships=true&showYouTubeGiftMemberships=true&showYouTubeMembershipsTrain=true&showYouTubeStatistics=true&showTikTokMessages=true&showTikTokFollows=true&showTikTokGifts=true&showTikTokSubs=true&showTikTokStatistics=true&showStreamlabsDonations=true&showStreamElementsTips=true&ignoreChatters=&streamerBotServerAddress=127.0.0.1&streamerBotServerPort=8080&=&hideAfter=0**

- 🟣 **Twitch** (via Streamer.bot)

- 🔴 **YouTube** (via Streamer.bot)

- ⚫ **TikTok** (via TikFinity Desktop App)

- 💸 **Streamlabs / StreamElements**

- [Streamer.bot](https://streamer.bot)

- [Streamer.bot Client JS](https://streamerbot.github.io/client/)

- [TikFinity Desktop App](https://tikfinity.zerody.one/)

- [Font Awesome](https://fontawesome.com/)

- [Animate.css](https://animate.style/)

- [Simple Notify](https://simple-notify.github.io/simple-notify/)

- [DOMPurify](https://github.com/cure53/DOMPurify)

- Trovo

- Kick

- Patreon

- Ko-Fi

- TipeeeStream

- Fourthwall

- LivePix

- Tipa.Ai

I tried to add member emotes but **that is currently impossible due to YouTube's API not exposing Members Emotes and with that, Streamer.bot won't be able to show them.**. So I've added a way for the users to add them manually at the overlay, with the data saved as a Streamer.Bot Global Variable.

What Casterlabs Caffeinated, Social Stream Ninja and Onecomme do to scrape the emotes won't work with the current way Streamer.bot and my code works, so I had to choose between **making the user add them manually** or build a **server-sided executable (using NodeJS, Python or whatever) to read the chat as it's going or scrape the HTML code**. I don't want to add another executable on top of the user's flow, so it would be easier to use what it's currently available. **And no, I won't do any research based on what other tools do.** Tried to do that and wasted 1 week of my life doing it.

When YouTube decide to expose their Partner Emotes on their API, I'll come back to this.

The safest way to customize ChatRD is open either the Chat or the Config in your browser and use [it's Dev Tools](https://cdn.discordapp.com/attachments/1360070885620453496/1363850037276180591/image.png?ex=680a2ad3&is=6808d953&hm=aac3045c97602afcb7eacf207eb73bccf036348a2daf27ced49f1e422f380f7a&format=webp&quality=lossless&width=1872&height=541) to look for the tags, their classes, identifiers and then style in the way you want. **You need basic CSS knowledge for that**.

After you finish it, paste the CSS inside the [Custom CSS field within Browser Source Property Window](https://media.discordapp.net/attachments/1360070885620453496/1363577945117032578/image.png?ex=6809d62c&is=680884ac&hm=fe81c53d8b144ca48506ff5d143dbb3a43cabefbb55e4d4b19943a9607f2bf96&=&format=webp&quality=lossless&width=994&height=960).

If you break it, you fix it. 😊

Made with ❤️ by **VortisRD**

🔗 [GitHub](https://github.com/vortisrd) • [Twitch](https://twitch.tv/vortisrd) • [YouTube](https://youtube.com/@vortisrd) • [TikTok](https://tiktok.com/@vortisrd) • [Twitter / X](https://twitter.com/vortisrd)

Heavily inspired by [Nutty](https://nutty.gg)

🔗 [GitHub](https://github.com/nuttylmao) • [Twitch](https://twitch.tv/nutty) • [YouTube](https://youtube.com/@nuttylmao) • [TikTok](https://tiktok.com/@nuttylmao) • [Twitter / X](https://x.com/nuttylmao)

<html lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ChatRD</title>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:[email protected]">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-notify.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<link rel="stylesheet" href="css/app.css">

<div id="statistics">

<div class="platform" id="twitch">

<i class="fa-brands fa-twitch"></i>

<span class="viewers"><i class="fa-solid fa-user"></i> <span>0</span></span>

</div>

<div class="platform" id="youtube">

<i class="fa-brands fa-youtube"></i>

<span class="viewers"><i class="fa-solid fa-user"></i> <span>0</span></span>

<span class="likes"><i class="fa-solid fa-thumbs-up"></i> <span>0</span></span>

</div>

<div class="platform" id="tiktok">

<i class="fa-brands fa-tiktok"></i>

<span class="viewers"><i class="fa-solid fa-user"></i> <span>0</span></span>

<span class="likes"><i class="fa-solid fa-heart"></i> <span>0</span></span>

</div>

</div>

<div class="wrapper">

<div id="chat">

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-notify.min.js"></script>

<script src="https://unpkg.com/@streamerbot/client/dist/streamerbot-client.js"></script>

<script src="js/lang/ptbr.js"></script>

<script src="js/lang/en.js"></script>

<script src="js/lang/es.js"></script>

<script src="js/lang/lang.js"></script>

<script src="js/app-mockup.js"></script>

<script src="js/app.js"></script>

<script src="js/twitch/module.js"></script>

<script src="js/youtube/module.js"></script>

<script src="js/tiktok/module.js"></script>

<script src="js/streamlabs/module.js"></script>

<script src="js/streamelements/module.js"></script>