Setting up 3D Chest Stream Alerts & Twitch Alerts with StreamElements & Streamlabs
3D Stream Alert Setup
Welcome, this is a short guide on how to take advantage of our 3D Alerts, if you can’t get the full support from this guide, please make sure to join our discord for live support.
Please note, that our One-Click setups are designed to work with Method 1.
Table of Contents
Using 2 Browser Sources
Adding to your Existing Alertbox
Method 1
Using 2 Browser sources
Streamelements
1. Choose the SE One click link for your platform and double click it to add to your SE library.
2. On your Overlays page, click edit on the newly added 3D Alerts
At this stage, you can skip to Step 9 if you don't want to customize anything.
3. Click on Alerts then Settings
Only large monetised alerts have been setup Donation/Gifted Subs/Superchat/Stars
4. If you click on the cog next to an active event (donation for example), it will bring you into the alerts settings
5. Near the bottom of the left panel locate and click on Variation settings
6. Click on the cog next to the setup variation.
7. This is where you can change the required amount for that alerts
All alerts are setup to be $25 variants: 2500 Stars/Bits, 5 Gifted, $25 Donation/Superchat, and to act as an ultra alert.
8. Go back to Step 4, and repeat for any other alerts you would like to customize.
9. When you are happy, click on Save in the top right corner, then the Link Icon just to the left of preview to add a link for obs into you clip board.
10. Go into OBS/SLDesktop, and add a new browser source. Set it to 960x540.
11. In the URL box, add your copied browser source.
12. If you'd like to test your new alerts, go back to your overlay editor, and click on Emulate in the lower tool bar. Make sure to click on the Preview Live on Stream checkbox to see it on OBS.
Each alert is a variation, so make sure to emulate a custom alert with the correct variation to trigger the alert
13. If you now have 2 sets of alerts, and don't like the double trigger, just go into your other alert box, and create a completely blank alert with the same time and required amount settings. No text/audio/video. The idea is to trigger a blank alert so the 2nd alertbox can do its thing.
Streamlabs
1. Double click on the SL 3D Alert One Click link to add it to your SL account
2. This will take you to the website, then it will give you a list of all of your current SL Themes, scroll to the bottom, and Create a new Widget Theme
3. Give it a name of your choice, then Create
4. Find your newly created theme, and click on Use. This is will add the one click settings to your new theme
At this stage, you can skip to Step 12 if you don't want to customize anything.
5. On the left toolbar, locate and select Alert Box.
6. Find the event you would like to edit
Only large monetised alerts have been setup: Donation/Gifted Subs/Gifted Supporters/Superchat/Stars
7. Once you've selected the event you want to edit, scroll to the bottom and click on the Open Alert Variations then Edit the variation.
8. You can change the required amount by changing the value in the Frequency box.
9. Scroll to the bottom and click on Save.
10. Go back to Step 6, and repeat till you have done all your events.
11. Since this is a separate alertbox, we need the specific link for this themes alertbox. Using the Widget URL link will only trigger the currently active theme, and we dont want that if you want to use multiple alertboxes.
12. Click on Manage Themes at the top. Then find the new 3D theme you have created.
13. Click on the central link icon (looks like 2 chains linked together), followed by the clipboard icon to the far right of where it says Alert box.
This will copy a link to your clipboard.
14. Open up SL Desktop or OBS.Studio
15. Add a new browser source to your desired scene and set the resolution to 960x540, followed by pasting the link in the URL textbox
16. If you use the alertbox widget in SL Desktop make sure that your base alerts are set as the active one alertbox in your themes page, and the correct scene collection. The browser source should act separately to the alertbox widget.
17. If you now have 2 sets of alerts, and don't like the double trigger, just go into your other alert box theme, and create a completely blank alert with the same time and required amount settings. No text/audio/video. The idea is to trigger a blank alert so the 2nd alertbox can do its thing.
Method 2
Adding to your existing Alertbox
This involves copy pasting code between 2 overlays/themes.
Therefore it requires a higher technical level than Method 1.
**If you aren't comfortable with the technical side, but would like to give this is a try, you can always duplicate your overlays/themes so you have a save point incase you mess up.
Streamlements
1. Login to your Streamelements account
2. In your Overlays area, find your previous overlay you would like to add the alerts to. Click on Edit to get it to open in a new tab.
You will need to click on the One Click link provided in the download folder.
3. Find your old Overlay and click on Edit to open that in a new tab as well.
4. Now drag the 2 tabs away into their own windows. Drag the New Overlay window to the left border of the screen so it snaps the left half of the screen, and the same with the Old overlay snapped the right half
5. The idea here is to copy the code from the variation of the new alerts to variations of your old set of alerts.
6. In your new alerts locate your event, in alerts>settings>event type>variations settings>event variation settings>Open CSS Editor.
This is the same as Step 3 to 7 in Method 1 if you would like a more detailed run-through of that step.
7. Now in your Old Alert box, locate the same event using the same method, and create a variation for that event.
For example: if you are adding a donation variation, locate the donation event variation settings for both alert boxes.
8. If you aren't, you want to replicate the settings in the new alert box with the one in your current alert box.
Variation Name/Condition/Requirement Amount/Upload video and Audio are the settings you'll want to replicate.
9. Open CSS Editor on both overlays, and copy the HTML/CSS/FIELDS from the New to the Old Alertbox.
If you are using our alert boxes for your original alerts, when you create a variation, it will have the base code already part of it, so you will ONLY need to copy the CSS across.
10. Below CSS Editor, click on Font and Text settings on both sides and make sure that Font Name/Color/Font Sizes/Vertical Positions are correct on both ends.
11. Assuming everything is correct, and you can test by saving the variation and clicking on the play button next to the variation settings.
12. If you are happy, repeat the process from Step 7 to 11 till you have all your alerts correctly setup.
13. Press Save in the top right corner to see the changes to OBS/SLD. Emulate the events to see them live in your streaming program.
Streamlabs
1. Login to your Streamlabs Account
2. In your dashboard, locate Alert box on the left panel, followed by Manage Themes
If you are already on the correct theme, just click on Alert box again and skip to step 4.
3. Locate the theme you want to add the alerts to and press Use to activate it as your main theme, followed by Alert box in the left panel.
4. In the download folder you received from us, click on the One Click SL 3D Alerts Link to add the new code to your themes. You will need to go through the usual process of creating a new theme>then using that theme to add the one click settings to it.
Do not add this to an old theme as it will override the old settings and delete them. Always create a new theme here!
5. Once its added to your library, activate the theme by pressing Use, followed by Alert box in the left panel.
6. Find the correct event and locate its Alert Variation at the very bottom of the screen. Click on Edit to edit the Variations settings.
7. You'll want to open up notepad here. Pressing your Windows Button + Typing "Notepad" is the fastest way to getting to it if you don't have a shortcut available.
8. Take note of the settings here, we are going to replicate them in your used theme. I like to take these notes on a real piece of paper.
Name/Condition/Frequency/
Then scroll down to Custom Fields and note down
Font Name/Color/Font Sizes/Vertical Positions
9. Now roughly in the middle you'll fid the html/css fields. Copy and paste these into your Notepad
Some loveley hotkeys to make this step easier
CTR+A: Select ALL
CTR+C: Copy
CTR+P: Paste
Make sure to have defining seperating if you are copying it all into the same notepad. Just some dashes or anything to separate the HTML/CSS/Fields code
10. Click on custom fields then edit custom fields and copy paste the code into Notepad
11. Once you have the noted down settings and code copied, we are gonna click on Managed Themes and go to your original alertbox
12. Locate the event and go into variation settings as and Add a New Variation
If you are already using our alert boxes, the settings should transfer automatically, and you'll just need to copy across the CSS and Font Size/Vertical Positions/Anything else that's different.
13. Start by copying across the HTML/CSS/Fields across to the correct sections, followed by Uploading the Video and Audio from the download folder.
14. Go through the rest of the settings to replicate the other alert box, specifically the custom fields settings like Font Name/Color/Font Sizes/Vertical Positions.
15. When you are happy, press Save at the bottom then, repeat the process from Step 12 for any other events you want to add to your existing alerts.