https://github.com/romestylez/multi-chat-overlay
OBS browser source overlay for Twitch & Kick chat with 7TV and BTTV emotes.
https://github.com/romestylez/multi-chat-overlay
7tv 7tv-emotes bttv bttv-emotes chat chat-overlay emotes kick kick-com obs obs-studio overlay twitch twitch-emotes
Last synced: 20 days ago
JSON representation
OBS browser source overlay for Twitch & Kick chat with 7TV and BTTV emotes.
- Host: GitHub
- URL: https://github.com/romestylez/multi-chat-overlay
- Owner: romestylez
- Created: 2025-09-24T19:30:12.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2026-01-24T15:35:11.000Z (4 months ago)
- Last Synced: 2026-03-30T22:31:21.108Z (2 months ago)
- Topics: 7tv, 7tv-emotes, bttv, bttv-emotes, chat, chat-overlay, emotes, kick, kick-com, obs, obs-studio, overlay, twitch, twitch-emotes
- Language: JavaScript
- Homepage:
- Size: 67.4 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chat Overlay (Twitch + Kick + 7TV + BetterTTV + FrankerFaceZ)
A simple overlay for OBS that displays **Twitch chat** and **Kick chat** simultaneously, including **7TV**, **BetterTTV** and **FrankerFaceZ** emotes.
The overlay runs completely locally in OBS as a **Browser Source** – no external service required.
---
## 🚀 Features
- Display Twitch and Kick chat
- Support for Twitch emotes, 7TV emotes, BetterTTV emotes and FrankerFaceZ emotes
- Unified layout with CSS (font, size, emote alignment)
- **Blacklist support**: ignore messages from specific users (e.g. bots)
---
## 📦 Installation
1. Clone or download the repository:
```bash
git clone https://github.com/YOURNAME/chat-overlay.git
cd chat-overlay
```
2. Copy the example config:
```bash
cp config.js.example config.js
```
3. Enter your own values in `config.js`:
- **Twitch channel name**
- **Twitch OAuth token**
- **Kick App Key + Chatroom ID**
- **7TV user ID**
- **BTTV Twitch user ID**
- *(optional)* **Blocked users list**
4. In OBS, add a **Browser Source**:
- Select the local file: `overlay.html`
- Set the size, e.g., `800x600` or whatever fits your layout
---
## 🔑 Required Data
### Twitch
- `TWITCH_CHANNEL` = your Twitch channel name (e.g. `smtxlost`)
- `TWITCH_OAUTH` = Chat token in the format `oauth:xxxxxxxxxxxx`
👉 How to get your token:
- Use: [https://twitchtokengenerator.com/](https://twitchtokengenerator.com/)
- Select the scope: `chat:read` is sufficient
- Copy the token and paste it into `config.js`
⚠️ Note: Tokens can expire. If that happens, you’ll need to generate a new one.
### Kick
- `KICK_APP_KEY` and `KICK_CLUSTER` → **public values used by Kick for all users** (not secret, usually `32cbd69e4b950bf97679` and `us2`)
- `KICK_CHATROOM_ID` → unique per channel. Find it via the API:
`https://kick.com/api/v1/channels/YOUR_CHANNEL`
Look in the JSON for: `chatroom":{"id":...}`
### 7TV
- `SEVENTV_USER_ID` → your user ID from [https://7tv.app](https://7tv.app)
### BTTV
- `BTTV_TWITCH_USER_ID` → your Twitch user ID
(e.g. via: [https://streamscharts.com/tools/convert-username](https://streamscharts.com/tools/convert-username))
### FrankerFaceZ (FFZ)
- `FFZ_CHANNEL` → your Twitch channel name (same as `TWITCH_CHANNEL`)
Used to load your channel-specific FrankerFaceZ emotes.
### User Blacklist
- `BLOCKED_USERS` → an array of usernames to ignore (case-insensitive).
Example:
```js
BLOCKED_USERS: ["nightbot", "streamelements", "moobot"]
```
Messages from these users will not appear in the overlay.
---
## 📄 License
MIT License – free to use and adapt.