Skip to content
evmux Knowledge Base

How to Add a Web Source

This guide shows you how to add web pages, widgets, and browser-based content as layers in your broadcast.

Quick Steps

  1. Click Add New Layer in the Layers panel
  2. Select Web Source from the menu
  3. Enter the URL of the web page
  4. Resize and position as needed

Understanding Web Sources

A web source displays a live web page within your broadcast. It’s like embedding a browser window into your stream.

Use CaseExample
WidgetsChat overlays, alerts, goals
Social feedsTwitter/X timeline
Live dataStock tickers, sports scores
AnimationsHTML5 animations
Custom overlaysBrowser-based graphics

Method 1: Add from Layers Panel

Step 1: Add New Layer

  1. In the Layers panel (left side), click Add New Layer
  2. Select Web Source from the available layer types
  3. A web source layer is added to the scene

A new Web Source layer on the scene showing a placeholder page, with the settings icon in its toolbar pointed out

Step 2: Enter URL

  1. Click the settings icon (gear) in the layer toolbar above the layer
  2. Keep Use link selected, or switch to Use HTML code to paste markup instead
  3. Enter the complete URL (including https://)

The Web Source settings dropper highlighted: Use link or Use HTML code, the URL field, frame width and height sliders, and Refresh Web Source

Step 3: Configure Size

  1. Set Frame width and Frame height in the same dropper
  2. Common sizes: 1920x1080, 800x600, 400x200
  3. Match the widget’s designed size if applicable

Step 4: Position the Layer

  1. Drag to position on the scene
  2. Or set exact X, Y coordinates
  3. Bring to front if needed for visibility

Common Web Source Uses

Stream Alerts (Streamlabs, StreamElements)

URL: Your widget URL from the platform
Size: Usually 800x600 or custom
Position: Top or center of screen

Chat Overlay

URL: Chat widget URL from your platform
Size: 400x800 (vertical)
Position: Side of screen

Social Media Feed

URL: Social embed URL
Size: Varies by platform
Position: Corner or dedicated area

Countdown Timer

URL: Online countdown timer URL
Size: 400x200
Position: Where visible to viewers

Web Source Settings

Basic Settings

SettingDescription
URLWeb address to display
WidthDisplay width in pixels
HeightDisplay height in pixels
Refresh RateHow often to reload (if applicable)

Advanced Settings

SettingDescription
Custom CSSInject CSS to style the page
Shutdown when hiddenStop loading when layer is hidden
Control audioEnable/disable web page audio

Tips for Web Sources

Performance

  • Web sources use resources
  • Don’t add too many simultaneously
  • Simpler pages load faster

Transparency

  • Many widgets are designed with transparent backgrounds
  • Works automatically if the page supports it
  • Check widget settings for “transparent” option

Sizing

  • Set web source size to match the widget’s designed size
  • Scaling up may look blurry
  • Scaling down wastes resources

Audio from Web Sources

  • Web pages can play audio
  • Control via web source audio settings
  • Or set that layer’s own volume to zero

Creating Custom Web Sources

You can create your own HTML pages:

Simple Custom Overlay

Create an HTML file with your content:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background: transparent; }
    .text { color: white; font-size: 48px; }
  </style>
</head>
<body>
  <div class="text">Your Text Here</div>
</body>
</html>

Host it online and use the URL.

Dynamic Content

  • Use JavaScript to update content
  • Connect to APIs for live data
  • Animate with CSS or JavaScript

Streamlabs

  1. Get widget URL from Streamlabs dashboard
  2. Copy the unique URL
  3. Add as web source
  4. Alerts, goals, chat, etc.

StreamElements

  1. Get overlay URL from StreamElements
  2. Copy the widget URL
  3. Add as web source

Other Services

  • OWN3D
  • Muxy
  • Stream Avatars
  • Custom widgets

Troubleshooting

Web page not loading?

  • Check URL is correct and complete
  • Verify the URL works in a regular browser
  • Check if the site allows embedding (X-Frame-Options)
  • Some sites block iframe embedding

Content looks wrong size?

  • Match web source dimensions to content
  • Check if widget has recommended size
  • Don’t scale beyond original size

Web source is blank?

  • Page may not allow embedding
  • Try a different URL
  • Check browser console for errors

Audio from web source is playing?

  • Check web source audio settings
  • Set the layer’s volume to zero
  • Disable audio in web source properties

Updates not showing?

  • Page may be cached
  • Try refresh/reload option
  • Clear web source cache if available

Transparent background not working?

  • Verify the web page supports transparency
  • Check widget settings
  • Some pages have solid backgrounds by default

Security Considerations

  • Only use trusted URLs
  • Don’t add web sources with login credentials visible
  • Be careful with pages that show personal information
  • Widget URLs are often private - don’t share them

Best Practices

  1. Test before going live - Verify web source displays correctly
  2. Match sizes - Use designed dimensions
  3. Limit quantity - Each web source uses resources
  4. Use HTTPS - Secure URLs preferred
  5. Have backups - External services can go down