​
Emote Providers

Platform-native emotes are loaded automatically when the overlay connects. You can load additional emote sets for third-party providers.

​
Auto-Loaded Emotes

When your overlay authenticates, native emotes for the connected platform are loaded into the emote registry. These are immediately available via SBCanvas.emotes.resolve().

​
Loading Additional Emotes

Use loadSet to add emotes from any source. It accepts an array of emote objects: 
SBCanvas.emotes.loadSet([
  { code: 'PogChamp', url: 'https://cdn.7tv.app/emote/abc/1x.webp', provider: '7tv' },
  { code: 'KEKW', url: 'https://cdn.7tv.app/emote/def/1x.webp', provider: '7tv' },
  { code: 'catJAM', url: 'https://cdn.bttv.net/emote/ghi/1x', provider: 'bttv' }
]);
Each emote object requires:
FieldTypeDescription
codestringThe text code that triggers this emote
urlstringImage URL for the emote
providerstringSource identifier (e.g. 'kick', 'rumble', '7tv', 'bttv')

​
Provider Values

ProviderDescription
kickNative Kick channel/global emotes
rumbleNative Rumble emotes
blazeNative Blaze emotes
7tv7TV global and channel emotes
bttvBetterTTV emotes

​
Resolution Priority

When multiple emotes share the same code, the last one loaded wins. Load order typically:
  1. Platform-native emotes (loaded on connect)
  2. Custom sets loaded via loadSet
If you call loadSet with a code that already exists, it overwrites the previous entry.

​
Example: Loading 7TV Emotes from an API

SBCanvas.ready(async () => {
  const res = await SBCanvas.http('https://7tv.io/v3/emote-sets/global', { method: 'GET' });
  if (res.ok) {
    const emotes = res.body.emotes.map(e => ({
      code: e.name,
      url: `https://cdn.7tv.app/emote/${e.id}/1x.webp`,
      provider: '7tv'
    }));
    SBCanvas.emotes.loadSet(emotes);
  }
});

​
Checking Loaded Emotes

const all = SBCanvas.emotes.getAll();
// { 'PogChamp': { code: 'PogChamp', url: '...', provider: '7tv' }, ... }

const count = Object.keys(all).length;
console.log(`${count} emotes loaded`);