Twitch Shout-out Overlay

What is this?

This is a Twitch Shout-Out generator and browser source overlay for OBS. This project uses TMI.js, JavaScript, HTML, and CSS. It is client-side code that can run locally (localhost) or on your own server.

Try it here

---

⚠️ NOTICE

The Slider Feature is deprecated and will be removed in a future version. This change allows us to simplify the codebase and focus on improving the Clips functionality. If you currently use the Slider overlay, please be aware that it will eventually be discontinued.

---

Features

• Clip Player: Plays a random or recent clip from the shouted-out channel.
• Queue System: Multiple shout-outs go into a queue and play sequentially.
• Smart Fallback: Displays the user's profile image if no clips are found.
• Chat Integration:
  • !watchclip: Play a specific clip link posted in chat.
  • !replayso: Replay the previous shout-out clip.
  • !stopclip: Immediately stop playback and reload the source (Mods/Streamer only).
• Auto-Shoutout: Automatically shout out streamers when they raid you (configurable min viewer count).
• Customization:
  • Date range filters for clips (e.g., last 30 days).
  • Custom chat messages and overlay titles.
  • Clip details panel showing Game, Title, Creator, and Date.
  • CSS Theme options.

Chat Commands

• Standard: !so @MrCoolStreamer or !so MrCoolStreamer
• Replay: !replayso, !soreplay, !clipreplay, !replayclip
• Stop: !stopclip, !sostop, !clipstop, !clipreload
• Watch: !watchclip <clip_url> or !watchclip to play a clip that was posted in chat.

(Note: The command trigger !so can be customized in the options)

OBS Setup

1. Add a Browser Source in OBS.
2. Paste your generated URL.
3. Important: In the Browser Source properties:
   • Enable "Shutdown source when not visible".
   • Enable "Control audio via OBS".
   • Enable "Refresh browser when scene becomes active".
4. Enable Browser Source Hardware Acceleration in OBS Settings -> Advanced for better performance.

Twitch OAuth Token

This overlay requires a Twitch Access Token if you want it to send a shout-out message back into chat.

1. Generate a token here: https://twitchtokengenerator.com/
2. Select "Bot Chat Token".
3. Tip: If you want the response to come from your bot account, sign in to Twitch with that account before generating the token.

URL Parameters

These parameters are generated by the configuration tool, but here is what they do:

Parameter	Type	Description
channel	String	Your channel name.
ref	String (Base64)	The obfuscated Auth token. Required for sending chat messages.
command	String	Custom command trigger (default: so).
modsOnly	true/false	Limit commands to Mods and Streamer.
showClip	true/false	Shows a random popular clip.
showRecentClip	true/false	Shows the most recent popular clip.
showImage	true/false	Fallback to profile image if no clips exist.
showText	true/false	Shows title text on top of the clip.
customTitle	String	Custom text for the overlay title. Variables: {channel}, {url}.
showDetails	true/false	Enables the clip details panel.
detailsText	String	Custom text for the details panel. Variables: {channel}, {title}, {game}, {creator_name}, {created_at}.
themeOption	Integer	Selects a pre-made CSS theme.
showMsg	true/false	Bot sends a message in chat.
customMsg	String	Custom chat message. Variables: {channel}, {game}, {title}, {url}.
timeOut	Integer	Max duration (seconds) a clip will play.
dateRange	Integer	Filter clips to within the last X days.
raided	true/false	Enable auto-shoutout on raids.
raidCount	Integer	Minimum number of viewers required to trigger auto-shoutout.
delay	Integer	Delay (seconds) before auto-shoutout triggers on a raid.