Setup Guides

Stream Package Quick Install

Download Overlay Files: Right click on the file you downloaded after your purchase and click Extract. This should work for .zip or .rar files.

‍Open Streamlabs: Launch Streamlabs OBS on your computer.

‍Access Scene Collections: Navigate to “Settings” in the lower left corner, then select “Scene Collections” from the menu on the left.

‍Import Scene Collection: Click on “Import Overlay File” and locate the overlay file on the Tutorials/Install Guide folder. Select the .overlay file you want to import and click “Open”.

‍Adjust Overlay: Your overlay will be imported into Streamlabs OBS. You can now adjust all scenes and move the overlay elements to your liking within the editor.

‍Editing Social Media: Click on the Social Media scene and open up the Social Media folder on the Sources column on Streamlabs Desktop. You'll find 4 Social Media folders, each one with a text source called USERNAME and a Custom Icon source. You can double click the USERNAME sources to edit and do the same with the Custom Icon source.

Stream Alerts Quick Install

Unzip the Downloaded File: After purchasing a stream package from StreamSpell Store, locate and unzip the downloaded file on your computer.

Access the Tutorial: Navigate to the stream package folder, open the “Tutorials” folder, and double-click the “Animated_alerts_setup” web file.

Create a New Widget Theme: Wait for the “Create a New Widget Theme” option to appear, click on it, name the stream package you are using, and select the “Create” button.

Use the Created Widget Theme: Click the “Use” button next to the option you just created. This will open a page where you’ll find the URL code of the alerts. Copy this URL code.

Add Alerts to Streamlabs Desktop: Return to Streamlabs Desktop, click on the “+” icon inside the “Sources” > “Browser” box, name it as “Alert” > “Ok”, and paste the code inside the “URL” option in the “Properties for Alert” box. Position the alert box to your preference on the screen. Note that you can also add this source as Alert Box on Streamlabs Desktop.

Test the Alerts: Go back to the Streamlabs webpage, and click on the test options like “Test Follow” to ensure the alerts are working properly.

Select Your Streaming Platform: On the Streamlabs website, click on the down arrow icon next to your avatar and select the platform you are using to adjust the settings accordingly.

Stream Package Manual Installation
‍
1. Creating the Social Media Scene:
  - Click the “+” icon and then “Add Scene”. Name your scene as “Social Media”.
  - Inside the “Sources” box, click on the “+” icon and then on “Text (GDI +)”.
  - Check the “Create New” option and name it as you wish. Duplicate the names, until you get four texts on your screen.
  - Open the folder containing the Stream Package you purchased, go to “Icons” -> “Social Media”, select the icons you want to display and drag them into the “Sources” box in OBS Studio.
  - Select all icons, right-click, click on the “Transform” option, then on “Center to screen”. Set one icon at a time with the size and position you want.###

2. Creating the Starting Scene:
  - Inside the “Scenes” box, select the “Starting” option. Open the Stream Package folder, go to the “Screens” folder, and drag the “Starting.webm” file to the “Sources” box in OBS Studio.
  - Click on the gear icon in the “Properties” option and check the “Loop” box.
  - To include the Social Media scene, click on the “+” icon inside the “Sources” box, select the “Scene” option, click on “Social Media” and “Ok”. Adjust the size and position you want.###

3. Creating the BRB (“Be Right Back”) Scene and the Offline Scene:
  - Follow the same steps as the “Starting” Scene, ensuring to name it correctly according to the scene you are creating, and drag the right file.###

4. Creating the Intermission Scene:
  - Follow the same steps as the “Starting” Scene, but name it “Intermission” and drag the right file for your Intermission scene.
  - To include the webcam, in the “Sources” box, click the “+” icon, then “Video capture device” and click “ok”. In the video capture properties options, select “Custom” in the “Resolution FPS/Type” option, and then click on “1920×1080” inside the “Resolution” option.
  - Adjust the webcam video to the ideal size, go to the “Sources” box, select the “Video Capture Device” option and drag it under the “Intermission.webm” option.
  - To add your Display Capture, click the “+” icon in the “Sources” box, select “Display capture” and adjust accordingly.
  - To include icons, go to the Stream Package folder, click inside the “Icons” folder, then in the “Label” folder. Select the icons you want and drag them to the “Sources” box. Adjust one at a time in your desired positions.
  - For the chatbox, log into your Streamlabs account, select the “All Widgets” option, click on “Chat Box” and copy the URL. Go back to OBS Studio, click on the “+” icon inside the “Sources” > “Browser” box, name it “Chatbox”, paste the URL into the “URL” option inside “Properties for Chatbox”, and adjust it in the chat location.###

5. How to Setup the Transition:
  - In the “Scene Transitions” section, choose the "Stinger" option. Name it "Transition" and click OK. Click on the “Browse” option, select the Stream Package folder, search for the “Transition” folder and select the “Transition.webm” file. Preview the transition and adjust the transition duration (e.g., 1000 or 1200 MS).###

6. Creating the Live Scene:
  - In the “Scenes” box, click the “+” icon and name the scene as “Live”.
  - Open the Stream Package folder, open the “Overlay” folder, select and drag to screen the “Webcam.webm” file, and twice the “Overlayslot.webm” file.
  - Go to the “Label” folder, select the icons you want to appear on your screen and drag them to the “Sources” box.
  - Configure your Live screen by selecting the “Live” option inside the “Scenes” box, then go to the “.webm” files inside the “Sources” box and click on the gear icon next to the Filters option. Check the box that corresponds to the Loop for all the “.webm” files.
  - Adjust the files on the screen to your preference, and to include the webcam in the live scene, click on the “+” icon inside the “Sources” box and choose the “Video Capture Device” option. Select “Custom” from the “Resolution FPS/Type” option and then click on “1920×1080” within the “Resolution” option. Adjust it to the optimal size, go to the “Sources” box, select the “Video Capture Device” option and drag it under the “Game Capture” option.
  - (Optional) To move all icons at once, click the “+” icon in the “Sources” box, select the “Group” option, name it, move all the files inside “Sources” to the group folder you just created.


Stream Alerts Quick Install via Streamlabs

Unzip the Downloaded File: After purchasing a stream package from StreamSpell Store, locate and unzip the downloaded file on your computer.

Access the Tutorial: Navigate to the stream package folder, open the “Tutorials” folder, and double-click the “Animated_alerts_setup” web file.

Create a New Widget Theme: Wait for the “Create a New Widget Theme” option to appear, click on it, name the stream package you are using, and select the “Create” button.

Use the Created Widget Theme: Click the “Use” button next to the option you just created. This will open a page where you’ll find the URL code of the alerts. Copy this URL code.

Add Alerts to OBS Studio: Return to OBS Studio, click on the “+” icon inside the “Sources” > “Browser” box, name it as “Alert” > “Ok”, and paste the code inside the “URL” option in the “Properties for Alert” box. Position the alert box to your preference on the screen.

Test the Alerts: Go back to the Streamlabs webpage, and click on the test options like “Test Follow” to ensure the alerts are working properly.

Select Your Streaming Platform: On the Streamlabs website, click on the down arrow icon next to your avatar and select the platform you are using to adjust the settings accordingly.

1. Access StreamElements:
  - Go to the StreamElements website and login using your preferred platform. You'll be redirected to the main dashboard.

2. Navigate to Overlays Section:
  - Click on “Streaming Tools” followed by “My Overlays” to access the overlays section.

3. Create a New Overlay:
  - Click on the “Create New Overlay” option to start setting up a new overlay.

4. Select Overlay Resolution:
  - A window will prompt you to select your overlay resolution. Choose the resolution and click on “Start”.

5. Rename and Add Widget:
  - Rename your scene/overlay at the top of the screen, then click on the “Add Widget” option.

6. Choose Widget Type:
  - Since we are setting up an Intermission scene, click on the “Static/Custom” option.

7. Select Image or Video:
  - Click on “Image” for a static package or “Video” for an animated package, depending on what you purchased.

8. Upload Your Scene:
  - Click on “Change video” or “Set Image”, and a window will appear allowing you to upload your scene. Make sure everything is extracted from the zip folder you downloaded from the store, select the Intermission scene, upload it, and click “Submit”.

9. Adjust Position, Size, and Style:
  - Click on “Position, size and style” and ensure the resolution matches what you selected earlier.

10. Add More Elements:
   - Click on the “+” icon on the left bottom side to add more elements like widgets to your Intermission scene.

11. Incorporate Chat Widget:
   - Click on the “+” sign, then “Stream Tools”, and finally “Your Stream’s Chat” to add a chat widget. Position it on the “Chat” part of the Intermission scene and adjust settings like time options, color options, and texts on the left side of the screen.

12. Add Stream Labels:
   - Click on the “+” sign, then “Labels”, select the stream label you want to add (e.g., “Latest Follower”), and position it wherever you prefer.

13. Upload Stream Label Icon:
   - Click on the “+” sign, go to “Static/Custom” and click on “Image”. Click on “Set Image” and upload the stream label icon you want to use.

14. Save and Export to OBS Studio:
   - After setting everything up, click on “Save” (top right of your screen) and click on the little “URL” icon to copy the link.

15. Create New Scene in OBS Studio:
   - Go to OBS Studio, create a new scene, name it (e.g., “Intermission Scene”), add a new source, and select the “Browser” option.

16. Paste URL and Adjust Resolution:
   - Paste the URL you copied from StreamElements, ensure the resolution matches, and now your Intermission scene is set up and ready to go in OBS Studio.

17. Add Additional Sources:
   - You can now add other sources like your display capture or webcam capture in OBS Studio.

Explore both OBS Studio and StreamElements to discover more customization options for your stream setup. By following these steps, you'll have a well-organized and professional-looking Intermission scene set up in OBS Studio using StreamElements overlays.

SpellChat offers a sleek, customizable chat widget designed for streamers to interact with their audience. With an easy-to-use interface, you can personalize colors, shapes, and more. Here’s a step-by-step guide on how to integrate SpellChat with OBS Studio:

‍Download and Extract SpellChat: Download SpellChat and extract the contents of the downloaded file to a folder of your choice.

‍Create a New Widget Theme: You'll be redirected to Streamlabs website. Click on "Create a new widget theme", name it as you wish, and then click on "Use".

‍Customize Your Chat Box: Scroll down to the "Custom Fields" area to customize the chat box by changing colors, font, and more. You can also explore CSS, HTML, and other options near "Custom Fields".

‍Save Your Settings:After customizing, click on "Save Settings".

‍Copy the URL:Scroll up and copy the URL displayed on the page.

‍Open OBS Studio:Navigate to the "Sources" panel in OBS Studio.

‍Add Browser Source:Click the "Add" button, select "Browser" source, and paste the URL in the designated field. Configure the browser source properties as desired and click "OK" to add the chat widget to your scene.

Note: You won't be able to preview the chat widget inside OBS Studio unless viewers are sending messages in the chat.

The same tutorial applies if you are using StreamElements with OBS Studio, or even Streamlabs.By following these steps, you can seamlessly integrate SpellChat with OBS Studio, enhancing your stream's interactive experience.