How to add Browser Source in OBS, Streamlabs OBS, Twitch Studio, XSplit

Heart Rate Widget — Pulsoid
4 min readJul 6, 2020

Pulsoid creates widgets for streamers and the most popular one is for streaming real-time heart rate. Pulse data is a great thing to share with your viewers and a new way to add interaction to your stream.
All Pulsoid widgets have unique URL and can be used with Browser Source in Broadcasting software like OBS, Twitch Studio, XSplit, Streamlabs OBS, etc.

To add any Pulsoid widget you need to copy an URL from the Configuration page:

Copy widget URL

You will need to paste URL into Browser Source settings. Below we will show how to use it in popular broadcasting software.

1. OBS

Adding a new Browser Source:

Click the ‘+’ or right mouse click to add a new source. Choose ‘Browser’ from the list.

For a new source, you will need to add the name. Choose something relevant.
If you added the source you need before and want to use it again — choose ‘Add Existing’ from the list.

Click ‘Ok’

In the Browser Source settings, you will need to change the URL to the one you got from the Pulsoid website.

Note, widgets show data only if the heart rate monitor is successfully connected in the mobile application(Android or iOS) and information is visible in your Dashboard

Use Width and Height parameters with full-screen overlays. Configure to 1920 width x 1080 height for Red Frame overlay for streaming, for example.

Use Custom CSS to style your widget in addition to settings the website provides you. For example, you can add a shadow or border to your BPM widget or change font of your

Click ‘OK

Resize and move your widget in Scene. Add more Pulsoid widgets to create the complete panel of heart rate monitoring. The sound widget connected to your pulse data can be added to the same way: it won’t be visible on the scene but will level up the perception.

2. Twitch Studio

Adding a new Browser Source:

In the ‘Edit Layout’ mode click ‘+’ to add a new layer.

Choose the ‘Embed Webpage’ from the list.

Set up the relevant name for your widget.

When the layer is added you will find settings on the right side of the screen. Paste the unique widget URL you got from the Pulsoid widget settings page and click ‘→’ button.

After you change the design in Pulsoid settings you may click circle arrows near URL to upload new styles.

Add more Pulsoid widgets to create the complete panel of heart rate monitoring. The sound widget connected to your pulse data can be added to the same way: it won’t be visible on the scene but will level up the perception.

3. Streamlabs OBS

Adding a new Browser Source:

Click ‘+’ in Sources List to add a new source.

Choose ‘Browser Source’ in the list of available Standart Sources.
Click ‘Add Source’.

You can also use limited Pulsoid functionality with Pulsoid App is Streamlabs OBS App Store.

In the Browser source settings you have to paste unique widget URL you got from Pulsoid site.

Use widget Width and Height parameters if needed. For the Red Frame overlay widget, you need to set 1920 width x 1080 height.

Click ‘Done’ to apply.

You can add a few different Browser Sources and add more than one Pulsoid widget. It’s great to complete your heart rate monitoring corner with a custom images widget, animated text widget, or real-time heart rate graph.

4. XSplit

images are from https://www.xsplit.com/

Click ‘Add source’ and choose ‘Webpage..’ from the list.

Add a unique widget link from Pulsoid site into Webpage URL input. Click ‘Ok’

Use Custom CSS in XSplit to style your widget in addition to settings the website provides you. For example, you can add a shadow or border to your BPM widget. Change Display Resolution for Overlay type of widget.

Add a few widgets together to create a unique design that matches your stream theme, game, special events you run. Get an URL for each widget you want to add, use a few different Browser Sources in your broadcasting software and combine them together.

WebsiteDiscordTwitterYouTubeEmail: support@pulsoid.net •

--

--

Heart Rate Widget — Pulsoid

Heart rate streaming widget for Twitch, Mixer, YouTube. Follow us and Be closer to your viewers! Contact us: support@pulsoid.net Website: https://pulsoid.net/