Konfiguration
Settings definieren, das Dashboard baut das Formular
Beim Initialisieren definierst du die Settings deines Widgets. Aus dieser Definition generiert das Dashboard automatisch ein Formular, Streamer können dein Widget dann anpassen, ohne Code anzufassen.
const overlay = new Pixl({
token: '__TOKEN__',
settings: {
accentColor: { type: 'color', label: 'Akzentfarbe', default: '#7c6dfa' },
fontSize: { type: 'range', label: 'Schriftgröße', min: 12, max: 48, default: 24 },
visible: { type: 'toggle', label: 'Sichtbar', default: true },
position: { type: 'select', label: 'Position', options: ['oben links', 'oben rechts'], default: 'oben links' },
sound: { type: 'file', label: 'Alert-Sound', accept: 'audio/*' },
},
});Verfügbare Setting-Typen
| Typ | Formular-Element | Wert |
|---|---|---|
color | Color-Picker | string (Hex) |
range | Slider mit min/max | number |
toggle | Schalter | boolean |
select | Dropdown mit options | string |
file | Datei-Upload mit accept | string (URL) |
Auf Werte zugreifen
Aktuelle Werte liegen unter overlay.settings, auf Änderungen reagierst du mit onSettingChange:
// Aktueller Wert
document.body.style.setProperty('--accent', overlay.settings.accentColor);
// Live-Updates aus dem Dashboard
overlay.onSettingChange('accentColor', (value) => {
document.body.style.setProperty('--accent', value);
});Änderungen im Dashboard fließen live ins Overlay, ohne Reload der Browser Source.
Der Monaco-Editor liest deine Settings-Definition und schlägt dir die Keys inklusive passender Typen per Autocomplete vor.
© 2026 pixl