An Overlay is the container element that groups your Building Blocks, Data Providers, and Widgets, and controls when they appear on-air. You trigger an Overlay IN to show it and OUT to hide it — either from the Remote Control or via the API.
You can identify Overlays in the Elements Tree by their IN / OUT toggle buttons.
Use cases
Displaying a lower third, bug, or strap during a live broadcast.
Switching between multiple graphic layouts during a show without changing the Output URL.
Running two graphics simultaneously on the same canvas using separate Regions.
Triggering graphics automatically via the Control API in response to external events.
Testing and preparing graphic content without putting it on-air.
Prerequisites
You have editor access to a Graphics Package in Viz Flowics.
The Graphics Package has at least one Region in the Elements Tree. Overlays must be placed inside Regions.
The Output is enabled (live) before triggering Overlays. A disabled Output will show a watermark regardless of the overlay state.
How it works
Overlays live inside Regions in the Elements Tree. A Region defines an area of the canvas, and an Overlay defines the content that appears within that area at a given moment. When you trigger an Overlay IN, its Building Blocks render on the Output. When you trigger it OUT, they disappear, following the configured transition animation.
Key rules to understand
One active Overlay per Region at a time. If you trigger a second Overlay IN within the same Region, the first one automatically goes OUT. To show two graphics simultaneously, place them in separate Regions.
Overlays can only be added inside Regions, not inside other elements or directly on the canvas.
Overlays are shared across Output Profiles. If you use Output Profiles (e.g., a
?profile=vmixURL), an Overlay will only appear on that profile if its parent Region is tagged with the corresponding profile tag. An untagged Region will not appear on any profile-filtered Output.Enabling an Output and triggering an Overlay are two separate actions. Enabling the Output removes the watermark; it does not put any graphics on-air.
Step-by-step guide
Step 1 — Add a Region and an Overlay
In the Graphics Editor, open the Building Blocks panel. Drag a Region onto the canvas first. Then drag an Overlay inside the Region in the Elements Tree.
If you drag an Overlay directly onto the canvas without a Region, Flowics automatically creates a Region.
To learn how to add elements to the Graphics Editor, click here.
Tip: Name every Overlay by double-clicking it in the Elements Tree. Named Overlays are much easier to identify during live operation, especially in packages with many graphics.
Step 2 — Add content inside the Overlay
Drag Building Blocks (text, image, data, etc.) inside the Overlay in the Elements Tree. All elements inside the Overlay will appear and disappear together when the Overlay is triggered IN or OUT.
Step 3 — Configure Overlay properties
Select the Overlay and open the Inspector (right sidebar):
Position Size
Position Size
Position: Change the Overlay position within the Canvas along the X and Y axes (as a percentage relative to the configured screen resolution).
Size: Change the Overlay size within the Canvas based on its width and height (as a percentage relative to the configured screen resolution).
Background Style
Background Style
Within the Inspector, you can modify the element's background look and feel. It can be a solid color, a gradient, or an image.
You can learn how to implement these background-specific properties by clicking here.
Transitions
Transitions
You can set transitions between overlays. When you have an overlay selected in the tree or canvas you can choose between all the different transition types we offer. You can set both entrance and exit transitions in milliseconds.
For more information about Transitions, please click here.
Tags
Tags
Tags are useful for identifying elements in your Graphics Package that you want to access later. For example, they can be used to create Output Profiles. For more information about Tags, click here.
Step 4 — Publish the package
Click Publish in the top bar. Changes made in the Editor do not appear on the Output until the package is published.
Step 5 — Trigger the Overlay from the Remote Control
Open the Remote Control. Find the Overlay in the list and press IN to put it on-air, and OUT to remove it.
How to duplicate or copy an Overlay
To copy an Overlay within the same package or across packages:
Select the Overlay in the Elements Tree.
Press Ctrl + C (Windows) or Cmd + C (Mac) to copy.
Navigate to the destination location (either the same package or a different one).
Press Ctrl + V / Cmd + V to paste.
This works for Overlays, Regions, and most building blocks. It does not work for entire Scenes.
Best practices
Name every Overlay clearly. Use descriptive names like "Lower Third — Guest Name" instead of "Overlay 1." This prevents triggering the wrong graphic during a live show.
Use separate Regions for graphics that must appear simultaneously. If you need two graphics on-air at the same time, they must be in different Regions.
Tag Regions with Output Profile tags before publishing. If you use profile-filtered Outputs, set up the tags in the Editor before the broadcast — not during.
Test every Overlay on the Output URL in a browser before connecting your broadcast system. This quickly isolates Flowics issues from integration issues.
Apply a minimum delay of 200–300 ms between API trigger calls. If you trigger Overlays via the Control API in rapid succession, calls may overlap. Apply the delay only to the Take Overlay In call, not the Update Control call.
Troubleshooting
The Overlay is not appearing on the Output
Note: the steps below apply regardless of which broadcast system you are using (vMix, Tricaster, OBS, TVU Producer, or any other integration). Before assuming the issue is in the integration, always verify the Output URL renders correctly in a browser first.
Common causes:
Another Overlay is already IN in the same Region.
The Region is not tagged for the active Output Profile.
The Output URL in the broadcast system is stale.
OBS / vMix browser source cached.
How to fix:
Check which Overlay is currently IN in the same Region — only one can be active at a time.
Open the Output URL directly in a browser. If the graphic renders there but not in your broadcast system, the issue is in the integration, not in Flowics.
If the Output URL includes
?profile=, verify the Overlay's parent Region has a tag matching that profile name. An untagged Region will not render on any profile-filtered Output.If you are using vMix or OBS, clear the browser source cache before starting your broadcast. Cached graphics from a previous session can persist and appear incorrectly during a live transmission, or prevent new graphics from loading properly.
To clear cache in vMix: right-click the browser source → Reload. To clear cache in OBS: right-click the browser source → Properties → Refresh cache of current page.
As a best practice, always reload your browser sources in vMix and OBS before going live.
The Overlay appears but shows no data — goes on-air empty
Common causes:
The Data Provider has lost its connection to the data source.
The data source itself has no content.
How to fix:
In the Remote Control or Editor, find the Data Provider connected to the Overlay and click Synchronize Connector. This forces a fresh data pull and resolves most cases of empty on-air graphics.
Check for a warning indicator on the Data Provider in the Elements Tree. If disconnected, reconnect it from the Inspector.
Verify the data source has content — open the connected Google Sheet, JSON endpoint, or other source and confirm values are present.
The Overlay stops working mid-broadcast
Common causes:
The Data Provider disconnected from its source.
The project was paused or stopped.
A stale browser session in the Remote Control.
How to fix:
Click Synchronize Connector on the Data Provider — intermittent data source disconnects are the most common cause.
Go to Project Home and confirm the project status is Running. A paused project stops all data collection.
Reload the Remote Control tab. A stale session can lose sync with the Output — reload and re-trigger the Overlay.
If triggering via API, check for race conditions. Calls under 100 ms apart may overlap. Use a minimum interval of 200–300 ms between Take Overlay In calls.
The transition is not animating or is laggy
Common causes:
Transition duration is set to 0 ms.
Large Dynamic Lists causing package-wide performance issues.
OUT triggered before IN transition finishes.
How to fix:
Select the Overlay in the Inspector and confirm the transition duration is greater than 0 ms for both entrance and exit.
Check Dynamic List building blocks — if the total item count across all lists in the Overlay exceeds 500, reduce the data range.
Test the Output directly in a browser. If the transition is smooth there but laggy in vMix or Tricaster, the issue is on the broadcast system side (frame rate settings, NDI latency).
If triggering OUT before the IN animation finishes, the animation reverses by design. Wait for the IN transition to complete before triggering OUT for a clean exit.
I can only see one Overlay at a time — I need two simultaneously
This is expected behavior. Only one Overlay can be active per Region at a time.
To display two graphics simultaneously, place each one in a separate Region. Add a second Region in the Graphics Editor, move the second Overlay inside it, and publish. Each Region operates independently — both Overlays can be IN at the same time.
When to contact support
Contact the support team if:
The Overlay does not appear on the Output URL in a browser (not just in the broadcast system).
The Data Provider shows a persistent error after reconnecting and synchronizing.
A transition or Region behavior is inconsistent with what is described in this article.
When contacting support, include: your Graphics Package URL, the Output URL, and a description of the exact steps you took before the issue occurred.
Quick reference — Remote Control actions
Action | How |
Send Overlay on-air | Press IN next to the Overlay name |
Remove Overlay from air | Press OUT next to the Overlay name |
Take all Overlays out | Take All Out in Quick Controls (Rundown Control only) |
Update live content | Edit in Overlay Controls → press Update Output |
Instant update | Controls marked Direct Update apply immediately |
Copy an Overlay | Select → Ctrl+C / Cmd+C → navigate → Ctrl+V / Cmd+V |