How to Add Donations to OBS in 10 Minutes

What to prepare before you start

Before you add donations to OBS, prepare an active donation page, the widget URL, one test scene, and a few minutes to verify the flow before going live.

Do not start with the final layout. First prove that the Browser Source loads, amount and viewer name are readable, and the test donation arrives without manual refresh.

The safest starting point is one main scene, one widget, and one test. Copy the source to other scenes only after that test passes.

Step 1: copy the donation widget URL

In the widget panel, choose the donation widget and copy the browser URL. Treat it as a private OBS source address, not as a public viewer link.

Check whether the widget shows viewer name, amount, and message in a format that fits your scene. If the preview is already cramped, OBS will make it harder.

Before opening OBS, run a panel preview or event test. If the panel does not produce a clean event, OBS will not fix the issue.

Step 2: embed the widget as a Browser Source

In OBS, add `Sources` -> `+` -> `Browser`, name it `Donations - OBS`, and paste the widget URL. Start with 600 width and 220 height.

Enable refresh when the scene becomes active, but avoid aggressive source restarts on every transition until you know the widget needs it.

Set FPS to 30. That is usually enough for a readable widget and reduces load risk in scenes with several animated sources.

Step 3: check signal and delay

Send a test donation, measure time to display, and repeat the test after switching scenes. Three passes without manual refresh is the minimum standard before going live.

If the widget takes more than 10 seconds, check scene load, animated source count, and whether you are testing an old URL.

Record a short test clip. The recording shows faster than the preview whether the widget covers your face, gameplay, or important interface text.

Style and readability on scene

The donation widget should have contrast against the background and a stable position. The lower third usually works better than the middle of gameplay or the camera area.

Do not shrink text just to fit a longer message. Increase source height or use a shorter message format instead.

After the first passing test, save the scene preset. Change one thing at a time so you know whether position, size, or style improved the result.

Common issues

When the widget does not appear, first check whether the URL was clipped during copy. Then refresh the Browser Source and run another test.

When text is too small or clipped, raise height to 260 and check source scale. When donations arrive without an alert, verify the alert module separately.

After the widget works, add a recent events widget, donation goal, or sound alert. The widget should show support, but the full setup should trigger viewer and streamer reaction.

Questions fréquentes