Vous n’avez pas encore intégré le Trustbadge® ? Dans ce cas, effectuez d’abord l’intégration standard avant de poursuivre. Cet article vous y aidera : Comment puis-je intégrer le Trustbadge® dans ma boutique sans plug-in ?
Dans l’article ci-dessus, vous trouverez également le code du Trustbadge, qui constitue la base de toutes les adaptations décrites ci-après.
Au sein de l’intégration standard, les règles suivantes sont définies pour le Trustbadge :
- Le Trustbadge affiche les étoiles d’évaluation que vous avez accumulées et, une fois la validation obtenue, votre Marque de confiance.
- Le Trustbadge s’affiche sur le côté droit de l’écran dans l’affichage de bureau et sur le côté gauche de l’écran dans l’affichage mobile.
- Le Trustbadge s’affiche 54 pixels au-dessus du bas de l’écran dans l’affichage de bureau et 10 pixels dans l’affichage mobile.
Vous pouvez bien entendu adapter ces règles à vos besoins individuels.
Les nouveaux membres ne peuvent apporter que des modifications limitées au Trustbadge :
- Vous pouvez le placer sur le bord droit ou gauche de l’écran.
- Vous pouvez le déplacer vers le haut ou vers le bas.
Souhaitez-vous effectuer d’autres réglages ? Dans ce cas, attendez d’avoir collecté votre premier avis ou reçu la Marque de confiance. Dès lors, vous disposerez de toutes les possibilités de réglage décrites dans cet article.
Dans cet article, nous vous expliquons comment utiliser le code du Trustbadge pour...
- ... modifier l’affichage du Trustbadge.
- ... placer le Trustbadge à un autre endroit de votre site web.
- ... masquer temporairement le Trustbadge sur votre site web.
Comment puis-je présenter le Trustbadge différemment ?
Au sein de l’intégration standard, le Trustbadge affiche les étoiles d’évaluation que vous avez accumulées et, une fois la validation obtenue, votre Marque de confiance.
(version bureau) (version mobile)
À l’aide du code du Trustbadge, vous avez quatre possibilités pour modifier l’affichage du Trustbadge :
- Vous pouvez masquer les étoiles d’évaluation collectées et n’afficher que votre Marque de confiance.
(version bureau) (version mobile) - Vous pouvez utiliser le Trustbadge dans l’obscurité.
(version bureau) (version mobile) - Vous pouvez également utiliser la variante de bureau du Trustbadge dans l’affichage mobile de votre site web.
- Dans l’affichage mobile, vous pouvez utiliser la variante Topbar du Trustbadge.
Masquer les étoiles d’évaluation dans l’affichage de bureau
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-desktop-disable-reviews="false"
- Remplacez-la par la ligne de code suivante :
data-desktop-disable-reviews="true"
Vous avez ainsi réussi à masquer les étoiles d’évaluation dans l’affichage de bureau.
Masquer les étoiles d’évaluation dans l’affichage mobile
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-mobile-disable-reviews="false"
- Remplacez-la par la ligne de code suivante :
data-mobile-disable-reviews="true"
Vous avez ainsi réussi à masquer les étoiles d’évaluation dans l’affichage mobile.
Utiliser le Trustbadge en mode sombre
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-color-scheme="light"
Le réglage du jeu de couleurs est un paramètre facultatif. Si vous ne trouvez pas la ligne de code mentionnée ci-dessus dans votre code Trustbadge, vous pouvez l’ajouter vous-même.
- Remplacer la ligne de code par l’une des lignes de code suivantes :
- Si vous souhaitez que le Trustbadge s’affiche en permanence en mode sombre :data-color-scheme="dark"
- Si les réglages du mode sombre de votre cilent déterminent si le Trustbadge s’affiche en mode sombre :data-color-scheme="os-default"
Utiliser la variante de bureau du Trustbadge dans l’affichage mobile
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-disable-mobile="false"
- Remplacez-la par la ligne de code suivante :
data-disable-mobile="true"
Ainsi, vous utilisez également la variante de bureau du Trustbadge dans l’affichage mobile.
Utiliser la variante Topbar du Trustbadge dans l’affichage mobile
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-mobile-enable-topbar="false"
- Remplacez-la par la ligne de code suivante :
data-mobile-enable-topbar="true"
Vous utilisez ainsi la variante Topbar du Trustbadge dans l’affichage mobile.
La variante Topbar du Trustbadge est positionnée de manière fixe en haut de l’écran. Vous ne pouvez pas modifier ce positionnement.
Comment puis-je placer le Trustbadge à un autre endroit ?
Le code du Trustbadge vous donne la possibilité de placer le Trustbadge à différents endroits de votre site web, et ce aussi bien dans l’affichage de bureau que dans l’affichage mobile. Ainsi, vous pouvez...
... déplacer horizontalement le Trustbadge vers la gauche ou la droite.
... déplacer verticalement le Trustbadge vers le haut ou vers le bas.
Ces possibilités ne vous suffisent pas ? Avec la variante Custom du Trustbadge, vous avez la possibilité de placer le Trustbadge de manière totalement flexible à n’importe quel endroit de votre site web.
Adapter l’emplacement du Trustbadge dans l’affichage de bureau
Dans l’affichage de bureau, vous pouvez déplacer le Trustbadge horizontalement de la droite vers la gauche de l’écran, mais aussi le déplacer verticalement vers le haut ou vers le bas.
Placer le Trustbadge sur le bord gauche de l’écran dans l’affichage de bureau
Par défaut, le Trustbadge est placé à droite de l’écran dans l’affichage de bureau. L’adaptation de code suivante permet de positionner le Trustbadge sur le bord gauche de l’écran.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-desktop-position="right"
- Remplacez-la par la ligne de code suivante :
data-desktop-position="left"
Vous avez ainsi réussi à placer le Trustbadge sur le bord gauche de l’écran.
Déplacer le Trustbadge vers le haut ou vers le bas dans l’affichage de bureau
Par défaut, le Trustbadge est placé à 54 pixels au-dessus du bas de l’écran dans l’affichage de bureau. L’adaptation de code suivante permet de déplacer le Trustbadge vers le haut ou vers le bas.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-desktop-y-offset="0"
- Remplacer le 0 par le nombre de pixels dont le Trustbadge doit être déplacé vers le haut ou vers le bas.
Deux exemples :
- Vous souhaitez déplacer le Trustbadge de 20 pixels vers le haut ? Utilisez la ligne de code suivante :
data-desktop-y-offset="20"
- Vous souhaitez déplacer le Trustbadge vers le bas ? Utilisez des valeurs négatives. Pour déplacer le Trustbadge de 20 pixels vers le bas, utilisez la ligne de code suivante :
data-desktop-y-offset="-20"
Avec une valeur de -54, le Trustbadge sera placé sans espace en bas de l’écran. Nous vous recommandons donc d’utiliser exclusivement des valeurs allant jusqu’à -44.
Vous avez ainsi réussi à déplacer le Trustbadge vers le bas ou vers le haut.
Adapter l’emplacement du Trustbadge dans l’affichage mobile
Dans l’affichage mobile, vous pouvez déplacer le Trustbadge horizontalement du bord gauche vers le bord droit de l’écran ou vers le centre de l’écran, mais aussi le déplacer verticalement vers le haut ou vers le bas.
Placer le Trustbadge sur le bord droit ou au centre de l’écran dans l’affichage mobile
Par défaut, le Trustbadge est placé à gauche de l’écran. L’adaptation de code suivante permet de positionner le Trustbadge sur le bord droit ou au centre de l’écran.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-mobile-position="left"
- Remplacer la ligne de code par l’une des lignes de code suivantes :
- Si vous souhaitez placer le Trustbadge sur le côté droit :data-mobile-position="right"
- Si vous souhaitez placer le Trustbadge au centre :data-mobile-position="center"
Vous avez ainsi réussi à placer le Trustbadge sur le bord droit ou au centre de l’écran.
Déplacer le Trustbadge vers le haut ou vers le bas dans l’affichage mobile
Par défaut, le Trustbadge est placé à 10 pixels au-dessus du bas de l’écran dans l’affichage mobile. L’adaptation de code suivante permet de déplacer le Trustbadge vers le haut ou vers le bas.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-mobile-y-offset="0"
- Remplacer le 0 par le nombre de pixels dont le Trustbadge doit être déplacé vers le haut ou vers le bas.
Deux exemples :
- Vous souhaitez déplacer le Trustbadge de 5 pixels vers le haut ? Utilisez la ligne de code suivante :
data-mobile-y-offset="5"
- Vous souhaitez déplacer le Trustbadge vers le bas ? Utilisez des valeurs négatives. Pour déplacer le Trustbadge de 5 pixels vers le bas, utilisez la ligne de code suivante :
data-mobile-y-offset="-5"
Utilisez uniquement des valeurs allant jusqu’à -10.
Vous avez ainsi réussi à déplacer le Trustbadge vers le bas ou vers le haut.
Placer le Trustbadge de manière flexible sur votre site web
Outre la variante standard du Trustbadge décrite jusqu’ici, vous pouvez également intégrer la variante Custom dans votre site web.
La variante Custom se distingue de la variante standard sur trois points :
- Elle a un aspect différent de la variante standard. Voici une représentation de la variante Custom:
��
(avec étoiles d’évaluation) (sans étoiles d’évaluation) - Vous pouvez placer la variante Custom de manière totalement flexible sur votre site web.
- Vous pouvez modifier la taille de la variante Custom.
Vous pouvez placer la variante Custom du Trustbadge à différents endroits de votre site web, et ce aussi bien dans l’affichage de bureau que dans l’affichage mobile.
Placer le Trustbadge de manière flexible dans l’affichage de bureau
Par défaut, la variante Custom a une largeur de 156 pixels et une hauteur de 78 pixels. Nous vous expliquons ci-dessous comment modifier la taille du Trustbadge dans l’affichage de bureau. Êtes-vous d’accord avec les valeurs par défaut ci-dessus ? Si oui, sautez les deux étapes suivantes et passez à l’étape 3.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-desktop-custom-width="156"
- Remplacer les 156 par le nombre de pixels que vous souhaitez définir comme largeur du Trustbadge.
Le nombre de pixels que vous pouvez choisir à cet endroit dépend du fait que vous ayez ou non masqué les étoiles d’évaluation dans l’affichage de bureau.
- Avez-vous masqué les étoiles d’évaluation ? Dans ce cas, choisissez un nombre de pixels compris entre 32 et 58.
- Vous n’avez pas masqué les étoiles d’évaluation ? Dans ce cas, choisissez un nombre de pixels compris entre 100 et 500.
Le nombre de pixels pour la hauteur du Trustbadge est défini automatiquement en fonction de la largeur que vous avez choisie. Il n’est pas déterminé par vous.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-desktop-enable-custom="false"
- Remplacez-la par la ligne de code suivante :
data-desktop-enable-custom="true"
- Ouvrez le code source de votre site web.
- Placer la ligne de code suivante à l’endroit de votre page web où le Trustbadge doit apparaître :
<div id="trustbadgeCustomContainer"></div>
Les positions possibles seraient, par exemple, l’en-tête ou le pied de page.
Vous avez maintenant intégré avec succès le Trustbadge à l’endroit que vous avez choisi sur votre site.
Placer le Trustbadge de manière flexible dans l’affichage mobile
Par défaut, la variante Custom a une largeur de 156 pixels et une hauteur de 78 pixels dans l’affichage mobile. Ci-dessous, nous vous expliquons comment modifier la taille du Trustbadge dans l’affichage mobile. Êtes-vous d’accord avec les valeurs par défaut ci-dessus ? Si oui, sautez les deux étapes suivantes et passez à l’étape 3.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-mobile-custom-width="156"
- Remplacer les 156 par le nombre de pixels que vous souhaitez définir comme largeur du Trustbadge.
Le nombre de pixels que vous pouvez choisir à cet endroit dépend du fait que vous ayez ou non masqué les étoiles d’évaluation dans l’affichage mobile.
- Avez-vous masqué les étoiles d’évaluation ? Dans ce cas, choisissez un nombre de pixels compris entre 32 et 58.
- Vous n’avez pas masqué les étoiles d’évaluation ? Dans ce cas, choisissez un nombre de pixels compris entre 100 et 500.
Le nombre de pixels pour la hauteur du Trustbadge est défini automatiquement en fonction de la largeur que vous avez choisie. Il n’a pas besoin d’être déterminé par vous.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-mobile-enable-custom="false"
- Remplacez-la par la ligne de code suivante :
data-mobile-enable-custom="true"
- Ouvrez le code source de votre site web.
- Placer la ligne de code suivante à l’endroit de votre page web où le Trustbadge doit apparaître :
<div id="trustbadgeCustomMobileContainer"></div>
Les positions possibles seraient, par exemple, l’en-tête ou le pied de page.
Vous avez maintenant intégré avec succès le Trustbadge à l’endroit que vous avez choisi sur votre site.
Comment masquer le Trustbadge ?
Si vous souhaitez masquer le Trustbadge, vous avez le choix entre deux possibilités :
- Vous pouvez activer le mode Fade-out dans l’affichage de bureau. Dans ce mode, le Trustbadge continue d’apparaître en haut de chaque page. Il disparaît toutefois lentement dès que votre clientèle fait défiler la page vers le bas, et il réapparaît dès qu’ils reviennent en haut de la page.
Dans l’affichage mobile, le mode Fade-out est activé par défaut. Il est toutefois possible de le désactiver dans cet affichage.
- Vous pouvez masquer complètement le Trustbadge. Le Trustbadge ne sera alors plus visible sur votre site web. Seule la Trustcard s’ouvrira après la réception de la commande, afin que votre clientèle puisse continuer à conclure la Protection acheteur.
Si vous masquez complètement le Trustbadge, il n’apparaîtra plus dans l’affichage de bureau ni dans l’affichage mobile.
Activer le mode Fade-out dans l’affichage de bureau
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-desktop-enable-fadeout="false"
- Remplacez-la par la ligne de code suivante :
data-desktop-enable-fadeout="true"
Vous avez ainsi activé avec succès le mode Fade-out dans l’affichage de bureau. Le Trustbadge disparaît désormais lentement dès que vos clients font défiler la page web vers le bas.
Désactiver le mode Fade-out dans l’affichage mobile
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-mobile-enable-fadeout="true"
- Remplacez-la par la ligne de code suivante :
data-mobile-enable-fadeout="false"
Vous avez ainsi désactivé le mode Fade-out dans l’affichage mobile. Désormais, le Trustbadge ne disparaît plus lorsque vos clients font défiler la page web vers le bas.
Masquer le Trustbadge
Un Trustbadge visible permet à vos clients de se sentir en sécurité sur votre site web. Si vous masquez le Trustbadge, vous compromettez votre taux de conversion et votre chiffre d’affaires. Nous vous conseillons donc de ne masquer le Trustbadge que temporairement, le cas échéant.
- À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
data-disable-trustbadge="false"
- Remplacez-la par la ligne de code suivante :
data-disable-trustbadge="true"
Vous avez ainsi réussi à masquer le Trustbadge aussi bien dans l’affichage de bureau que dans l’affichage mobile.
Comment puis-je placer la Trustcard ailleurs ?
Après la validation de la commande, la Trustcard s’affiche sous forme de pop-up sur la page de confirmation de commande de votre boutique. Avec la Trustcard, vos clients peuvent donner leur consentement pour recevoir une invitation d’avis et/ou protéger leur commande avec la Protection acheteur.
Vous ne voulez pas que la Trustcard s’ouvre sous forme de pop-up ? Vous pouvez ensuite lui attribuer une position définie sur votre page de confirmation de commande.
- Ouvrez le gabarit de votre page de confirmation de commande.
- Copiez la ligne de code suivante dans votre presse-papiers :
<div id="trustbadgeCustomCheckoutContainer"></div>
- Saisissez la ligne de code à l’emplacement où la Trustcard doit s’afficher.
Vous avez maintenant placé la Trustcard à un endroit précis sur votre page de confirmation de commande.