The complete FrameWork Alerts walkthrough for OBS and Streamlabs — on video and written out, in English and Arabic.
Streamlabs + OBS
Every FrameWork alert installs the same way: a browser source in OBS, a Text Over Image variation on Streamlabs, and the custom fields that ship in your download. Watch it once, or follow the written steps below.
Full walkthrough — English · Streamlabs + OBS
Part 1
Setting up the browser source in OBS
Open your alert platform (Streamlabs) and navigate to the Alerts section.
Select the alert type you want to set up (Followers, Subscribers, Donations, etc.) and uncheck any alert types you are not using for full-screen alerts.
Copy the Widget URL provided by the platform.
Open OBS → Add a new source → Select Browser Source → Name it clearly (e.g., Alerts - Fullscreen).
Paste the copied URL into the URL field.
Set the Width and Height to match your canvas resolution:
- Find this in OBS under Settings → Video → Base (Canvas) Resolution
Enable “Shutdown source when not visible”.
Click OK and ensure this Browser Source is placed at the top of your source list, above all other sources.
Part 2
Configuring the alert variation
On your alert platform, add a new variation for your chosen alert type and give it a clear name.
Set the Layout to “Text Over Image” (this is required for the alert to display correctly).
In the Image section, drag and drop your alert file, then click Select.
Set the Alert Duration:
- Play the alert and note the full duration.
- Subtract 1 second from that duration and enter it in the Alert Duration field.
- Example: If the alert is 35 seconds → enter 34 seconds.
Sound → Leave as default (ignore).
Alert Animation → Set to Fade In / Fade Out (recommended).
Text Animation & Font → Customize to your preference.
Part 3
Adding the custom HTML / CSS / JS
Enable the Custom HTML/CSS toggle.
Go back to your alert folder and open the file named “Custom Fields — For Full Screen Alerts”.
Copy and paste each file into its corresponding section on the platform:
- HTML → into the HTML tab
- CSS → into the CSS tab
- JS → into the JS tab
Click “Custom Fields” → “Edit Custom Fields” → paste in the Custom Fields file.
Click “Update Custom Fields” then click Save (bottom right).
Part 4
Fine-tuning via custom fields
Once saved, open Custom Fields to access the following options:
| Setting | Description |
|---|---|
| Text Delay | Play the alert and pause when the screen goes black. Note the timestamp — every alert has ~4 seconds of black screen at the end. Enter that exact timestamp here. |
| Text Horizontal Position | Controls left/right placement of the text. Set to 50 for center. |
| Text Vertical Position | Controls up/down placement of the text. Set to 50 for center. |
| Alert Volume | Pre-optimized by default. Lower it if needed. |
Once everything is configured, click Test Alert to verify it works correctly.
Part 5
Fixing small alerts in the same section
If you have both a Full-Screen alert and a Small alert in the same category (e.g., Full-Screen Follower alert + Small Follower alert), the small alert will appear incorrectly scaled because they share the same widget link. Follow these steps to fix it.
Open the small alert variation.
Enable Custom HTML/CSS.
Go back to your alert folder and open “Custom Fields — For Non-Full-Screen Alerts”.
Copy and paste each file into the correct tab:
- HTML → HTML tab
- CSS → CSS tab
- JS → JS tab
Click “Edit Custom Fields” → paste in the Custom Fields file → click “Update Custom Fields” → click Save.
Open Custom Fields for this variation and configure:
- Horizontal Position: set to 50
- Vertical Position: set to 25
- Image Size: controls how large the alert appears
- Alert Layout: set to Image Above using the platform’s built-in layout option (not the Custom Fields one)
Your alerts are now fully installed and configured. If you run into any issues, please submit a Support Ticket on our website and we will get back to you as soon as possible.
Stuck on a step?
Send us a support ticket with your platform and the step you are on, and the studio will walk you through it.
Submit a support ticket