​
Quick Start

​
Prerequisites

  • A StreamBot account with an active overlay
  • OBS or any streaming software with browser source support

​
1. Create an Overlay

Go to your StreamBot Dashboard and create a new overlay from the SBCanvas section.

​
2. Add the Browser Source

Copy the overlay URL and add it as a Browser Source in OBS:
  • Width: 1920
  • Height: 1080
  • FPS: 60

​
3. Write Your Widget

The global SBCanvas object is available immediately: 
SBCanvas.ready(() => {
  SBCanvas.activities.on('follow', (activity) => {
    const el = document.getElementById('alert');
    el.textContent = `${activity.username} followed!`;
    el.classList.add('show');

    SBCanvas.setTimeout(() => {
      el.classList.remove('show');
    }, 5000);
  });
});

​
4. Test It

Append ?preview=studio to your overlay URL, then open the browser console: 
SBCanvas.preview.injectTestEvent('activity:follow', {
  username: 'TestUser',
  provider: 'kick'
});
The injectTestEvent type follows the event bus format: activity:{type}. It normalizes the data and fires both the activity listener and the internal event bus.

​
5. Go Live

Remove the preview parameter. Events flow from your connected platform automatically.

​
Event Naming

There are two ways to listen for activities: 
// Recommended: activities API (cleaner, typed)
SBCanvas.activities.on('follow', (activity) => { });

// Low-level: event bus (gives you access to all event types)
SBCanvas.on('activity:follow', (activity) => { });
activities.on('follow') is a convenience wrapper around on('activity:follow'). Both fire the same data.

​
Next Steps

Build a Widget

Full step-by-step tutorial

SDK Reference

Complete API surface