Web Source Layer
Web Source layers allow you to embed web content, custom HTML, or external widgets directly into your broadcast.
Content Types
A web source shows either a web address or your own HTML. You pick one of the two.
URL Mode
Embed external web pages:
- Streaming alert services
- Social media widgets
- Live counters and feeds
- Interactive overlays
HTML Mode
Paste your own HTML:
- Custom graphics
- Animated elements
- CSS-only animations
- Data displays
Fixed Size
A web source renders its content at a fixed internal size, independent of how big the layer is on the scene:
| Setting | Default |
|---|---|
| Fixed size | On |
| Fixed width | 1920 px |
| Fixed height | 1080 px |
This keeps the content looking the same however you resize the layer. Set the width and height to match the size the widget or page was designed for.
Common Use Cases
Streaming Alerts
- StreamLabs alerts
- Streamelements widgets
- Chat overlays
- Donation alerts
Live Data
- Countdown timers
- Score displays
- Weather widgets
- Stock tickers
Interactive Elements
- Poll results
- Social feeds
- Comments display
- QR codes
Adding a Web Source
In the studio
- Click Add New Layer
- Select Web Source
- Enter a URL or paste HTML
- Set the fixed width and height
With the AI assistant
You can ask the AI assistant to add a web source for you. Give it the URL, a name for the layer, and the size you want.
Settings Panel
Web Source settings in the layer toolbar:
| Setting | Description |
|---|---|
| URL | External web address |
| HTML | Custom HTML code |
| Fixed Width | Content width in pixels |
| Fixed Height | Content height in pixels |
Limitations
- Embedding blocked - Some sites do not allow themselves to be embedded and will show nothing
- Authentication - Logged-in states are not preserved
- Interactivity - You cannot interact with the page during the broadcast
- Performance - Complex pages may impact performance
- Delay - Content may appear with a slight delay
Transparent backgrounds are supported, so overlays can sit on top of your other layers.
Best Practices
- Use HTTPS - Secure URLs recommended
- Test before live - Verify the content loads correctly
- Set dimensions - Match the source content size
- Keep it simple - Lighter pages perform better
- Check permissions - Some services require whitelisting