ENDE
Open Dashboard

Overlay Builder

The Overlay Builder lets you build your stream overlays right in the dashboard – drag and drop on a canvas, no extra software. The result goes into OBS as a single browser source.

The Overlay Builder is free: no limit on scenes, no locked widgets, no watermark. Free and Premium differ in one thing only — how much storage you get for your own images, videos and sounds.

Beta: The builder hasn't been in use for long – expect bugs to still turn up. Build your scene calmly and test it before you rely on it in a live stream; for your first few streams it's worth keeping your existing overlay as a fallback. The feedback button in the top right of the editor reports problems to us straight from your scene. Requests are welcome there too – whatever gets asked for often and can sensibly be built gets added over time.

Scenes

A scene is a finished overlay: a canvas with widgets on it that you add to OBS as a browser source. You can create as many scenes as you like – typically one per stream situation (starting soon, gaming, just chatting, break).

Resolution

When you create a scene, you choose how large the canvas should be. Your options:

  • Alerts only – 800 × 600
  • Full HD – 1920 × 1080
  • QHD – 2560 × 1440
  • 4K UHD – 3840 × 2160
  • HD – 1280 × 720
  • Ultrawide – 3440 × 1440 or 2560 × 1080
  • Vertical – 1080 × 1920 or 720 × 1280
  • iPhone – 1170 × 2532 (portrait) or 2532 × 1170 (landscape)
  • Square – 1080 × 1080

Alerts only is the smallest preset, meant for scenes that contain nothing but an alert box. A Full HD canvas would be needlessly large for that – the widget would sit lost in all that space, and the browser source in OBS would be bigger than it needs to be.

You can change the resolution later at any time.

Templates

Instead of starting from an empty canvas, you can pick one of five templates: Starting Soon, Just Chatting, Gaming, Subathon and Charity. Each one comes with matching frames, bars and placeholders that you're free to rearrange.

Widgets

A widget is an element on the canvas. You add it from the toolbar, drag it into place and configure it in the properties panel on the right. A scene can hold up to 50 widgets.

Design

  • Text – free text with font, size, colour, background and alignment. There are 23 fonts grouped by style (sans-serif, headline, comic, gaming, retro pixel, handwriting, serif, monospace), many of them also available in bold
  • Image – JPG, PNG, GIF or WebP from your media library
  • Video – MP4 or WebM, optionally looping and muted

Live data

  • Alert box – shows follows, subs, cheers, donations, raids and power-ups as they happen
  • Label – a single live value, e.g. your latest follower
  • Countdown – counts down a duration or towards a fixed point in time
  • Chat – your chat overlay as a widget inside the scene

Embedded ByteMate tools

These widgets pull existing ByteMate features into your scene:

  • Counter – one of your bot counters (you can create one right in the builder)
  • Subathon – the subathon timer
  • Donation goal – the progress bar of your donation goal
  • Donations – the donations feed
  • Wheel – the giveaway wheel

Their look and content normally come from the matching settings page. In the builder you can override that per scene without touching your global settings – so every scene can have its own design.

Alert box

The alert box is the widget for on-screen notifications. It knows seven events:

  • Follow – a new follower
  • Sub – sub, resub, gift sub and Prime sub
  • Cheer – bits via cheer
  • Donation – a donation through ByteMate Donations
  • Raid – an incoming raid
  • Power-up (custom) – one of your custom power-ups
  • Power-up (Twitch) – built-in effects such as Gigantify an Emote

Every alert is switched on and off individually and gets its own text, image or video, sound and display duration. You put placeholders into the text – the viewer's name, the number of bits, the viewer count of a raid. The properties panel only ever shows the placeholders that fit the selected alert.

The test button plays any alert so you don't have to wait for a real event.

Note: The alert box is independent of chat alerts. You can show an alert on your overlay without the bot posting anything in chat – and the other way around.

Muting alerts in an emergency

During a followbot wave, the alert box fires one notification per fake follow. There's an emergency switch for that, which pauses chat alerts and overlay notifications at the same time:

  • In the dashboard on the start page, below Mute bot, the Mute alerts button
  • In chat with !alerts off, back on with !alerts on – !alerts on its own toggles

The command is available to moderators, so someone can step in while you're streaming. It also works when the bot is muted entirely.

What keeps running: commands, timers and the live labels. Only alerts pause. Nothing that happens while alerts are muted is replayed afterwards – so switching them back on won't hit you with a backlog of notifications.

Label

A label shows exactly one live value, with optional text before and after it:

  • Latest follower
  • Latest subscriber
  • Latest gifter
  • Latest raider
  • Latest cheerer
  • Top gifter
  • Top cheerer
  • Total bits
  • Followers today

Media library

Your own files live in the media library. Upload once, use in as many scenes as you like.

Supported formats: JPG, PNG, GIF, WebP · MP4, WebM · MP3, AAC, M4A, OGG

Storage

  • Free – 50 MB in total, up to 10 MB per file
  • Premium – 1 GB in total, up to 25 MB per file

Storage belongs to the channel owner. If a mod uploads something to your overlay, it counts against your quota.

On upload, the following happens automatically:

  • JPG and PNG are compressed to WebP – same look, far less storage
  • Animated GIFs are converted to WebP
  • Very large images are scaled down
  • Duplicate files are detected and reused instead of taking up space twice

Files that aren't used in any scene, donation sound or bingo are marked unused in the media library – that's how you find old files again when space gets tight.

When uploading you confirm that you hold the rights to the file. Don't upload anything that isn't yours.

Working in the editor

  • Autosave every 5 seconds; instantly with Ctrl + S
  • Undo / redo with Ctrl + Z and Ctrl + Y
  • Copy and paste, duplicate with Ctrl + D
  • Zoom with the mouse wheel, pan the canvas by dragging
  • Alignment guides while moving, so widgets line up cleanly
  • Lock and hide individual widgets in the layer list
  • Export and import a scene as a file
  • Screenshot of the scene

If you leave the editor with unsaved changes, you'll be asked first.

Newly inserted images and videos automatically take on the aspect ratio of the file and are fitted into the canvas – they're never scaled up.

Adding a scene to OBS

  1. Open the Overlay Builder overview in the dashboard.
  2. Click Copy URL on the scene you want.
  3. Create a new browser source in OBS.
  4. Paste the URL.
  5. Set width and height to the scene's resolution.

Changes in the editor show up on the overlay without you having to reload the source.

Important: the overlay URL is like a key. It contains a token and can therefore be opened by anyone who knows it – a browser source in OBS can't log in to ByteMate, so it has to work this way. The URL isn't linked publicly and isn't guessable, but it isn't private either: don't share it, don't show it on stream, and hide it while setting things up. The same goes for the addresses of your uploaded files.

Access for moderators

The Overlay Builder is available to you only by default. You can grant individual moderators the Overlay Builder permission under Account → Mod rights. They can then edit scenes and upload files – the storage quota stays yours.

Common questions

My alerts don't arrive. Check that the alert is switched on in the alert box. Events are only recorded for channels that have at least one scene – after creating your first scene it can take up to 5 minutes before the first events come through.

An upload fails. Either the file is larger than your per-file limit, your storage is full, or the format isn't supported. The media library shows your usage.

There's no sound in the editor. Sound from video widgets is always off in the editor. In OBS, the setting you chose on the widget applies.

I deleted the scene – is my browser source broken? Yes. The URL belongs to the scene. Create the scene again and copy the new URL.