​
Custom Fields

Custom fields let streamers adjust your widget from the dashboard without editing code. You define the field schema, and the dashboard renders the UI automatically.

​
Defining Fields

Register your fields with panel.register(). The dashboard builds the settings UI from this schema: 
SBCanvas.panel.register({
  fields: [
    { key: 'text_color', type: 'color', label: 'Text Color', default: '#ffffff' },
    { key: 'alert_duration', type: 'number', label: 'Alert Duration (ms)', default: 5000 },
    { key: 'show_avatar', type: 'boolean', label: 'Show Avatar', default: true },
    { key: 'font_size', type: 'range', label: 'Font Size', min: 12, max: 48, default: 24 },
    { key: 'position', type: 'select', label: 'Position', options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'], default: 'top-right' },
    { key: 'custom_css', type: 'textarea', label: 'Custom CSS', default: '' }
  ]
});
Each field object:
PropertyRequiredDescription
keyYesUnique identifier, used in getFieldData()
typeYesOne of the supported field types below
labelYesDisplay label in the dashboard
defaultYesInitial value when no user setting exists
min / maxNoFor number and range types
optionsNoFor select type — array of allowed values

​
Accessing Field Values

SBCanvas.ready(() => {
  const fields = SBCanvas.getFieldData();
  console.log(fields.alert_duration);  // 5000
  console.log(fields.text_color);      // "#ffffff"
  console.log(fields.show_avatar);     // true
});

​
Updating Fields at Runtime

Use setField to live-update a field value. By default, the widget re-renders: 
SBCanvas.setField('text_color', '#ff0000');

// Pass false to skip re-render
SBCanvas.setField('counter', 42, false);

​
Listening for Changes

SBCanvas.on('widget:field_change', ({ key, value, fieldData }) => {
  if (key === 'bg_color') {
    document.body.style.backgroundColor = value;
  }
});

​
Supported Field Types

TypeDashboard UIValue Type
textSingle-line inputstring
numberNumber input with min/maxnumber
colorColor pickerstring (hex)
booleanToggle switchboolean
selectDropdownstring
rangeSlidernumber
textareaMulti-line inputstring
urlURL inputstring
jsonJSON editorobject

​
Example: Configurable Alert Widget

SBCanvas.ready(() => {
  const fields = SBCanvas.getFieldData();

  SBCanvas.activities.on('follow', (activity) => {
    const el = document.getElementById('alert');
    el.style.color = fields.text_color || '#ffffff';
    el.style.fontSize = (fields.font_size || 24) + 'px';
    el.textContent = `${activity.username} followed!`;
    el.classList.add('show');

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

​
Getting Fields for a Specific Widget

Pass a widget type or ID to getFieldData: 
const chatFields = SBCanvas.getFieldData('chat-overlay');
const specificWidget = SBCanvas.getFieldData('widget_abc123');

​
API Reference

MethodReturnsDescription
getFieldData(typeOrId?)objectGet all field values for a widget
setField(key, value, reload?)voidUpdate a field (re-renders by default)