Articles on: Stream designer

Stream Designer: Overlays, Embeds & Layers

Add Overlays: Images, websites & widgets with the Stream Designer: images, videos, websites, interactive elements - on top of your live stream playlist content. The stream designer is like a Photoshop / Canva / Figma for Live streams. The canvas is yours to arrange layers of text, images, websites and interactive elements - all in an easy to use drag and drop interface.


Live Stream Overlays: Stream Desiger

To add overlays on top of your stream playlist you can click on the appropriate element icon on the left side of the screen. Once you select where you want your element (click & drag on the canvas) new options will appear in the Sidebar on the right. Each element you add will be in a separate layer, which you can rearrange up and down (or back and front, if you prefer) as it suits your design. You can always rearrange all the media you have loaded up in the Stream Designer. Once you SAVE and PUBLISH, the overlays will appear on the stream.


There is no need to stop the stream, you can do everything on-the-fly. 💪


Stream Designer Overlay Elements

You can add the following elements with the Upstream Stream Designer:


  • Basic Shapes: (oval, rectangle): Embed basic shapes to create backgrounds for elements or geometric illustrations. Change colors, resize and make your element fit your stream perfectly.
  • Embed Website: You can embed a website or a portion of it. Graphs, live data, countdowns, time and date, tickers - any embeddable website will work.
  • External Interactive Widgets: (like StreamElements)
  • Text (scrolling or static): You can add any text to a layer in your stream. Want scrolling text? No problem. Custom font? You can do that too! Display your shoutouts with style.
  • Image: Insert jpgs, pngs and gifs into your stream. Add branding / logos and make your stream look great.
  • Video: Videos over videos? No problem! If it makes sense to you - it makes sense in Stream Designer too.
  • Display current audio track: Display currently playing audio track metadata (ID3 Tags): Song Name, Artist, Album & Cover Art! Change the font, change layout and what data to show, resize the element and make your stream more dynamic and informative with track names!
  • Display current video track: Display currently playing video track name.
  • Audio Visualizer: Our super-customisable bouncy audio visualiser has tons of colors and options so you can make it really fit the vibe of your stream.


You can use keyboard shortcuts to add the elements, too.


Elements in Stream Designer can’t be made clickable or interactive for viewers. This is because your live stream is encoded as video data, and only the video is sent to YouTube. You can still add visual elements, such as a subscribe image, but these will appear as part of the video and won’t function as clickable links.


Reorder & Edit Your Overlays

On the right side of the Stream Designer Canvas, you will see the Sidebar with options. Here you can reorder the layers - choosing what is on top and what in the background. You can also simply click on the element on the canvas. But when they are overlapping, the layers panel is where you want to go.

Once your desired layer is selected, you can click on the "paintbrush" symbol to edit the Later Settings.


You can reorder the layers.


Audio Visualiser

You can add an audio visualiser in the Upstream Stream Designer, and modify it to suit any style. Doesn't matter if you like the Winamp style, Windows 2000 style graphics, or the super-sleek modern looking visualisers - you can pick any of these styles with our visualiser customisation options.


  1. Go the Stream Designer Tab,
  2. Click on the Add Audio Visualiser Button,
  3. Click and drag across the screen to position it,
  4. Choose colors, styles and behavior in the Layer Settings Sidebar.


Audio Visualiser Overlay Element

Add Image & Video Overlays

Want to add your logo? Channel branding visuals? A whole video playing on top of your content? Use the Image and Video overlays!


  1. Go to your Stream Edit page, click on the Stream Designer Tab
  2. Click on the 🌁 Image icon (or 🎥 video) on the left side of the screen
  3. Click and drag on the canvas to position the element
  4. Choose your file from the media library


Embed a Website Overlay

  1. Go to your Stream Edit page, click on the Stream Designer Tab
  2. Click on the 🌐 "Globe / Web" icon on the left side of the screen (Embed a website or StreamElements)
  3. Click and drag on the canvas to position the website on the livestream
  4. Paste the website link into the URL field


You will only be able to embed websites that allow embedding. Some websites do not allow this. To change this, you could try to contact the website admin/owner and inform them that you want to embed the website as an iFrame.


You will not be able to click on anything on the embedded website in your livestream. Make sure your website has no cookie warning or pop-ups.


Embed StreamElements Alerts, Widgets & Overlays

Embedding StreamElements widgets is the same like embedding a website. First you will need to create an account on www.streamelements.com to create your alert / widget / notification. Once you set up your alert, you can find its URL and paste it into the Upstream Stream designer, in the Embed Website URL field:


  1. Create an alert via StreamElements (or any similar external website) and copy the URL of your alert
  2. Go to Stream Designer on your Stream Edit page
  3. Click on the 🌐 "Globe / Network" icon on the left side of the screen (Embed a website or StreamElements)
  4. Click and drag on the canvas to position the element
  5. Paste your StreamElements alert or widget URL


StreamElements has an option to send test notifications / alerts. You can Preview your stream or run it Unlisted to send a test notification from StreamElement, to make sure everything works as it should.


Display Current Audio Track & MP3 Metadata / ID3 Tags

#1 thing to make your 24/7 music stream more interactive and useful, is to show the audio metadata:


  1. Go to Stream Designer on your Stream Edit page
  2. Click on the Display Current Audio Track icon in the Stream Designer menu (on the left)
  3. Click and drag on the canvas to position the new element
  4. In the Track Settings section in the sidebar, choose whether you want to display the file name or mp3 metadata (ID3 tags)
  5. Use the sidebar to further edit your Current Audio Track Display (Colors, transparency, text scrolling, fonts, elements, etc...)


⚠️ If you want to use metadata instead of the File Name - first make sure that you have MP3 tracks which have ID3 tags set properly. ID3 tags are different from the filename. Editing the filename will not edit the metadata. See this guide on how to edit mp3 metadata (ID3 tags) in VLC. If you edit your files on your computer - do not forget to re-upload.


Display Current Video Track

For your users to know which video is currently playing you can add a Current Video Track:


⚠️ This element will display the file name, as video files do not have metadata/ID3 tags like .MP3s do.


  1. Go to Stream Designer on your Stream Edit page
  2. Click on the Display Current Video Track icon
  3. Click and drag to position the element
  4. Check the sidebar for more options & settings


Bonus tip: You can modify the track display format and whether the album art shows or not.


Adding Text to your Stream Canvas

Use the text element to display a scrolling text, credits, shoutouts or simply write something out on your page. You can use a custom font or choose from one of the google fonts that are preloaded in the Stream Designer.


  1. Go to the Stream Designer tab on your Stream Edit page
  2. Click on the Add Text Element icon
  3. Click and drag to position the element
  4. Check the sidebar for more options & settings


Add a text box with scrolling text

Frequently Asked Questions (FAQ)


Can I embed YouTube Playlists into my LiveStream

No - YouTube recommends against embedding playlists and videos from YouTube - so we do not support this.


Can I make an image or a link clickable on the stream?

No. Your stream is a pure stream of video data - interactive elements are not a part of the RTMP protocol, so nothing from the stream designer can be clickable for the audience. This also means that if your embedded website has a popup or a cookie warning - it will not be possible to click it away.


Can I update the stream designer while Live?

Yes! You can work on your design, save when you are ready, and when you click on Publish - your changes will be reflected on the stream.


Can you save Stream Designer settings to use for later?

Yes! Check out our guide on how to Save and Load up settings.



Updated on: 06/10/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!