The Cajole Streaming Widget lets campaign creators display a live progress overlay on their stream. It shows the campaign title, current funding amount, goal, percentage progress, and a live feed of recent backers. When someone makes a new contribution, a coin rain animation plays and the new backer appears on screen in real time.
The widget is designed as a browser source overlay with a transparent background, so only the rounded widget card appears on your stream, floating over your content.
What You Need
An active campaign on Cajole.com
OBS Studio, Streamlabs, or any streaming software that supports browser sources
A computer connected to the internet
Finding the Widget URL
Step 1: Go to your active campaign page on cajole.com.
Step 2: In the right sidebar, below the Proceeds section, click the "Grab A Streaming Widget" button.
Step 3: A modal will appear showing a preview of the widget and your unique widget URL. Click the copy button to copy the URL to your clipboard.
Your widget URL follows this format: https://cajole.com/widget/your-campaign-slug
Setting Up in OBS Studio
Step 1: Open OBS Studio and select the scene you want to add the widget to.
Step 2: In the Sources panel, click the "+" button and select "Browser" from the list.
Step 3: Give it a name (e.g., "Cajole Widget") and click OK.
Step 4: In the properties window, paste your widget URL into the URL field.
Step 5: Set the width and height. We recommend:
Width: 310
Height: 350
Step 6: Leave the Custom CSS field at its default setting. The widget handles transparency automatically, so no custom CSS is needed.
Step 7: Click OK. The widget will appear in your scene. Drag it to position it wherever you want on your stream layout.
Setting Up in Streamlabs
Step 1: Open Streamlabs and go to your scene editor.
Step 2: Click the "+" button in Sources and select "Browser Source."
Step 3: Paste your widget URL, set the width to 310 and height to 350, then click Done.
Step 4: Drag the widget to your preferred position on screen.
What the Widget Shows
The widget displays a compact card with the following information:
Cajole logo and a green "LIVE" indicator
The full campaign title
Current amount raised and the funding goal
A percentage and progress bar showing how close the campaign is to its goal
A link to the campaign page (cajole.com/your-campaign-slug)
Real-Time Updates
The widget connects to Cajole in real time using server-sent events (SSE). When someone contributes to your campaign while you are streaming, the following happens automatically:
The dollar amount and progress bar update instantly to reflect the new total.
A "NEW BACKER!" section appears at the bottom of the widget showing the contributor's name and the amount they gave. Up to three recent backers are shown at a time.
A coin rain animation plays across the screen to celebrate the contribution.
The new backer section stays visible for 60 seconds after the most recent contribution, then fades away.
Tips for Best Results
Position the widget in a corner of your stream where it won't overlap with important content like your webcam or game UI. The top-left or bottom-left corners are popular choices.
The widget has a dark, semi-rounded card design that works well over most stream backgrounds. No custom CSS or special configuration is required.
If the widget isn't updating, try right-clicking the browser source in OBS and selecting "Refresh" to reload it.
You can resize the browser source in OBS by dragging its handles, but keeping it close to 310x350 pixels will give the best appearance.
Limitations
The widget is a visual overlay only. Viewers watching your stream cannot click on the widget or interact with it directly. To let viewers contribute, share your campaign link verbally, in your stream title, or in a chat command.
Interactive widget functionality via Twitch Extensions is planned for a future update.
Troubleshooting
Widget shows "Campaign not found": Double-check that the campaign slug in your widget URL matches your campaign exactly. Make sure the campaign is active and not in draft or closed status.
Widget has a black or colored background: Make sure the Custom CSS field in your browser source properties is set to its default value. If you previously changed it, reset it to: body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
Widget is not updating in real time: Right-click the browser source in OBS and select "Refresh." If the issue persists, remove the browser source and re-add it with the same URL.
Widget appears too small or too large: Adjust the width and height in the browser source properties. The recommended size is 310x350 pixels.
Need More Help?
If you run into any issues or have questions about the streaming widget, reach out to us at help.cajole.com or contact [email protected].