Personyze Wiki Personyze Wiki docs
Deutsch
Open Personyze
Docs/ Vorlage: Tiered Status Bar

Vorlage: Tiered Status Bar

Eine Leiste, die den Fortschritt zur nächsten Treuestufe zeigt, erreichte Stufen hervorhebt und am Ende feiert.

4 min read Updated 1 Stunde ago

Die Tiered Status Bar zeigt einem Besucher, wie nah er seiner nächsten Treuestufe ist — Bronze, Silver, Platinum —, mit einem Live-Wert aus seinem Personyze-Profil. Sie liest eine Zahl (Punkte, Ausgaben, Bestellungen), zeigt den Fortschritt zur nächsten noch nicht erreichten Stufe, hebt die bereits überschrittenen Stufen hervor und feiert, wenn der Besucher die höchste erreicht. Sie ist die Version der Free Shipping Status Bar mit mehreren Meilensteinen. Die Platzierung legen Sie im Schritt Location der Aktion fest.

Tiered Status Bar mit erreichten Stufen Bronze und Silver und Fortschritt zu Platinum

Wann Sie sie einsetzen

  • Treuestufen — den Fortschritt über Bronze / Silver / Platinum (oder Ihre eigenen Stufennamen) zeigen, während Punkte gesammelt werden.
  • Ausgabe-Meilensteine — Vorteile auf mehreren Ausgabestufen freischalten, nicht nur auf einer.
  • Spielerische Ziele — jede Journey mit mehr als einem Meilenstein, den ein Besucher erklimmt.

Zu einer Aktion hinzufügen

Wählen Sie in einer Popup-Aktion Tiered Status Bar. Legen Sie den zu lesenden Wert, die drei Stufenwerte und -bezeichnungen sowie die Nachricht fest. Die Einstellungen sind in Style, Value, Tiers, Message und Close gruppiert.

Den zu lesenden Wert festlegen

Das ist der wichtigste Schritt. Die Leiste braucht eine Live-Zahl aus dem Profil des Besuchers.

  1. Öffnen Sie den Abschnitt Value und wählen Sie im Dropdown Current Value Field das Profilfeld, das die Zahl enthält — zum Beispiel ein Feld für Punkte oder Gesamtausgaben. Die Leiste liest den Live-Wert dieses Felds bei der Anzeige.
  2. Legen Sie einen Test Value (eine einfache Zahl) fest, damit die Leiste im Editor korrekt in der Vorschau erscheint, wo das Live-Feld leer sein kann. Damit die Stufen-Chips in der Vorschau aufleuchten, setzen Sie den Test Value auf oder über einen Ihrer Stufenwerte.
  3. Wählen Sie das Unit Prefix (Währungssymbol) und optional das Unit Suffix (z. B. Pkt.).

Der Test Value wird nur im Editor verwendet. Auf der Live-Website liest die Leiste den echten Profilwert; ein leerer Wert zählt als 0, die Leiste erscheint also vom Beginn der Journey an, sofern Sie Show From nicht erhöhen. Wie diese Profilvariablen aufgelöst werden, lesen Sie unter CRM-Variablen (Tags) für dynamische Inhalte einfügen.

Den Wert ins Profil bringen

Die Leiste zeigt nur einen Wert, der bereits im Profil des Besuchers vorhanden ist; dieses Feld muss also mit aktuellen Daten befüllt sein — das Widget zeigt ihn an und reagiert darauf, berechnet Punkte oder Ausgaben aber nicht selbst.

  • Von Ihrer eigenen Website erfasst — übernehmen Sie den Wert von der Seite, aus einem Cookie oder einem URL-Parameter. Personyze weiß bereits, um welchen Besucher es sich handelt, sodass der Wert sofort in seinem Profil landet, ohne dass ein Schlüssel nötig ist.
  • Importiert oder synchronisiert — aus einer Datei, einem Feed oder Ihrem CRM übernommen und dem Besucher über einen Schlüssel wie E-Mail oder CRM-ID zugeordnet.

Die vollständige Anleitung zum Anlegen und Befüllen von Profilfeldern finden Sie unter Nutzerprofildaten in Personyze einrichten und synchronisieren. Wählen Sie als Feldtyp number, damit die Leiste rechnen kann.

Die Stufen festlegen

Geben Sie im Abschnitt Tiers die drei Tier Values und ihre Labels ein — zum Beispiel 50 / Bronze, 150 / Silver, 300 / Platinum. Die Leiste ermittelt, auf welche Stufe der Besucher als Nächstes zusteuert, füllt den Balken zwischen dem vorigen und dem nächsten Meilenstein und hebt jede bereits erreichte Stufe hervor. Jeder Stufen-Chip kann eine eigene color, ein eigenes Symbol und ein eigenes Bild haben. Stufenfarben erscheinen, sobald die Stufe erreicht ist — leuchtet in der Vorschau nichts auf, erhöhen Sie den Test Value über einen Stufenwert. Die All Tiers Reached Message erscheint, sobald der Besucher die höchste Stufe überschreitet.

Einstellungen

  • Preset — dark, navy, brand, light oder success.
  • Bar Width — volle Breite oder begrenzt (eine zentrierte, abgerundete Leiste).
  • Animate Fill — die Leiste füllt sich beim Laden animiert bis zu ihrer Position.
  • Completion Effect — Konfetti, ein Häkchen, ein pulsierendes Leuchten oder nichts, abgespielt beim Erreichen der höchsten Stufe.
  • Show From — die Leiste ausblenden, bis der Wert dieses Minimum erreicht (bei 0 immer anzeigen).
  • Message Before / After Amount — der Text rund um die Zahl, z. B. „Noch 70 € bis zur nächsten Stufe.“
  • Completed Message CSS — die Erfolgsnachricht unabhängig gestalten; sie zentriert sich außerdem, sobald alle Stufen erreicht sind.
  • Close Button und seine Sichtbarkeit (immer oder bei Hover).

Tiered Status Bar im Preset brand

Feier beim Abschluss

Überschreitet der Besucher die höchste Stufe, blendet die Leiste Spur und Stufen-Chips aus, zeigt Ihre Nachricht „alle Stufen erreicht“ und spielt den gewählten Effekt ab — über die Leiste fallendes Konfetti, ein aufploppendes Häkchen oder ein pulsierendes Leuchten. Die Nachricht zentriert sich, und Sie können sie über Completed Message CSS separat gestalten.

Tiered Status Bar mit allen erreichten Stufen und einer Konfetti-Feier

Tipps

  • Setzen Sie den Test Value auf oder über einen Stufenwert, um die Stufen-Chips in der Vorschau aufleuchten zu sehen.
  • Stellen Sie den Typ des Profilfelds auf number — Textwerte lassen sich nicht mit den Stufenschwellen vergleichen.
  • Ordnen Sie die Stufenwerte von niedrig nach hoch; die Leiste sortiert sie und zeigt immer auf die nächste noch nicht erreichte.
  • Für ein einzelnes Ziel (etwa kostenlosen Versand) nutzen Sie stattdessen die Free Shipping Status Bar.

Weiterführende Lektüre

Did this page answer your question?
Thank you — that goes to whoever maintains this page.