Widgets einbetten

Kostenlose Tools und Spiele für deine Website – im Stil deiner Seite

Du kannst unsere Online-Tools und Spiele mit einem kleinen iframe kostenlos in deine eigene Website einbetten. Die Einbindung ist ohne Anmeldung möglich – als Gegenleistung bleibt der kleine boza.info-Badge sichtbar. Tools lassen sich vollständig in Farben und Stil anpassen; bei Spielen bleibt das Spielfeld selbst im Original, nur das Drumherum (Karte, Scoreboard, Buttons) ist anpassbar.

Schnellstart

Kopiere das iframe-Snippet und füge es in deine Website ein. Alternativ: Öffne eine Tool- oder Spiel-Seite und wähle im Share-Menü den Punkt „Einbetten“ – der fertige Code wird automatisch kopiert.

Live-Styling-Editor

Wähle ein Widget, passe Farben und Optionen an – die Vorschau links aktualisiert sich live. Unter dem Editor steht der fertige Embed-Code, den du direkt übernehmen kannst.

Widget

Farben

Tipp: Klicke im Vorschaubild auf ein Element, um dessen Farben zu bearbeiten.

Hintergrund

Karte

Basis-Theme

Akzent

Button-Text

Buttons

Button-Text (hell)

Rahmen

Erfolg

Gefahr

Text

Text (gedimmt)

Badge-Hintergrund

Badge-Text

Optionen

Hell-Modus Element auswählen Kompakt Ohne Titelzeile Transparenter Hintergrund

Eckenradius (px)

Breite

Sprache

Embed-Code

Parameter-Referenz

Alle Parameter werden direkt an die Widget-URL angehängt:

Parameter	Werte	Wirkung
`theme`	`dark` / `light`	Basis-Theme (Standard: dunkel)
`bg`	Hex oder `transparent`	Widget-Hintergrund
`card`	Hex	Karten-/Scoreboard-Hintergrund
`accent`	Hex	Akzentfarbe für Buttons und aktive Elemente
`accentText`	Hex	Textfarbe auf Akzent-Buttons
`btn`	Hex	Hintergrund der Standard-Buttons
`btnText`	Hex	Textfarbe der Standard-Buttons
`display`	Hex	Anzeige-/Eingabe-Hintergrund
`border`	Hex	Rahmenfarbe von Karten und Feldern
`success`	Hex	Erfolgsfarbe (z. B. Equals, kopiert)
`danger`	Hex	Gefahrenfarbe (z. B. Clear/Reset)
`text`	Hex	Primär-Textfarbe
`muted`	Hex	Sekundär-Textfarbe
`radius`	Zahl (px)	Eckenradius der Karte
`maxWidth`	`full` oder px-Zahl	Widget-Breite (full = füllt die Seite)
`compact`	`true`	Komprimiert die Titelzeile
`hideHeader`	`true` / `false`	Titelzeile aus-/einblenden
`lang`	`de/en/es/fr/hi/zh`	Sprache des Widgets
`badgeBg`	Hex	Hintergrund des boza.info-Badges
`badgeFg`	Hex	Textfarbe des boza.info-Badges

Live-Anpassung per JavaScript

Du kannst das Widget zur Laufzeit anpassen, ohne es neu zu laden – über eine postMessage-Nachricht an das iframe:

var frame = document.getElementById('myWidget');

frame.contentWindow.postMessage({
    source: 'boza-widget-config',
    config: { accent: '#22c55e', card: '#0f172a' }
}, '*');

Nicht alle Parameter lassen sich live ändern: lang und theme erfordern einen Neuaufruf der Seite.

Badge-Hinweis

Die Nutzung der Widgets ist kostenlos, solange der „boza.info“-Badge sichtbar bleibt. Du darfst die Widgets nicht umbenennen oder als eigene Produkte ausgeben.

Häufige Fragen

Wie passt du ein Widget an?

Farben werden über Hex-Werte gesetzt: accent färbt Buttons und aktive Elemente, card den Kartenhintergrund, text und muted die Textfarben. Mit bg=transparent fügt sich das Widget nahtlos in jede Seite ein. Eckenradius, Kompaktheit, Titelzeile und Sprache lassen sich ebenfalls per Parameter steuern.

Warum kann ich das Spielfeld eines Spiels nicht einfärben?

Bei Spielen bleibt das aktive Spielfeld (Canvas, Spielbrett, Zellen) bewusst im Original. Anpassbar ist alles Drumherum: Karte, Titelzeile, Scoreboard, Highscore-Panel und Buttons.

Funktioniert das auch auf WordPress, Shopify oder in Baukästen?

Ja – überall dort, wo du einen HTML-Block oder ein iframe einfügen kannst (z. B. „Benutzerdefiniertes HTML“, „Embed“-Block oder einen Code-Widget).

Lädt das meine Seite stark?

Nein. Das Widget ist leichtgewichtig und wird nur bei Bedarf (lazy loading) geladen. Empfehlung: loading="lazy" verwenden.

Kann ich mehrere Widgets einbauen?

Ja, du kannst beliebig viele Widgets auf einer Seite einbinden.