Spin And Wheel

Glücksrad auf deiner Website einbetten

Bau in weniger als einer Minute ein funktionierendes Glücksrad in deine Website, deinen Blog oder deine Klassenseite ein: Rad wählen, Einträge eintippen und zwei Zeilen HTML einfügen. Das Widget ist kostenlos, braucht kein Konto und zeigt deinen Besuchern weder Werbung noch Tracking-Cookies.

Embed-Code erstellen

Leer lassen, um die eigene Liste des Rads zu verwenden. Die Einträge stehen im Code selbst, nicht auf einem Server.

Größe

Für Notion, Google Sites „Nach URL“ und andere Editoren, die statt HTML einen Link verlangen.

Live-Vorschau

Glücksrad einbetten in 3 Schritten

  1. Rad wählen und Einträge hinzufügen. Wähle im Generator auf dieser Seite das Glücksrad mit Namen, ein Ja-oder-Nein-Rad, ein Zahlen-, Buchstaben-, Twister- oder Essensrad und tippe einen Eintrag pro Zeile ein – oder lass die Liste leer, um die Einträge des Rads zu behalten.
  2. Größe wählen und Code kopieren. Klein ist 400 px hoch, Mittel 520 px und Groß 640 px, bei 100 % Breite bis zur selben Grenze. Der Code ist ein normales HTML-<iframe> plus eine Linkzeile.
  3. Code in einen HTML-Block einfügen und veröffentlichen. Der Block heißt Individuelles HTML in WordPress, Embed HTML in Wix, Code in Squarespace, Benutzerdefiniertes Liquid in Shopify und Code Embed in Webflow. Editoren, die nur einen Link annehmen (Notion, Google Sites „Nach URL“), bekommen stattdessen den Embed-Link.

Das ist der vollständige Code für ein Glücksrad mit drei Namen, Mia, Ben und Emma, in der Größe Mittel:

<iframe src="https://spinandwheel.com/de/?mode=embed&amp;entries=Mia,Ben,Emma" title="Glücksrad" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/de/">Glücksrad von Spin and Wheel</a></p>

Die Einträge stehen in der src-Adresse (entries= oder bei langen Listen komprimiert als w=), und mode=embed zeigt nur das Rad. Die zweite Zeile ist ein normaler Link zur Seite des Rads.

Wo du den Code einfügst

Der Code ist ein normales HTML-<iframe> plus ein Link und funktioniert daher auf jeder Website, die HTML erlaubt. So geht es in den gängigsten Editoren.

WordPress

Füge im Block-Editor einen Block Individuelles HTML hinzu (tippe /html), füge den Code ein und klicke auf Vorschau. Selbst gehostetes WordPress erlaubt iframes standardmäßig; auf WordPress.com ist dafür eventuell ein kostenpflichtiger Tarif nötig.

Wix

Klicke im Wix Editor auf Add Elements (+) → Embed Code → Embed HTML, wähle Code, füge den Code ein und klicke auf Update; zieh die Box dann auf etwa 520 px Höhe. Wix zeigt eigenes HTML in einem eigenen Rahmen an: Das Rad funktioniert, aber der Link darunter bleibt in diesem Rahmen.

Squarespace

Bearbeite die Seite, klicke auf Add Block → Code, lass den Block auf HTML, füge den Code ein und speichere die Seite. Das Rad erscheint auf der veröffentlichten Seite; im Editor zeigt ein Code-Block stattdessen eventuell einen Platzhalter.

Shopify

Gehe zu Onlineshop → Themes → Anpassen, wähle Abschnitt hinzufügen → Benutzerdefiniertes Liquid, füge den Code in das Feld für Liquid-Code ein und speichere. Kostenlose Themes wie Dawn enthalten den Abschnitt Benutzerdefiniertes Liquid.

Webflow

Zieh ein Code Embed-Element aus dem Add-Panel auf die Seite, füge den Code ein, klicke auf Save & Close und veröffentliche die Website. Eigene Code-Embeds erfordern eventuell einen kostenpflichtigen Webflow-Site-Plan.

Blogger

Öffne den Post, wechsle über das Stift-Menü von der Schreibansicht zur HTML-Ansicht, füge den Code dort ein, wo das Rad erscheinen soll, und veröffentliche. Für ein Rad in der Seitenleiste nutze Layout → Gadget hinzufügen → HTML/JavaScript.

Google Sites

Wähle Einfügen → Einbetten. Füge im Tab für den Einbettungscode den vollständigen Code ein oder unter „Nach URL“ den Embed-Link. Google Sites zeigt jede Einbettung in einem eigenen Rahmen an: Das Rad funktioniert, aber der Link darunter bleibt in diesem Rahmen.

Notion

Tippe /embed, füge den Embed-Link ein (nicht den HTML-Code) und bestätige. Zieh die Ecke des Blocks auf etwa 520 px Höhe, damit das ganze Rad sichtbar ist.

Canvas, Moodle und andere Lernplattformen

Öffne die Seite im HTML-Editor (Canvas: die Schaltfläche </>; Moodle: die HTML-Schaltfläche des Atto- oder TinyMCE-Editors) und füge den Code ein. Verschwindet das Rad nach dem Speichern, hat der Administrator iframes von anderen Websites gesperrt; bitte ihn, spinandwheel.com zuzulassen.

Jede HTML-Seite

Füge den Code in den <body> der Seite ein. Das iframe ist bis zu seiner Größengrenze 100 % breit und lädt mit loading="lazy", bremst also den oberen Teil der Seite nicht aus.

So funktioniert das eingebettete Rad

Das Widget ist die echte Spin and Wheel-Seite in einem schlanken Embed-Modus (?mode=embed): Es werden nur das Rad und ein kleiner Link „In Spin and Wheel öffnen“ angezeigt. Besucher drehen mit dem Button in der Mitte, sehen den Gewinner in einer Karte und können erneut drehen oder den Gewinner von der Liste entfernen. Das Rad passt sich der Box an, die es bekommt – Breite und Höhe –, vom 320 px breiten Handy bis zur Desktop-Seitenleiste.

Deine Einträge reisen in der Adresse des iframes mit: eine kurze Liste als entries=, eine längere komprimiert (deflate-raw, base64url) als w=. Nichts wird hochgeladen oder auf einem Server gespeichert, und nichts wird in den Browserspeicher deiner Besucher geschrieben – jeder Besucher startet also mit deiner Liste. Farbthema, Drehdauer und Sound-Einstellungen aus dem Anpassen-Panel werden auf dieselbe Weise übertragen (cfg=).

Jede Drehung nutzt crypto.getRandomValues aus der Web Crypto API, genau wie auf spinandwheel.com – jeder von N Einträgen hat also eine Chance von 1/N. Das eingebettete Rad zeigt keine Werbung, setzt keine Tracking-Cookies und installiert keinen Service Worker; es zählt nur, wie oft es geladen und gedreht wird, anonym und ohne Cookies.

Die Zeile unter dem Rad ist ein normaler Link zur Seite des Rads auf spinandwheel.com. Er ist optional – du kannst ihn ändern oder entfernen –, aber wenn du ihn behältst, finden andere Lehrkräfte und Creator das Tool leichter. Verbesserungen am Rad kommen automatisch in deiner Einbettung an; um die Einträge zu ändern, erstelle neuen Code und ersetze den alten.

FAQ

FAQ zum Glücksrad-Widget

Kann ich ein Glücksrad mit Namen kostenlos auf meiner Website einbetten?
Ja. Das Glücksrad mit Namen und alle anderen Räder von Spin and Wheel lassen sich mit zwei Zeilen HTML kostenlos auf privaten, schulischen und kommerziellen Websites einbetten. Kein Konto, kein API-Schlüssel und keine Nutzungsgrenze – Code kopieren und einfügen.

Zeigt das Widget Werbung oder trackt es meine Besucher?
Nein. Das eingebettete Rad zeigt keine Werbung, setzt keine Tracking-Cookies und speichert weder Einträge noch Einstellungen im Browser deiner Besucher. Es zählt Aufrufe und Drehungen anonym und ohne Cookies, damit wir sehen, dass Einbettungen genutzt werden.

Können Besucher die Einträge im eingebetteten Rad ändern?
Besucher drehen mit den Einträgen, die du gewählt hast, und können einen Gewinner für die nächste Runde entfernen. Um die ganze Liste zu bearbeiten, klicken sie auf „In Spin and Wheel öffnen“; dann öffnet sich das vollständige Rad mit deinen Einträgen in einem neuen Tab.

Wie ändere ich die Einträge später?
Erstelle auf dieser Seite neuen Code mit den neuen Einträgen und ersetze den alten Code auf deiner Website. Die Einträge sind Teil des Codes, daher behält die alte Einbettung ihre Liste, bis du sie ersetzt.

Ist das eingebettete Rad zufällig und fair?
Ja. Der Gewinner wird mit crypto.getRandomValues (Web Crypto API) bestimmt, daher hat jeder von N Einträgen bei jeder Drehung genau eine Chance von 1/N – genau wie auf spinandwheel.com.

Welche Größe soll ich wählen?
Mittel (520 px hoch) passt in die meisten Blogposts. Wähle Klein (400 px) für Seitenleisten und schmale Spalten und Groß (640 px) für Seiten in voller Breite oder einen Beamer. Die Breite beträgt 100 % bis zur selben Grenze, und das Rad passt immer in die Box.

Funktioniert das eingebettete Rad auf dem Handy?
Ja. Das iframe ist 100 % breit, das Rad passt sich der verfügbaren Breite und Höhe an, und unter 700 px erscheint der Gewinner in einem Bottom Sheet mit großen Buttons.

Kann ich ein Glücksrad für einen Livestream in OBS einbetten?
Nutze für OBS Studio statt dieses Widgets die eigenen Stream-Links: ein transparentes Anzeige-Overlay und ein Steuer-Dock. Die OBS-Einrichtungsanleitung erklärt beides.