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 positionnement du Trustbadge :
- 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. 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.
Comment modifier le positionnement dans l’affichage de bureau ?
Dans l’affichage de bureau, vous pouvez...
... déplacer horizontalement le Trustbadge de la droite vers la gauche de l’écran.
... déplacer verticalement le Trustbadge vers le haut ou vers le bas.
... placer le Trustbadge de manière totalement libre sur votre site web.
Placer le Trustbadge sur le bord gauche de l’écran dans l’affichage de bureau
- À 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
- À 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.
Placer le Trustbadge de manière flexible dans l’affichage de bureau
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.
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.
Comment modifier le positionnement dans l’affichage mobile ?
Dans l’affichage mobile, vous pouvez...
... déplacer horizontalement le Trustbadge du bord gauche de l’écran vers le centre ou vers la droite.
... déplacer verticalement le Trustbadge vers le haut ou vers le bas.
... placer le Trustbadge de manière totalement libre sur votre site web.
Placer le Trustbadge sur le bord droit ou au centre de l’écran dans l’affichage mobile
- À 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
- À 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 dans l’affichage mobile
Outre la variante standard du Trustbadge décrite ci-dessus, vous pouvez également intégrer la variante « Custom » dans l’affichage mobile de votre site web. 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 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.