Welcome to the overlay documentation! Here you will find all the
information you need to get started.
If you'd like to commission an overlay, info is available here.
Streamer.BOT integrated overlays are marked with a small Streamer.BOT logo, like this:
You can choose between web hosted and self hosted.
Self hosted means you download the HTML, JS and CSS files to run locally as a browser source. do note that locally hosting means that you will NOT automatically receive updates!
Web hosted means you just put a URL into your OBS browser source that's hosted on mikoroonii.com
Streamer.BOT Websockets
If you're using a Streamer.BOT integrated overlay, you'll need to set up your websocket connection. This is fairly simple, and goes as follows:
In the top bar of Streamer.BOT, go to the Servers/Clients tab and enable "Auto Start Websocket Server", then click "Start Server".
IMPORTANT! You may have issues if you have authentication enabled on your websocket, you will likely have issues! I won't be able to help with this immediately, but i will look into fixing this.
Tomatoes
Let your chat throw tomatoes at the screen!
Commands
!tomato
Throws a tomato at the screen. Users can also input coordinates. eg,
!tomato 100 100 will throw a
tomato at the top right of the screen,
!tomato 0 0 will throw one in the
bottom left.
!rose
Throws a rose at the screen. Users can also input coordinates. eg,
!rose 100 100 will throw a rose at
the top right of the screen,
!rose 0 0 will throw one in the
bottom left.
Configs
Channel
Lets you set the channel for the overlay. you can edit the
?channel=YOURCHANNEL
part of the url to change the channel.
Hide Note
Lets you hide the initial "Tomatoes Activated" note. add
&hidenote=true to the end of your
url.
Keep Note
Stops the initial "Tomatoes Activated" note from disappearing. add
&keepnote=true to the end of your
url.
Heat
Lets you integrate the heat extension so chat can click your screen to throw a tomato.
Add &heat=true to the end of your url., then add &channelid=YOURCHANNELID to the end of your url.
You can get your channel id either through the Twitch API or a simple site like this one.
Chat Plays Pixels
An overlay that lets your chat make pixel art together, like a mini
R/Place!
Commands
!makegrid
Starts the pixel art overlay with the given size. Example:
!makegrid 10 would make a 10x10
grid.
!makegrid 10-20 would make a 10x20 grid.
Moderator only.
!color
Sets a pixel color.
!color 1-1 #f0f would change the
color of the top left pixel to magenta.
!clear
Clears the grid. Moderator only.
Configs
Channel
Lets you set the channel for the overlay. you can edit the
?channel=YOURCHANNEL
part of the url to change the channel.
Cooldown
Lets you set the cooldown for the overlay. you can edit the
&cooldown=SECONDS
part of the url to change the cooldown.
Alert
An overlay for showing an alert popup on stream.
Info
This overlay is designed to modular. It can be activated from other actions with a configurable message.
Commands
!alert
Shows an alert popup on the screen. You can also specify different styles of alert. Examples include
!alert Hello World,
!alert #retro Hello World,
!alert #urgent Hello World!!!!!!!
Setup, Info and Usage
OBS Setup
in OBS, create a browser source linking to the overlay. Recommended resolutions are 1920x300 and 1280x200. The overlay should be placed at the top of the screen.
Streamer.BOT Setup
Import all actions into Streamer.BOT, then enable all the imported commands. Then, you can disable and enable the built in example actions to your liking.
Usage
To use the alert overlay in your own Streamer.BOT actions, first set the argument "alertMessage" to the desired message. Then, run the action "Alerter" in your action.
You can also use custom styling with custom CSS in the browser source. For example;
This would then be usable as such: !alert #CustomStyle Hello World
To set the default theme (by default, it's set to the "grease" theme) you can set the URL parameter "theme" to a theme of your choosing.
For example: https://www.mikoroonii.com/Overlays/StreamerBotIntegrated/Alert?theme=retro or C://Users/JohnDoe/Documents/StreamOverlays/Alert/Alert.html?theme=dark
Score Ticker
An overlay for showing a score ticker.
Info
This overlay is a simple score ticker that can be used to show scores on the stream.
Commands
!score add
Adds a score to the score ticker. Example:
!score add 1 would give a point to the left team.
!score add 2 would give a point to the right team.
!score take
Takes a score from the score ticker. Example:
!score take 1 would take a point from the left team.
!score take 2 would take a point from the right team.
!score reset
Resets the score ticker.
!score win
Sets the score ticker to show a win message. For example,
!score win 1 would show a win message for the left team.
!score win 2 would show a win message for the right team.
Setup, Info and Usage
OBS Setup
Go to the web hosted link, and generate your URL.
in OBS, create a browser source linking to the overlay. The recommended resolution is 500x100.
It should just work out of the box.
Streamer.BOT Setup
Highlight
An overlay for highlighting a chat message.
Info
This is an overlay that lets you highlight a user's chat message on stream, utilizing the Streamer.BOT chat window.
Do note that it is recommended you use the 0.2.5 beta of Streamer.BOT (unless you're reading this in the future and 0.2.5 is fully released) so that you can utilize the dockable Streamer.BOT chat in OBS.
Setup & Usage
In OBS, create a browser source linking to the overlay. A (roughly) 3:1 aspect ratio is recommended, and it's designed to be placed on the bottom of the screen.
Next, in Streamer.BOT, import the file highlight.sb, then you can connect it to the Streamer.BOT chat.
Now, go to the chat window of Streamer.BOT and then to the chat settings. Select the Quick Actions page in the drop down, then add a global quick action called "Disable Highlight" and link it to the action of the same name.
Then, add a Message Quick Action called "Highlight" and link it to the action of the same name.
Now, when you hover over a message in the Streamer.BOT chat, you'll see a highlight button. Clicking it will activate the overlay and show it on stream!
Instructions for docking the Streamer.BOT chat in OBS can be found in the Streamer.BOT discord here. You must be signed up for the beta and in the discord to access this.
Additional Options
You can disable the profile picture in the overlay by adding ?pfp=false to the end of the URL.
Queue Window
The queue window requires a little bit of setup. Bear with me!
Please note that you will need to install the latest highlight streamerbot import in order to use the queueing feature.
First up, add the queue window as a browser dock in OBS.
Then, in Streamer.BOT, copy the action id (right click, copy id) of the "Highlight" action.
In the queue dock, click the settings icon, paste in the action id and click save.
Now, add a new message quick action named whatever you'd like, and link it to the "Manual Queue Highlight" action.
You can now use the queueing feature by clicking your new message quick action in Streamer.BOT's chat dock.
If you'd like to set up the reward redemption, connect up your redemption to the trigger in the action "Redeem Highlight".
Please note that if a message is added via the reward redemption, it will not have the chatter color, badges or emotes. This is due to a limitation in the Twitch API
Plus Two
This overlay shows on screen when someone sends a message like "+2" or "-1" etc.
Config
Channel
Lets you set the channel for the overlay. you can edit the
?channel=YOURCHANNEL
part of the url to change the channel.
Setup & Usage
In OBS, create a browser source linking to the overlay. Keep it at 500px x 500px.
