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

Updated: Apr 13

Pulsoid creates widgets for streamers and the most popular one is for streaming real-time heart rate. Heartbeat info is a great thing to share with your viewers and a new way to add a new way to interact with your viewers.

All Pulsoid widgets are real-time and 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


To make the widget live on your stream you will need to paste the 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.


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 the 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 •

1,187 views
Recent Posts