top of page

How to add Browser Source in OBS, Streamlabs Desktop OBS, TikTok Studi, XSplit

Updated: Aug 30

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. TikTok Live Studio

TikTok Live Studio is a live streaming tool designed specifically for TikTok creators, allowing them to broadcast live video content to their followers and a broader audience. With TikTok's interactive features, creators can connect with viewers in real-time through comments and virtual gifts, which can be exchanged for virtual currency. You can easily add your heart rate widget to your stream with TikTok Live Studio


  1. Open your TikTok Studio

  2. Open the Scene Editor

  3. Click '+Add Source'

  4. Choose a 'Link' option to add a source similar to Browser Source


5. Enter your widget URL into the 'Link' field. You can also select a custom resolution to adjust the widget size, and then click 'Preview' to see how it will appear on your stream.

Tip: you can find your heart rate widget URL when you click 'Configure' in your widgets list

6. Done! Your widget has been added to both horizontal and vertical scenes. You can now resize and reposition it within the scene to better suit your needs.




 

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 •

20,590 views
Recent Posts
bottom of page