TipTap-OBS Integration
TipTap aims to create efficient integration between TipTap and OBS, making your streaming experience more enjoyable.
TipTap-OBS Overlay
Here are the steps to integrate the TipTap overlay with your streaming software. In this example, we use OBS as the streaming software.
- Drag and drop the TipTap overlay link button onto your OBS screen. Done.
If your OBS is running as an administrator, you won't be able to use this drag-and-drop method.
Alternatively, you can use the following method:
- Copy the URL from your overlay, located at the top right of the "Copy Link" button on the overlay page.
- In OBS, go to the Sources section, press the ‘+’ button, and select ‘Browser’. A window will appear where you can name your browser source. Name it according to your needs, for example, ‘TipTap Overlay’.
- Paste the overlay URL that you copied earlier into the URL field. Then press ‘Ok’.
Explore more widgets here.
Do not share the overlay URL publicly. Immediately reset your private key on the 'danger' page if the URL is exposed. Each overlay has a unique URL, so you will need to copy-paste each overlay you want to use.
Overlay Control in OBS
Control the overlay directly from OBS. This makes it easier for you to experiment and test your widgets.
- Copy your overlay control URL by clicking on a widget that has controls, such as the Alert widget.
- In the widget control tab, press the open new tab button at the top right. Copy the control URL.
- In OBS, go to the menu tab at the top left of the OBS screen and select 'Docks'.
- Select 'Custom Browser Docks'. In the Dock Name field, give it a name like 'Overlay Control'. In the URL field, paste the URL you copied earlier.
- If everything is filled in, press 'Apply'. Your overlay control dock will appear.
- In the gear button, you can choose which overlay controls you want to display. Show all, or just one? You can configure it as you like.
Do not share the overlay control URL publicly. Immediately reset your private key on the 'danger' page if the URL is exposed.
Tips Page in OBS
You don't have to open a web browser to monitor the Tips page anymore; you can do it directly in OBS. Here's how:
- In the menu tab at the top left of the OBS screen, select 'Docks'.
- Select 'Custom Browser Docks'. In the Dock Name field, give it a name like 'TipTap Tips'. In the URL field, enter the tips page URL, which is 'https://tiptap.gg/dashboard/tips (opens in a new tab)'.
- If everything is filled in, press 'Apply'. Your TipTap Tips dock will appear, please log in to your account and now you can see all your settings in one OBS source.
Conclusion
Simply put, this integration only uses the method of creating an OBS browser source and creating OBS docks. You can experiment as much as you like to arrange the best layout to monitor and access buttons that were previously outside of OBS.
Common Issues
Why can't I hear alert sounds or other widget sounds from OBS?
This issue usually occurs because the output monitoring device and the output on the browser source are different.
To fix it, you can go to the Audio Mixer dock in OBS. Right-click and select Advanced Audio Properties or click the gear icon on the Audio Mixer. Find your alert widget source and change its Audio Monitoring to Monitor and Output. Now you can hear the audio from your widget.