Logo

STREAM RECEIPT

You most likely know all of those recipes on other social media platforms like Twitter or Bluesky that boomers love to share? Well, I've made one for Twitch... It shows a nice lil' summary of your current stream.
moneyWave

ACTION IMPORT
Loading...
BROWSER SOURCE URL
https://tawmae.xyz/overlays/stream-receipt.html
SETUP

1. Copy the Action Import text from above into your clipboard.

2. In Streamer.bot, click the Import button at the top of the window. Paste the text into the Import String section and press Import at the bottom.

3. Now go into the Servers/Clients -> WebSocket Server tab. Check Auto Start WebSocket Server, leave Address at 127.0.0.1 and the Port at 8080. You can set a password if you want, just make sure to leave Enforce All Requests unchecked. Start the server.

Here you can check in real-time if your Websocket server is up and running:

4. Copy the Browser Source URL from above into your clipboard.

5. In OBS, create a new Browser Source, name it whatever you want. Then paste the copied URL into URL and preferably set the Width and Height to you about 450x1200. You might want to fiddle around with it.

And then you're done Pog Clap
If you want to test it, you can rightclick the triggers in the 2 - Data action and hit Simulate Event

CUSTOMIZATION

You can add URL Parameters at the end of the URL to customize certain things. The first parameter is getting added with a ?, every additional one with a &.


Example: https://tawmae.xyz/overlays/ad-notification.html?font=comic+sans+ms&color=pink

Font

Changes the font used for the text. Supports standard fonts. Use a + character to replace spaces.

font=Arial


font=Comic+Sans+MS

CHANGELOG
Date Changes Version
February 02, 2025 Release 1.0.0