top of page

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

Updated: Apr 5

Pulsoid specializes in crafting heart rate widgets tailored for streamers. Sharing your heartbeat information with viewers not only offers a unique engagement opportunity but also provides a fresh and captivating way to interact with your audience. We've also curated a list of heart rate monitors for streaming to assist you in finding a compatible device. With Pulsoid, you can display your heartbeat on stream, not just with dedicated heart rate trackers for gaming, but also with well-known devices like Apple Watch and Wear OS watches(such as Fossil watches, Samsung Galaxy Watch 4, 5, and 6, Google Pixel Watch, Mobvoi TicWatch, and many more) and some Fitbit devices.

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 Desktop, Streamelements, 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

OBS (Open Broadcaster Software) is a key tool for streamers, offering versatile live streaming and recording capabilities, as explored in the "Mastering OBS for Streaming: Tips and Tricks" article.



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


Twitch Studio is a user-friendly streaming application designed by Twitch, tailored specifically for beginners to set up and start streaming with ease. It offers a straightforward setup process, making it an ideal choice for those new to streaming.

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, and 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.




Add heart rate on streamDiscordTwitterYouTubeEmail: support@pulsoid.net •

15,379 views

Comments


Recent Posts
bottom of page