Une notification d'achat doit donner l'impression que c'est votre site qui l'a produite, pas qu'un tiers a loué un coin de l'écran. Provedly propose cinq thèmes, et bien choisir revient surtout à deux questions : votre page est-elle claire ou sombre, et votre marque est-elle discrète ou expressive ? Cet article passe en revue chaque thème, les réglages qui l'entourent et les erreurs qui donnent à une notification un air de pièce rapportée.
Les cinq thèmes
| Thème | Caractère | Convient à |
|---|---|---|
| Clean white | Carte claire, texte neutre | La plupart des sites clairs, SaaS, pages riches en documentation |
| Deep ocean | Surface bleu foncé | Marques sombres ou bleu marine, fintech, outils pour développeurs |
| Midnight | Surface quasi noire | Sites en mode sombre, photographie, produits haut de gamme |
| Electric violet | Accent saturé | Marques à l'identité violette ou en dégradé affirmée |
| Sunset blaze | Accent chaud et énergique | Marques grand public, lancements, alimentation et événements |
Comme le widget s'affiche dans un Shadow DOM, un thème s'affiche exactement comme prévu. Le CSS de votre site ne peut pas le modifier, et ses styles ne peuvent pas déborder. Cela supprime le problème du « ça n'avait pas le même rendu sur le site en ligne », mais cela signifie aussi que le choix du thème est toute la décision de design ; choisissez-le avec soin.
Assortir à la surface, pas au logo
L'erreur la plus courante consiste à assortir la notification à la couleur du logo. Un logo violet sur une page blanche ne signifie pas qu'Electric violet est le bon choix ; la notification se pose sur la page, pas sur le logo. Assortissez-la à la surface qu'elle va recouvrir. Si vos pages sont blanches ou gris clair, Clean white paraît natif. Si vos pages sont sombres, Midnight ou Deep ocean le seront.
Réservez les thèmes à accent aux marques à fort contraste partout. Une notification couleur coucher de soleil sur une page blanche sobre attire l'œil vers le coin à chaque apparition, ce qui lasse dès la troisième notification. N'oubliez pas que les visiteurs en voient jusqu'à 5 par session par défaut.
Les réglages autour du thème
Position
En bas à gauche, c'est la convention que la plupart des visiteurs ont appris à lire comme « de l'activité, pas une alerte ». En bas à droite, elle entre en concurrence avec les widgets de chat et les bandeaux de cookies. En haut, elle concurrence votre navigation et les barres CTA. Vérifiez la position par rapport à tout ce qui est fixe sur votre page, surtout sur mobile, où une notification et un bouton d'ajout au panier persistant peuvent se chevaucher. Le ciblage par appareil vous permet de n'afficher les notifications que sur ordinateur si le mobile est trop chargé.
Style d'avatar
Un avatar donne à l'œil un point d'accroche. Provedly prend en charge un avatar image alimenté par le champ avatar_url des enregistrements API et CSV ; les enregistrements issus des webhooks Stripe et Shopify ne contiennent pas de photo, si bien que la plupart des widgets utilisent un style sans photo. N'utilisez pas de visages de banque d'images pour combler le vide. Une notification sur « Sarah M. à Austin » accompagnée du portrait d'un mannequin, c'est un détail inventé plaqué sur un achat réel, et c'est exactement le genre de chose que la page de vérification existe pour éviter.
Formats du nom et du lieu
Le thème définit l'apparence ; les formats définissent le ton. Par défaut : prénom plus initiale (« Sarah M. ») et ville plus pays (« Austin, US »). Les noms complets paraissent intrusifs et sont généralement une erreur de confidentialité ; les initiales seules (« S. M. ») paraissent fuyantes. Ville et pays, c'est assez précis pour être crédible sans désigner une rue. Pour un commerce local où le nom d'une ville identifie une petite communauté, « country » ou « none » est plus respectueux. Voir Formats du nom et du lieu : la confidentialité par défaut.
Le timing fait partie du design
Les choix de thème sont visuels, mais c'est le rythme que les gens remarquent vraiment. Par défaut : 3 secondes avant la première, 6 secondes à l'écran, 30 secondes d'intervalle et 5 par session. Sur une longue landing page, un intervalle plus long paraît plus calme. Sur une grille de produits que l'on parcourt vite, le réglage par défaut convient. Quel que soit votre choix, gardez-le identique d'une page à l'autre ; une notification qui apparaît immédiatement sur une page et au bout de dix secondes sur une autre paraît aléatoire.
Le badge
Le plan Free affiche un petit badge « by Provedly » sur la notification. À partir de Starter, le badge est facultatif. Dans tous les cas, chaque notification renvoie vers la page de vérification publique, qui liste les sources, les volumes et le dernier achat vérifié. Même si vous masquez le badge, gardez le lien accessible ; c'est ce qui distingue une notification vérifiable d'une simple décoration.
Un parcours de décision rapide
- Page claire, marque discrète : Clean white.
- Page sombre : Midnight pour un noir neutre, Deep ocean pour une tendance bleue.
- Marque construite sur un accent fort utilisé partout : Electric violet ou Sunset blaze.
- En cas de doute : Clean white, en bas à gauche, réglages par défaut. Ensuite, changez une chose à la fois.
Prévisualisez chaque thème sur une vraie page plutôt que seulement dans le dashboard. Ouvrez votre site avec le widget installé, changez de thème et rechargez. La différence entre « c'est bien chez nous » et « c'est une pub » saute aux yeux en deux notifications.
Questions fréquentes
Puis-je personnaliser les couleurs au-delà des cinq thèmes ?
Les thèmes sont des ensembles fixes, choisis pour que la notification reste lisible et cohérente sur tous les sites. Les barres offrent davantage de contrôle sur les couleurs, notamment le fond et le texte du bouton, parce que ce sont des surfaces plus grandes.
Le thème s'applique-t-il au compteur de visiteurs en direct ?
Le compteur de visiteurs en direct utilise le même thème, pour que les deux éléments forment un ensemble. Il se masque aussi sous votre minimum plutôt que d'afficher un petit chiffre peu convaincant.
Les thèmes ont-ils un rendu différent sur Shopify ?
Non. L'app embed Shopify utilise le même moteur de rendu et la même isolation par Shadow DOM, donc un thème a le même aspect sur Shopify que sur un site statique.
Essayez les cinq sur votre propre page en quelques minutes : commencer gratuitement.