La Free Shipping Status Bar montre au visiteur à quel point il est proche d’un objectif — « Plus que 65 € avant la livraison gratuite » — avec une barre de progression en direct qui se remplit à mesure que sa valeur augmente. Elle lit un nombre dans le profil Personyze du visiteur (montant du panier, points, nombre de commandes), le compare à un objectif que vous définissez, et met à jour automatiquement le message, la barre et le pourcentage. Une fois l’objectif atteint, elle affiche un message de réussite avec une animation de célébration. L’emplacement se règle à l’étape Lieu de l’action.
Quand l’utiliser
- Seuil de livraison gratuite — inciter les visiteurs à ajouter des articles à leur panier pour débloquer la livraison gratuite.
- Objectifs de récompense / fidélité — « Plus que 120 points avant votre prochaine récompense. »
- Paliers de dépenses ou de commandes — tout objectif numérique unique vers lequel progresse un visiteur.
L’ajouter à une action
Dans une action Popup, choisissez Free Shipping Status Bar. Définissez la valeur à lire, l’objectif et le message. Les réglages sont regroupés en Style, Value, Goal, Message et Close.
Définir la valeur lue
C’est l’étape la plus importante. La barre 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 barre lit la valeur en direct de ce champ au moment de l’affichage.
- Définissez une Test Value (un simple nombre) pour que la barre 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, la barre lit la vraie valeur du profil ; une valeur vide compte comme 0 : la barre 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 barre ne reflète qu’une valeur qui existe déjà dans le profil du visiteur : ce champ doit donc être rempli avec des données à jour — 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 le montant du panier (ou les points, les commandes) sur la page, dans un cookie ou dans un paramètre d’URL. Personyze sait déjà de quel visiteur il s’agit : la valeur arrive donc immédiatement dans son 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 pour créer et remplir des champs de profil se trouvent dans Configurer et synchroniser les données de profil utilisateur dans Personyze. Choisissez le type nombre pour le champ, afin que la barre puisse faire le calcul.
Définir l’objectif
Dans la section Goal, saisissez le Goal Amount (par exemple 100). La barre calcule le montant restant et le pourcentage à partir de la valeur actuelle par rapport à cet objectif. Utilisez Show From pour masquer la barre tant que la valeur n’atteint pas un minimum (laissez 0 pour toujours l’afficher). Le Completed Message s’affiche dès que la valeur atteint ou dépasse l’objectif.
Réglages
- Preset — dark, navy, brand, light ou success.
- Bar Width — pleine largeur, ou contenue (une barre centrée et arrondie).
- Animate Fill — la barre s’anime jusqu’à sa position au chargement.
- Completion Effect — confettis, coche, pulsation lumineuse ou aucun, joué quand l’objectif est atteint.
- Message Before / After Amount — le texte autour du nombre ; la partie « après » accepte du HTML simple pour mettre en valeur la récompense.
- Show From — masquer la barre tant que la valeur n’atteint pas ce minimum (0 = toujours afficher).
- Completed Message CSS — styliser le message de réussite indépendamment ; il se centre aussi de lui-même une fois l’objectif atteint.
- Close Button et sa visibilité (toujours, ou au survol).
Célébration de l’objectif atteint
Quand la valeur atteint l’objectif, la barre masque la piste et le pourcentage, affiche votre message de réussite et joue l’effet choisi. Des confettis tombent sur la barre pendant quelques secondes, la coche apparaît, ou la barre pulse avec un halo. Le message se centre aussi de lui-même une fois la barre et le pourcentage disparus, et vous pouvez le styliser séparément avec Completed Message CSS.
Conseils
- Testez d’abord avec la Test Value pour valider le texte et les couleurs, puis choisissez le champ en direct dans Current Value Field.
- Réglez le type du champ de profil sur nombre — des valeurs texte ne peuvent pas être comparées à l’objectif.
- Si la barre affiche toujours 0, le champ de profil n’est pas encore rempli — vérifiez que Current Value Field est défini et que le champ contient réellement un nombre pour le visiteur (voir les deux liens ci-dessus).
- Pour des paliers multiples (Bronze / Silver / Platinum), utilisez plutôt le modèle Status Bar à paliers.
Pour aller plus loin
- Barres de livraison gratuite et de fidélité à paliers — le levier du panier moyen.
- Marketing de la ludification — les mécanismes des modèles interactifs et leur place.
- Modèles de popups pour site web — les 16 modèles, et comment choisir le bon format.