Zum Inhalt springen
Start » JTL Plugin: Glücksrad Portlet

JTL Plugin: Glücksrad Portlet

Interaktives Glücksrad im Frontend – Gutscheine ausspielen, Aufmerksamkeit erhöhen

Mit PAW Spinwheel platzierst du im OnePageComposer ein Glücksrad, das Besucher aktiv einbindet. Beim Drehen wird ein Segment gezogen: enthält der Eintrag einen Code nach |, wird dieser als Gutscheincode angezeigt. Ohne Code ist es automatisch eine Niete. Ideal für Aktionen, Newsletter-Opt-ins, Saisonstarts oder einfach als Conversion-Boost.

Ideal für: Kampagnen, Neukunden-Anreize, Abverkauf, saisonale Promotions.

Was das Glücksrad bringt

  • Mehr Interaktion – Nutzer bleiben länger auf der Seite, statt nur zu scrollen.
  • Conversion-Boost – Gutscheine motivieren zum nächsten Schritt (Kauf/Anfrage/Newsletter).
  • Aktionen sichtbar machen – statt Banner „wegzublenden“, wird aktiv teilgenommen.
  • Einfach im OPC platzieren – kein Theme-Hacking, kein Template-Gebastel.

Gewinne & Nieten ganz simpel

  • Gewinn: Text|CODE → Code wird angezeigt (z. B. 10% Rabatt|PAW10).
  • Kein Gewinn: nur Text ohne | (z. B. Leider nein).
  • Wahrscheinlichkeit: ergibt sich über die Anzahl der Gewinn-/Nieten-Felder.
  • Copy & Paste: Felder zeilenweise pflegen – fertig.

Konfigurierbar im Portlet

  • Überschrift & Button-Text passend zur Aktion.
  • Drehdauer & Umdrehungen für das „Feel“ der Animation.
  • Ergebnistext (z. B. „Dein Code:“) frei definierbar.
  • Optional: 1 Dreh pro Browser (browserbasiert via localStorage).

Typische Einsatzfälle

  • Startseiten-Promo für saisonale Aktionen (Sommer, Black Week, Sale).
  • Exit-Intent Bereich (z. B. im Footer/Sidebar) als „Letzte Chance“.
  • Newsletter / Lead (Code als Incentive nach Interaktion).
  • Abverkauf einzelner Sortimente mit festen Codes.
Kurz gesagt Das Glücksrad ist ein einfacher, wirksamer Trigger: Besucher machen aktiv mit – und ein Gutschein sorgt dafür, dass aus Aufmerksamkeit schneller ein nächster Schritt wird.

PAW Spinwheel (Glücksrad) – Dokumentation

Dieses Plugin integriert ein OPC-Portlet (OnePageComposer), das im Frontend ein Glücksrad anzeigt. Beim Drehen wird ein Feld ermittelt – enthält das Feld nach dem | einen Code, wird dieser als Gutscheincode angezeigt. Fehlt der Teil nach |, gilt das Feld als Niete (kein Gewinn).

Portlet einbauen Einstellungen Felder-Format Beispiele Frontend-Verhalten FAQ

Überblick

Die Konfiguration erfolgt direkt im OnePageComposer im Portlet-Dialog. Dort pflegen Sie Überschrift, Felder (Gewinne/Nieten), Button-Text und Dreh-Parameter.

Wichtig Ein Eintrag ist nur dann ein Gewinn, wenn er im Feld-Text einen Code nach einem | enthält (z. B. 5€ Rabatt|PAW5). Ohne | → kein Gewinn.
PAW Spinwheel – Portlet Einstellungen

Klick auf das Bild öffnet die vergrößerte Ansicht.

Portlet einbauen (Step-by-Step)

OnePageComposer öffnen

Im JTL-Shop Backend die gewünschte Seite im OPC bearbeiten.

Portlet „Spinwheel / Glücksrad“ hinzufügen

Im Portlet-Panel nach dem Glücksrad suchen und in die Seite ziehen.

Portlet bearbeiten

Auf das Portlet klicken → Bearbeiten → Einstellungen setzen (siehe nächste Abschnitte).

Speichern & im Frontend prüfen

Portlet speichern, Seite veröffentlichen und im Frontend testen.

Einstellungen im Portlet

Kurz erklärt, was die wichtigsten Felder machen.

Überschrift

Die Überschrift über dem Glücksrad im Frontend (z. B. „Glücksrad“, „Drehen & gewinnen“).

Button-Text

Text des Buttons zum Starten des Spins (z. B. „Drehen“, „Jetzt drehen“).

Drehdauer (Sekunden)

Wie lange die Animation läuft (z. B. 4 Sekunden). Höher = „dramatischer“, aber länger.

Umdrehungen (Basis) + Zufällige Extra-Umdrehungen

Basis-Umdrehungen steuern die Mindestanzahl Rotation. Extra-Umdrehungen sorgen dafür, dass sich das Ergebnis nicht „gleich“ anfühlt.

Nur 1 Dreh pro Browser (localStorage)

Wenn aktiv, kann pro Browser/Device nur einmal gedreht werden (Speicherung via localStorage). Ideal für zeitlich begrenzte Aktionen.

Hinweis „Nur 1 Dreh pro Browser“ ist browserbasiert (kein Login-Check). Nutzer können je nach Gerät/Browser mehrfach drehen.

Felder (Gewinne & Nieten) – Format

Die Felder werden zeilenweise gepflegt. Das Format ist: Label|Code (je Zeile ein Eintrag).

Regel
  • Gewinn: Label|CODE → Code wird im Frontend angezeigt.
  • Kein Gewinn (Niete): Label (ohne |) → kein Code, kein Gewinn.
Niete
Versandkostenfrei|FREESHIP
5€ Rabatt|PAW5
10% Rabatt|PAW10
Niete
Best Practice Wenn du nicht willst, dass Kunden „Niete“ lesen, nimm neutralere Labels wie „Leider nein“, „Nächstes Mal“, „Kein Gewinn“.

Beispiele (copy & paste)

Einfach (2 Gewinne, Rest Nieten)

Niete
Niete
5€ Rabatt|PAW5
Niete
Versandkostenfrei|FREESHIP
Niete

Mehrere Gewinne (unterschiedliche Codes)

10% Rabatt|PAW10
Niete
5€ Rabatt|PAW5
Versandkostenfrei|FREESHIP
Niete
15% Rabatt|PAW15

„Soft“-Sprache statt „Niete“

Leider nein
5€ Rabatt|PAW5
Nächstes Mal
Versandkostenfrei|FREESHIP
Kein Gewinn
10% Rabatt|PAW10

So funktioniert’s im Frontend

Nutzer klickt auf „Drehen“

Das Glücksrad startet die Animation und bleibt am gezogenen Segment stehen.

Auswertung des gezogenen Feldes

Das System liest den Text des Segments. Wenn ein | enthalten ist, wird der Teil rechts davon als Gutscheincode ausgegeben.

Gewinn vs. kein Gewinn

Mit Code: Nutzer sieht den Gutschein (z. B. PAW5).
Ohne Code: kein Gutschein (Niete).

Optional: 1 Dreh pro Browser

Wenn aktiv, wird der Button nach dem ersten Dreh pro Browser gesperrt (localStorage).

FAQ

Warum wird kein Gutscheincode angezeigt?

In der Feld-Zeile fehlt der Teil nach |. Beispiel: 5€ Rabatt ist kein Gewinn, erst 5€ Rabatt|PAW5 zeigt den Code an.

Wie setze ich „einmal drehen“ um?

Im Portlet die Option „Nur 1 Dreh pro Browser (localStorage)“ aktivieren. Das ist browserbasiert und nicht an ein Benutzerkonto gekoppelt.

Kann ich die Optik im OPC anpassen?

Ja – über die OPC-Reiter Layout und Animationen können zusätzliche Styles/Animationen gesetzt werden, je nachdem, was der OnePageComposer anbietet.

Support Wenn du willst, schreiben wir dir auch eine kurze „Best-Practice“-Vorlage für deine Aktion (Texte, Gewinnwahrscheinlichkeiten, Code-Struktur, Hinweise im Frontend).