1
Einbindung mit Standardfarben
Key: DEMO-KEY-001 (Kostenlos) — Attribution sichtbar
kanzlei-mustermann.de/honorare.html
✓ Key gültig
<!-- Schritt 1: Container platzieren -->
<div id="stbvv-rechner"></div>
<!-- Schritt 2: Widget einbinden -->
<script src="stbvv-widget.js?key=DEMO-KEY-001"></script>
2
White-Label mit Custom Theme
Key: DEMO-KEY-PRO (Professional) — Attribution ausgeblendet, eigene Farben
steuersoft-pro.de/rechner.html
White-Label
<script>
window.StbVVConfig = {
key: 'DEMO-KEY-PRO',
container: '#rechner-pro',
hideAttribution: true,
theme: {
primary: '#1a5276',
secondary: '#e67e22',
radius: '4px',
},
onCalculate: function(result) {
console.log('Brutto/Monat:', result.bruttoMonat);
}
};
</script>
<div id="rechner-pro"></div>
<script src="stbvv-widget.js"></script>
3
Ungültiger API-Key
So sieht das Widget aus, wenn kein gültiger Key vorhanden ist.
irgendeine-seite.de
✗ Key ungültig
<div id="stbvv-error-demo"></div>
<script src="stbvv-widget.js?key=INVALID-KEY-XYZ"></script>
4
Konfigurations-Referenz
Alle Parameter von window.StbVVConfig
| Parameter | Standard | Beschreibung |
|---|---|---|
| key | '...' | API-Key (alternativ als URL-Parameter ?key=) |
| container | '#stbvv-rechner' | CSS-Selektor des Ziel-Elements |
| validateUrl | 'order.php' | Pfad zur order.php für Key-Validierung. Bei externer Domain mit CORS-Header. |
| hideAttribution | false | Quellhinweis ausblenden — wird automatisch aus dem Plan gesetzt (Professional/Enterprise) |
| theme.primary | '#11593c' | Hauptfarbe (Header, Buttons, aktiver Tab) |
| theme.secondary | '#c9a84c' | Akzentfarbe (Ergebnis-Highlight) |
| theme.bg | '#ffffff' | Hintergrundfarbe des Widgets |
| theme.surface | '#f7f6f1' | Oberflächen-Farbe (Tabellenzeilen, Pakete) |
| theme.border | '#d5cfc0' | Rahmenfarbe |
| theme.radius | '10px' | Abrundungsradius aller Elemente |
| theme.fontFamily | 'system-ui, ...' | Schriftart (erbt standardmäßig vom Parent) |
| onCalculate(result) | null | Callback nach jeder Berechnung. result: { netto, mwst, brutto, nettoMonat, bruttoMonat } |
5
API-Key testen
Gültige Demo-Keys: TEST, DEMO-KEY-001, DEMO-KEY-PRO, DEMO-KEY-ENT