To make the process as simple as possible, we have created this guide for installing and setting up your new streaming graphics. We have split the guide up into general setup, Customizing Widgets and then specific setup based on whether you are using Streamlabs OBS (Slobs) or pure OBS.
Importing Widgets To Your Streamlabs Account
Locate the README file in the package folder and open it. It should open in your browser. If you want to install all of the widgets then click the link below Install All Widgets. If you want to selectively install widgets then start with the first link and repeat this process for each one.
The link will direct you to Streamlabs, if you are signed in you will be shown the themed overlay, otherwise you will be prompted to login. Select Create button beside Create a new Widget Theme. Name it whatever you like and hit create. The theme overlay will pop back up, find the theme you just created and select the Use button next to it.
Streamlabs OBS Setup
Importing Overlay File
The overlay file is located in the root folder of the package. As shown in the video you will need to select the gear icon in the lower left to bring up the settings menu. Then navigate to Scene Collections and select Import Overlay File, and select your .overlay file.
Importing Widget Files
As shown in the video above, start off by selecting the gear icon in the lower left. Then navigate to Scene Collections and select Import Widget File In Current Scene. In the root of your package folder you will see a folder named Widgets, in here you can choose whichever widget you would like to import. Once imported this will have the ideal resolution already set for use with our widgets.
Importing OBS Scene Collection
Unlike the Streamlabs OBS overlay files which imports all of the animations, the OBS import is less advanced and imports only the scene collection structure. You will manually have to add the animations to sources, but you can still save a lot of time from setting up different scenes and sources.
As shown in the video, start by selecting the Scene Collection dropdown menu. Then select import and locate the package.json file in the root of your package folder. Now to switch to the new scene collection, once again select Scene Collection and select package.
Adding Animations / Static Files To Sources
To add animations to your media sources, right click the source and select properties. Click the browse button and locate the relevant animation file.
If you would prefer to use static files instead of animated ones, then instead of a media source you should create an image source. Then just follow the same procedure as shown above to plug in your static image.
Adding/Configuring Stinger Transition
In the scene transitions section click the + icon to add a new scene transition, alternatively select the gear icon in this section to edit an existing scene transition. On the window that appears, select the browse button and select the animated transition file in the package folder.
Now change the Transition Point Type to frame, then input a value between 30-50 into the Transition Point section. The value you input determines how long after you change scene the background changes. So you want to time the transition point to where the stinger has fully covered the screen before the background is changed.
Adding Streamlabs Widgets To OBS
In the sources section press the + icon and then Browser to add a new browser source to the current scene. Select Create New and press Ok. On the properties page that now show’s, set the resolution from the resolution list below. Now go to Streamlabs and select All Widgets from the vertical menu on the left of the screen.
Select the widget that you are want to setup. Now click the Copy button next to the Widget URL section. Head back to OBS and paste (Ctrl + V) this link into the URL input for the browser source. Now press the Ok button.
Repeat this process for all of the widgets you wish to add to the scene.
Widget Resolutions (Width x Height):
- Alert Box : 1000×1000
- Chatbox : 1280×1000
- Dono Goal : 1080 x 400
- Event List : 800 x 600
As shown in the video above, from your Streamlabs dashboard, select the All Widgets from the vertical menu on the left. Now select Alert Box. From here you can select each individual alert and customize. Select an event to customize and scroll down until you see a Custom Fields tab. Select this tab and you will be able to customize the text for the given alert.
Make sure to press “Save Settings” to keep your new changes.
As shown in the video above, from your Streamlabs dashboard, select the All Widgets from the vertical menu on the left. Now select Chat Box. From here you can change the Font Size. Scroll further down to Custom Fields tab for extra customization.
Make sure to press Save Settings to keep your new changes.