SEwidgets.com SEwidgets.com

Custom Widgets

Step-by-step instructions on how to add SEwidgets to your StreamElements overlay and OBS.

Step 1: Create a New Overlay

  1. Open your StreamElements Overlays page.
  2. Click "Add New Overlay".
    3. Click New Overlay button
  3. Select your preferred resolution (1080p recommended).
    4. Select 1080p resolution

Step 2: Add the Custom Widget

The Custom Widget is a native StreamElements widget that allows you to use your own HTML, CSS, and JavaScript. This is what SEwidgets.com uses.

  1. Click the + button in the bottom-left of the overlay editor.
    2. Click the plus button
  2. Select Custom Widget from the STATIC/CUSTOM section.
    3. Select Custom Widget
  3. IMPORTANT: Delete all the codes that are already in all the tabs (HTML, CSS, JS, FIELDS & DATA). You must start with empty fields.
  4. Go to the SEwidgets.com widget you want to install and copy the code from the code boxes on that page.
  5. Paste the code into the corresponding (now empty) tabs in the StreamElements editor.

Step 3: Copy your Overlay URL

  1. Once your widget is in place and saved, hover over the link icon in the top right and click to copy your overlay URL.
    2. Copy overlay URL

Step 4: Add the Overlay to OBS

  1. In OBS, navigate to your Sources panel.
  2. Click the + button and choose "Browser".
    3. Add Browser Source in OBS
  3. Select "Create new", give it a name (e.g., "SEwidgets"), and click 'OK'.
    4. Create new source
  4. A new window will appear for the properties. Set the options as follows:
    5. Browser Source Properties
    • URL: Paste the overlay URL you copied in Step 3.
    • Width: 1920
    • Height: 1080
    • FPS: 60 (or 30 depending on your stream settings).
    • Custom CSS: Leave as default (empty).
  5. Click 'OK' and you're done! Your widget is now visible in OBS.