La Status Card montre au visiteur à quel point il est proche d’un objectif — comme la livraison gratuite ou une récompense — sous forme de carte centrée ou de popup, à partir d’une valeur en direct de son profil Personyze (montant du panier, points, dépenses). Elle lit le nombre, affiche la progression sous forme d’anneau circulaire ou de barre horizontale, et célèbre l’atteinte de l’objectif. C’est la version carte/popup de la Free Shipping Status Bar. L’emplacement se règle à l’étape Lieu de l’action.
Quand l’utiliser
- Seuil de livraison gratuite ou de récompense — une carte bien visible qui pousse les visiteurs vers un objectif.
- Progression des points / de la fidélité — « Plus que 120 points avant votre prochaine récompense. »
- Paliers de dépenses ou de commandes — tout objectif numérique unique, présenté sous forme de carte plutôt que de barre fine.
L’ajouter à une action
Dans une action Popup, choisissez Status Card. Choisissez le style de progression (anneau ou barre), la valeur à lire, l’objectif et le texte. Les réglages sont regroupés en Style, Value, Goal, Text, Button et Close.
Anneau ou barre
Le réglage Progress Style (dans Style) bascule entre deux styles : ring affiche un indicateur de progression circulaire avec le pourcentage au centre ; bar affiche une barre de progression horizontale dans la carte, avec le montant restant et le pourcentage en dessous. Tout le reste — la valeur, l’objectif, le texte et la célébration — fonctionne de la même façon dans les deux cas.
Définir la valeur lue
La carte a besoin d’un nombre en direct issu du profil du visiteur.
- Ouvrez la section Value et utilisez la liste déroulante Current Value Field pour choisir le champ de profil qui contient le nombre — par exemple un champ de montant du panier ou de points. La carte lit la valeur en direct de ce champ au moment de l’affichage.
- Définissez une Test Value (un simple nombre) pour que la carte s’affiche correctement dans l’éditeur, où le champ en direct peut être vide. La Test Value n’est utilisée que dans l’éditeur — les vrais visiteurs voient toujours leur propre valeur.
- Choisissez le Unit Prefix (symbole monétaire) et un Unit Suffix facultatif (par ex. pts).
Sur le site en ligne, une valeur vide compte comme 0 : la carte s’affiche donc dès le départ, sauf si vous augmentez Show From. Pour savoir comment ces variables de profil sont résolues, voir Insérer des variables et tags CRM pour du contenu dynamique.
Faire entrer la valeur dans le profil
La carte reflète une valeur qui existe déjà dans le profil du visiteur : ce champ doit donc être rempli — le widget l’affiche et y réagit, il ne calcule pas le panier lui-même.
- Récupérée sur votre propre site — récupérez la valeur sur la page, dans un cookie ou dans un paramètre d’URL ; elle arrive immédiatement dans le profil, sans clé d’identification.
- Importée ou synchronisée — apportée depuis un fichier, un flux ou votre CRM, et associée au visiteur par une clé comme l’e-mail ou l’ID CRM.
Les instructions complètes se trouvent dans Configurer et synchroniser les données de profil utilisateur dans Personyze. Choisissez le type nombre pour le champ.
Définir l’objectif
Dans la section Goal, saisissez le Goal Amount. La carte calcule le montant restant et le pourcentage. Utilisez Show From pour masquer la carte tant que la valeur n’atteint pas un minimum (0 = toujours afficher). Le Ring Label est le petit texte sous le pourcentage en mode anneau. Le Completed Message s’affiche une fois l’objectif atteint.
Réglages
- Preset — light, dark, brand ou success.
- Progress Style — ring ou bar.
- Size — compact, default ou spacious.
- Completion Effect — confettis, coche ou aucun, joué quand l’objectif est atteint.
- Text — surtitre, titre (entourez le montant de
<span class="sc-amt">pour le colorer), et sous-texte, chacun avec son propre champ de style. - Button — appel à l’action facultatif, avec son propre lien et son propre style.
- Completed Message CSS — styliser le message de réussite indépendamment.
- Close Button et sa visibilité (toujours, ou au survol).
Célébration de l’objectif atteint
Quand la valeur atteint l’objectif, la carte affiche votre message de réussite et joue l’effet choisi — confettis, coche, ou rien. Vous pouvez styliser le message de réussite séparément avec Completed Message CSS.
Conseils
- Anneau ou barre, c’est purement visuel — les deux suivent la même valeur et le même objectif.
- Réglez le type du champ de profil sur nombre pour que la carte puisse faire le calcul.
- Pour une fine barre sur tout le site plutôt qu’une carte, utilisez la Free Shipping Status Bar. Pour les niveaux de fidélité, utilisez la Tiered Status Card.
Pour aller plus loin
- Barres de livraison gratuite et de fidélité à paliers — le levier du panier moyen.
- Modèles de popups pour site web — les 16 modèles, et comment choisir le bon format.