top of page

How to add Browser Source in OBS, Streamlabs Desktop OBS, TikTok Studio, XSplit, Meld Studio, Prism Live Studio

  • Writer: Pulsoid
    Pulsoid
  • Feb 15, 2021
  • 3 min read

Updated: 2 hours ago

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.





ree

All Pulsoid widgets are real-time and have a unique URL and can be used with Browser Source in Broadcasting software like OBS, XSplit, Streamlabs Desktop, StreamElements, etc. To add any Pulsoid widget, you need to copy a URL from the Configuration page:


Copy widget URL
Copy widget URL


To make the widget live on your stream, you will need to paste the URL into the Browser Source settings. Below, we will show how to use it in popular broadcasting software.


Note: Widgets only show data if your heart rate monitor is connected in the Pulsoid mobile app (Android/iOS) and visible in your Dashboard.

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.



ree
  1. In Sources, click + (or right-click and choose Add Source).

  2. Select Browser.




ree
  1. Give a name to the new source and click OK



ree
  1. In the Browser Source settings, paste the widget URL from Pulsoid.

  2. Adjust Width and Height if needed. For example, set it to 1920x1080 if you’re using the Red Frame overlay.

  3. Use Custom CSS to style your widget (e.g., add a shadow, border, or change the font).

  4. Click OK, then resize and move your widget in the Scene.


Tip: Combine multiple Pulsoid widgets to create a more immersive experience. For example, add the sound widget so viewers not only see your heart rate but also hear it.


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


ree
  1. Open TikTok Studio and go to the Scene Editor.

  2. Click + Add Source → select Link.

  3. Paste your Pulsoid widget URL into the Link field.



ree


  1. Choose a custom resolution, then click Preview to check how it looks.

  2. Done! The widget will appear in both horizontal and vertical scenes. Resize and reposition it to fit your layout.




Tip: You can find your widget URL by clicking Configure in your Pulsoid widgets list.

  1. Meld Studio

ree
  1. Open Meld Studio.

  2. In the Layers panel, click + 

  3. Select Browser.

  4. In the Inspector panel, paste your Pulsoid widget URL in the URL field.


Tip: Paste the URL directly onto the canvas—Meld will auto-create a Browser layer for you.



4. Prism Live Studio


ree


  1. Open PRISM Live Studio.

  2. In the Sources panel, click the +.

ree




  1. Select Browser → click OK.

ree


  1. Paste your Pulsoid widget URL in the settings.

  2. Adjust Width and Height, and use Custom CSS to style your widget if needed

  3. Click OK to finish.


5. Streamlabs OBS


ree
  1. In Sources, click +.






Source.

ree
  1. Select Browser Source → click Add 






ree
  1. Paste your Pulsoid widget URL.

  2. Adjust Width and Height.

  3. Click Done.





Tip: You can also use limited Pulsoid functionality through the Pulsoid App in the Streamlabs App Store.


6. XSplit

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


ree
  1. Click Add Source → choose Webpage.



ree
  1. Paste your Pulsoid widget URL into the Webpage field.

  2. Click OK.

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


ree

Combine multiple widgets to design a setup that matches your stream’s theme, the game you’re playing, or any special events. For example, you could enhance your heart rate corner with the Custom pictures widget, the Animated text widget, or the Real-time heart rate graph. To do this:

  • Copy the URL for each widget

  • Add them as separate Browser Sources in your broadcasting software

  • Layer them together.


•Add heart rate on stream• Discord • Twitter • YouTube • Email: support@pulsoid.net •

 
 
Recent Posts
bottom of page