Comment paramétrer l’affichage mobile du Trustbadge®?

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.

Vous pouvez configurer l’affichage mobile du Trustbadge indépendamment de l’affichage de bureau. Au sein de l’intégration standard, les règles suivantes sont définies pour le Trustbadge mobile :

  • 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é gauche de l’écran.
  • Le Trustbadge s’affiche 10 pixels au-dessus du bas de l’écran.

Vous pouvez bien entendu adapter ces règles à vos besoins individuels. Dans cet article, nous vous expliquons comment utiliser le code du Trustbadge pour...

Comment puis-je modifier l’affichage du Trustbadge mobile ?

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.

01_FR.png

À l’aide du code du Trustbadge, vous avez trois 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.
    02_FR.png
  • Vous pouvez également utiliser la variante de bureau du Trustbadge dans l’affichage mobile de votre site web.
    03_FR.png
  • Dans l’affichage mobile, vous pouvez utiliser la variante Topbar du Trustbadge.
    04_FR.jpg

Masquer les étoiles d’évaluation

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-mobile-disable-reviews="false"
  2. 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 la variante de bureau du Trustbadge dans l’affichage mobile

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-disable-mobile="false"
  2. 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

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-mobile-enable-topbar="false"
  2. 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 mobile à un autre endroit ?

Au sein de l’intégration standard, le Trustbadge mobile s’affiche sur le côté gauche de l’écran et 10 pixels au-dessus du bord inférieur de l’écran.

À l’aide du code du Trustbadge®, 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 mobile librement dans l’affichage mobile de votre site web.

Placer le Trustbadge sur le bord droit ou au centre de l’écran

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-mobile-position="left"
  2. 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

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-mobile-y-offset="0"
  2. 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 ci-dessus, vous pouvez également intégrer la variante « Custom » dans l’affichage mobile de votre site web.

La variante Custom se distingue de la variante standard sur trois points :

  1. Elle a un aspect différent de la variante standard. Voici une représentation de la variante Custom :
    05_FR.png  06_FR.png
         (avec étoiles d’évaluation)                                                 (sans étoiles d’évaluation)
  2. Vous pouvez placer la variante Custom de manière totalement flexible sur votre site web.
  3. 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 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.

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-mobile-custom-width="156"
  2. 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.

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-mobile-enable-custom="false"
  2. Remplacez-la par la ligne de code suivante :
    data-mobile-enable-custom="true"
  3. Ouvrez le code source de votre site web.
  4. 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 désactiver le mode Fade-out du Trustbadge mobile ?

Dans l’affichage mobile, le mode Fade-out est activé par défaut. Dans ce mode, le Trustbadge s’affiche 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. Vous pouvez désactiver le mode Fade-out afin que le Trustbadge ne soit plus masqué.

  1. À l’intérieur du code du Trustbadge, trouvez la ligne de code suivante :
    data-mobile-enable-fadeout="true"
  2. 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.


Cet article a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 13 sur 24