StreamUP Product Documentation
<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> This product comes without a .StreamUP file because it is a browser source.
You still need to install the product into Streamer.bot and use our DLL so make sure you follow the instructions below! Installing Products into Streamer.Bot Adding a Product into Streamer.Bot Setting Up a Product in Streamer.Bot
All these links go to the same page but for easy of access I included them all so that you can clearly see what is required to do before continuing!
</aside>
<aside> <img src="/icons/exclamation-mark_red.svg" alt="/icons/exclamation-mark_red.svg" width="40px" /> This guide assumes that you are running everything local on your machine and that the WebSocket within Streamer.Bot is set to 8080 otherwise some steps are different, they will be in the lower section of the documentation!
</aside>
Alright, now that you have installed everything that is required into Streamer.bot it is time to set it up in OBS! We’re going to assume that you have extracted the files and folders to a location which are easily accessible to you and that you won’t move.
<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> If there is an tiny image, you can click on the image to see a enhanced version of it.
</aside>
Right click in Sources list > Add or click the + button underneath the sources list
Click on “Browser”
You can name the Browser source whatever we want, but we call it “StreamUP - Horizontal Chat”
Make sure to tick on “Local File” in the Browser source properties screen
Click on Browse
Go to the folder where you extracted everything and go into the folder called “2 - Bot Install”
Select the “StreamUP-HorizontalChat.html” in that folder
After that make sure you have set your width and height to the canvas size, ours is 1920 x 1080 so we set that there.
Press OK
🎉 Congratulations you have now installed the StreamUP - Horizontal Chat bar in OBS! Onward to the next part!
Now that we have installed the Browser source into OBS let the real fun begin! Settings Configuration!
Go to your Streamer.Bot and find the Action called “Horizontal Chat • Settings” and click on it.
On the top right you should see a test trigger, right click on it an click “Test Trigger”
After a couple of seconds the settings page will popup and you can change your settings there.
| Setting | Explanation |
|---|---|
| Enable Twitch messages | Enables or Disables showing Twitch messages in the chat bar |
| Enable YouTube messages | Enables or Disables showing YouTube messages in the chat bar |
| Enable Google Fonts | This will enable Google Fonts on the bar.$^1$ |
| Google Font | Select one of 500+ fonts that are available to you$^2$ |
| Google Font Effects | Select one of the effects to apply that to the google font$^3$ |
| Display name of Font | Display name of the font that is available on your Windows Machine$^1$ |
| Color of the font | Font Color / Colour |
| Font size in pixels | Font size in pixels (Default: 18) |
| Enable font shadows | Enable font shadow$^3$$^4$ |
| Force UPPERCASE letters | Forcing all letters to be uppercased |
| Hide Chat Commands? | Hides ! commands |
| Hide user Icons | Hide Icons / badges of the user |
| Ignored Users | Users to ignore in the chat bar. Users must be separated by a comma! |
| Location of Bar | The location of the bar. Top or bottom. |
<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> $^1$ With Google Fonts enabled the normal font will be ignored! $^2$ You can see previews of the fonts here: https://fonts.google.com/ $^3$ Not all font effects are pretty on each font, you need to experiment with it. $^4$ It is highly recommended to disable this when using a Google Font Effect
</aside>
If you have set everything to your liking, this should be it! Congratulations on setting up the StreamUP - Horizontal Chat bar! 🎉