Personyze Wiki Personyze Wiki docs
Deutsch
Open Personyze
Docs/ Vorlage: Status Card

Vorlage: Status Card

Zeigt Besuchern als Karte, wie nah sie einem Ziel wie kostenlosem Versand sind – mit Ring oder Balken und Abschlussfeier.

4 min read Updated 1 Stunde ago

Die Status Card zeigt einem Besucher, wie nah er einem Ziel ist — etwa kostenlosem Versand oder einer Prämie — als zentrierte Karte oder Popup, mit einem Live-Wert aus seinem Personyze-Profil (Warenkorbsumme, Punkte, Ausgaben). Sie liest die Zahl, zeigt den Fortschritt als Kreisring oder horizontalen Balken und feiert, wenn das Ziel erreicht ist. Sie ist die Karten- bzw. Popup-Version der Free Shipping Status Bar. Die Platzierung legen Sie im Schritt Location der Aktion fest.

Status Card mit kreisförmigem Fortschrittsring, der den Fortschritt zu einem Ziel zeigt

Wann Sie sie einsetzen

  • Schwelle für kostenlosen Versand oder Prämien — eine auffällige Karte, die Besucher zu einem Ziel lenkt.
  • Punkte- / Treuefortschritt — „Noch 120 Punkte bis zu Ihrer nächsten Prämie.“
  • Meilensteine für Ausgaben oder Bestellungen — jedes einzelne numerische Ziel, als Karte statt als schmale Leiste.

Zu einer Aktion hinzufügen

Wählen Sie in einer Popup-Aktion Status Card. Wählen Sie den Fortschrittsstil (Ring oder Balken), den zu lesenden Wert, das Ziel und den Text. Die Einstellungen sind in Style, Value, Goal, Text, Button und Close gruppiert.

Ring oder Balken

Die Einstellung Progress Style (in Style) wechselt zwischen zwei Looks: ring zeigt eine kreisförmige Fortschrittsanzeige mit dem Prozentwert in der Mitte; bar zeigt einen horizontalen Fortschrittsbalken in der Karte mit dem Restbetrag und dem Prozentwert darunter. Alles andere — Wert, Ziel, Text und Feier — funktioniert in beiden Fällen gleich.

Status Card im Fortschrittsstil mit horizontalem Balken

Den zu lesenden Wert festlegen

Die Karte 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 die Warenkorbsumme oder Punkte. Die Karte liest den Live-Wert dieses Felds bei der Anzeige.
  2. Legen Sie einen Test Value (eine einfache Zahl) fest, damit die Karte im Editor korrekt in der Vorschau erscheint, wo das Live-Feld leer sein kann. Der Test Value wird nur im Editor verwendet — echte Besucher sehen immer ihren eigenen Wert.
  3. Wählen Sie das Unit Prefix (Währungssymbol) und optional das Unit Suffix (z. B. Pkt.).

Auf der Live-Website zählt ein leerer Wert als 0; die Karte erscheint also von Anfang 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 Karte zeigt einen Wert, der bereits im Profil des Besuchers vorhanden ist; dieses Feld muss also befüllt sein — das Widget zeigt ihn an und reagiert darauf, berechnet den Warenkorb aber nicht selbst.

  • Von Ihrer eigenen Website erfasst — übernehmen Sie den Wert von der Seite, aus einem Cookie oder einem URL-Parameter; er landet sofort im Profil, 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 finden Sie unter Nutzerprofildaten in Personyze einrichten und synchronisieren. Wählen Sie als Feldtyp number.

Das Ziel festlegen

Geben Sie im Abschnitt Goal den Goal Amount ein. Die Karte berechnet den Restbetrag und den Prozentwert. Mit Show From blenden Sie die Karte aus, bis der Wert ein Minimum erreicht (0 = immer anzeigen). Das Ring Label ist der kleine Text unter dem Prozentwert im Ringmodus. Die Completed Message erscheint, sobald das Ziel erreicht ist.

Einstellungen

  • Preset — light, dark, brand oder success.
  • Progress Style — ring oder bar.
  • Size — compact, default oder spacious.
  • Completion Effect — Konfetti, ein Häkchen oder nichts, abgespielt beim Erreichen des Ziels.
  • Text — Eyebrow, Titel (setzen Sie den Betrag in <span class="sc-amt"> , um ihn einzufärben) und Untertext, jeweils mit eigenem Stilfeld.
  • Button — optionaler Call-to-Action mit eigenem Link und Stil.
  • Completed Message CSS — die Erfolgsnachricht unabhängig gestalten.
  • Close Button und seine Sichtbarkeit (immer oder bei Hover).

Feier beim Abschluss

Erreicht der Wert das Ziel, zeigt die Karte Ihre Abschlussnachricht und spielt den gewählten Effekt ab — Konfetti, ein Häkchen oder nichts. Die Abschlussnachricht lässt sich über Completed Message CSS separat gestalten.

Status Card mit erreichtem Ziel und einer Feier

Tipps

  • Ring oder Balken ist rein optisch — beide verfolgen denselben Wert und dasselbe Ziel.
  • Stellen Sie den Typ des Profilfelds auf number, damit die Karte rechnen kann.
  • Für eine schmale, websiteweite Leiste statt einer Karte nutzen Sie die Free Shipping Status Bar. Für Treuestufen nutzen Sie die Tiered Status Card.

Weiterführende Lektüre

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