Using Web Widget Overlays

How to use widget in Ecamm Live.

Updated over a week ago

Widget Overlays

Ecamm Live supports displaying web widgets as Overlays. Widgets are transparent web pages designed to be overlayed on a live stream. They typically include dynamic content such as alerts and chat messages. Streamlabs widgets are a quick way to get started.

Once you have created a widget, locate and copy the widget's URL.  See the example below from the streamlabs.com Alert box widget.

There are 3 ways you can add a Widget Overlay:

  • Select New Widget Overlay in the Overlays menu at the top of your display

  • Click the globe button at the bottom the Overlays Window.

  • Drag a web URL from the Finder or your web browser’s address bar into the Main Window or Overlays Window.

Selecting New Widget Overlay in the Overlays menu will bring up sheet to paste in URL and several options:

  • Display Name: Enter a name for the widget. This is used for display purposes only, to identify the Overlay later.

  • Width and Height: Indicate a width and height for the widget. This will determine the scale of the widget.

  • Fill Entire Frame: This checkbox will make the widget fill the entire broadcast area. When using this option, the overlay cannot be resized or moved around like a normal overlay.

  • Frame Rate: By default, the widget’s contents will update 15 times per second. You may wish to increase the frame rate if more frequent updating is needed, or decrease it for performance reasons.

Editing Widget Overlays

To position a Widget Overlay, place your cursor in the middle of the Overlay and drag. If you’d like to adjust the Overlay’s size, hover your cursor in the bottom right-hand corner of the Overlay, and look for it to change to arrows. Drag to adjust the size. You may also use your trackpad’s pinch-to-zoom gesture, or your mouse’s scroll gesture to resize any Overlay.

To return to the widget’s setting, place your cursor over the Overlay. Two icons will appear on its left. The pencil icon brings back the widget settings sheet. A double-click on the Overlay will also bring back the settings.

Alternatively, click the tiny gear icon beside the eye icon in the Overlays Window.

Interacting With Widget Overlays

If you create a widget overlay with the URL of a website, you can enable interactive mode, and use your widget as if it was a web browser. You can now click, type and scroll the webpage.

To do this, toggle the little switch at the bottom of the widget overlay.

You can also access back and forward buttons, and a reload button.

Did this answer your question?