Quelles sont les variantes d'affichage du Trustbadge® et comment les intégrer dans ma boutique?

Bon à savoir : Dans le tutoriel suivant, nous allons vous expliquer toutes les variantes d'affichage du Trustbadge avec tous les paramètres disponibles ainsi que les étapes nécessaires à l'intégration et à la configuration. Le manuel est basé sur ce tutoriel, dans lequel nous vous expliquons notre intégration standard: Comment puis-je intégrer le Trustbadge dans ma boutique sans plug-in ? C'est pourquoi vous devez d'abord effectuer l'intégration standard avant de commencer ce tutoriel.

Les variantes du Trustbadge

Les variantes reviews et default

trustbadge_trustmark_reviews_FR.pngtrustbadge_reviews_FR.png

Variante reviews (avec ou sans marque de confiance)

trustbadge_no_reviews_FR.png

Variante default

Alors que la variante reviews affiche à la fois vos étoiles d'évaluation et votre marque de confiance, la variante default vous permet de vous limiter à la présentation de votre marque de confiance.

Dans ce tutoriel, nous vous expliquerons en détail comment vous pouvez intégrer l'une de ces deux variantes dans votre boutique: Comment puis-je intégrer le Trustbadge dans ma boutique sans plug-in ? 

Les paramètres suivants du code du Trustbadge vous permettent de configurer les variantes reviews et default en fonction de vos besoins spécifiques :

'yOffset': '0', /* offset from page bottom */

Par défaut, le Trustbadge est affiché dans le coin inférieur droit de votre boutique. Vous pouvez utiliser le paramètre ˈyOffsetˈ pour déplacer le Trustbadge le long de l'axe vertical. Pour ce faire, il suffit de remplacer le chiffre 0 par le nombre de pixels souhaités desquels le Trustbadge doit être déplacé vers le haut. Bien entendu, il est également possible de déplacer le Trustbadge vers le bas. Il suffit pour cela de saisir une valeur négative correspondante.

Par défaut, le Trustbadge est affiché à 54 px du bord inférieur. Il est donc recommandé de ne pas saisir une valeur inférieure à -54 pour le paramètre ˈyOffsetˈ.
'variant': 'reviews', /* default, reviews, custom, custom_reviews */

Le Trustbadge existe en quatre variantes. Avec le paramètre ˈvariantˈ , vous déterminez laquelle de ces variantes doit être appliquée dans votre boutique. La variante « reviews » est sélectionnée par défaut. Si vous préférez une autre variante, remplacez la valeur « reviews » dans la ligne de code par « default », « custom_reviews » ou « custom ».

'disableResponsive': 'false', /* deactivate responsive behaviour */

Par défaut, le Trustbadge s'adapte automatiquement à la taille de l'écran utilisé par vos clients. Par exemple, si la largeur de l'écran est de 648 px ou moins, le Trustbadge passe à une variante d'affichage optimisée pour les appareils mobiles. Si vous changez la valeur du paramètre 'disableResponsive' de false à true, cet ajustement automatique est désactivé. Au lieu de cela, la version de bureau du Trustbadge est également affichée sur les appareils mobiles.

'disableTrustbadge': 'false' /* deactivate trustbadge */

Ce paramètre vous permet d’activer ou de désactiver l’affichage du Trustbadge dans votre boutique. Si vous réglez la valeur du paramètre de false à true, le Trustbadge sera dorénavant caché. Néanmoins, la Trustcard apparaît sur votre page de confirmation de commande, grâce à laquelle vos clients peuvent donner leur consentement à une invitation à l'évaluation opter pour la garantie de protection des acheteurs.

Les variantes custom et custom_reviews

helpcenter_BILD.png

La variante custom

TB5-custom-trustmark-only_FR.pngreviews-only_FR.png

La variante custom_reviews (avec et sans marque de confiance)

Contrairement aux variantes reviews et default, qui sont fixées sur le côté droit de votre boutique, les variantes custom et custom_reviews peuvent être positionnées de manière flexible dans votre boutique. Si vous souhaitez intégrer l'une de ces deux variantes dans votre boutique, veuillez suivre les étapes du guide d'intégration ci-après.

Le guide d'intégration suivant s'appuie sur ce tutoriel: Comment puis-je intégrer le Trustbadge dans ma boutique sans plug-in ? Si vous ne l'avez pas encore fait, nous vous recommandons de le faire avant de poursuivre.

Étape 1: Créez un élément DIV

Pour utiliser l'une des deux variantes de Trustbadge custom et custom_reviews, vous devez d'abord créer un élément DIV. Pour ce faire, copiez le code HTML suivant dans le système de votre boutique où vous souhaitez que le Trustbadge apparaisse. Les positions possibles seraient par exemple dans l'en-tête ou le pied de page.

<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>

Ce code HTML vous offre deux possibilités de personnalisation.

  1. Vous pouvez attribuer un nouvel ID à l'élément DIV. Pour ce faire, il suffit de remplacer la valeur MyCustomTrustbadge par un nom de votre choix. Si vous apportez un changement à l'identification à ce stade, veuillez vous souvenir de l'identification que vous avez définie. Vous en aurez à nouveau besoin à l'étape 3.
  2. Les propriétés de largeur et de hauteur vous permettent d'ajuster la hauteur et la largeur du Trustbadge. Il suffit de remplacer les valeurs numériques derrière la largeur et la hauteur selon vos besoins. Veuillez noter que le rapport d'aspect original (largeur:hauteur) du Trustbadge est de respectivement 2:1 dans la variante custom_reviews et 1:1 dans la variante custom.

Étape 2 : Sélectionnez votre variante préférée du Trustbadge

Rendez-vous maintenant dans le fichier du plug-in ou du fichier modèle dans lequel vous avez stocké le code de votre Trustbadge.

Si vous n'avez pas encore généré le code Trustbadge et l'avez intégré dans votre boutique, veuillez suivre les étapes de ce guide: Comment puis-je intégrer le Trustbadge dans ma boutique sans plug-in ?

Dans le code du Trustbadge, utilisez le paramètre 'variant' pour déterminer la variante du Trustbadge que vous souhaitez utiliser dans votre boutique. Pour ce faire, entrez soit "custom" soit "custom_reviews" comme valeur pour le paramètre. Après votre personnalisation, la ligne de code doit donc être soit comme ceci :

'variant': 'custom', /* reviews, default, custom, custom_reviews */

soit comme cela :

'variant': 'custom_reviews', /* reviews, default, custom, custom_reviews */

Étape 3 : Liez le code du Trustbadge à l'élément DIV

Ensuite, si ce n'est pas déjà fait, insérez la ligne de code suivante dans le code du Trustbadge :

'customElementId': 'MyCustomTrustbadge', /* required for variants custom and custom_reviews */

Le paramètre 'customElementId' est le marqueur de référence pour l'élément DIV créé à l'étape 1 et le relie à votre code de Trustbadge. Si vous avez effectué un changement d'ID à l'étape 1, veuillez remplacer la valeur MyCustomTrustbadge par l'ID de l'élément DIV que vous avez également défini dans ce paramètre.

La variante personnalisée n'est disponible que pour les boutiques portant le marque de confiance Trusted Shops et n'est visible que lorsque le marque de confiance est active. Si votre marque de confiance n'a pas encore été activée et que vous souhaitez tout de même en voir un aperçu, vous pouvez le faire via la console de développement de votre navigateur. Il suffit d'y exécuter la commande trustbadge.showIntegrationPlaceholder();.

Étape facultative 4 : Déterminez le sens d'ouverture du Trustbadge

Le Trustbadge minimisé est le compagnon permanent de vos clients dans votre boutique en ligne. En cliquant sur le Trustbadge, vos clients peuvent l'optimiser afin d’obtenir plus d'informations sur votre marque de confiance ou sur les avis collectés. Quel que soit l'endroit où vous avez placé le Trustbadge dans votre boutique en ligne, il se maximisera par défaut dans la direction où il y a le plus de place.

Cependant, vous pouvez également attribuer au Trustbadge un sens fixe dans lequel il doit se maximiser. Pour ce faire, il faut d'abord – si ce n’est pas encore fait – insérer la ligne de code suivante dans le code du Trustbadge :

'trustcardDirection': '', /* topRight, topLeft, bottomRight, bottomLeft */

Définissez maintenant la direction en entrant l'une des valeurs suivantes pour le paramètre :

  • 'topRight' pour maximiser en haut à droite.
  • 'topLeft' pour maximiser en haut à gauche.
  • 'bottomRight' pour maximiser en bas à droite.
  • 'bottomLeft' pour maximiser en bas à gauche.

Pour une maximisation en haut à droite, la ligne de code doit ressembler à ceci une fois les ajustements effectués :

'trustcardDirection': 'topRight', /* topRight, topLeft, bottomRight, bottomLeft */

Vous avez maintenant terminé l'intégration de la variante custom ou custom_reviews et pouvez désormais vérifier l'affichage du Trustbadge dans votre boutique.

Remarque: le Trustbadge apparaît toujours dans le coin inférieur droit ? Dans ce cas, vérifiez

  • si vous avez effectivement spécifié custom ou custom_reviews comme valeur dans le paramètre 'variant'.
  • si vous faites référence à l'ID de l'élément DIV créé à l'étape 1 dans le paramètre "customElementId"
  • si vous avez défini la hauteur et la largeur de l'élément DIV comme décrit à l'étape 1.

Dans la console de développement de votre navigateur, vous recevrez dans ce cas des messages avec des instructions supplémentaires.

Les variantes du Trustbadge mobile : floating, floating_reviews et topbar

Bien entendu, Trusted Shops vous propose également des variantes d'affichage mobile du Trustbadge. Ces dernières sont affichées par défaut, c'est-à-dire si vous n’avez pas réglé le paramètre 'disableResponsive' sur true – avec une largeur d'écran de 648 px et moins.

mobile-trustmark-only.png

La variante floating présentée ici est la variante mobile par défaut du Trustbadge. Contrairement aux variantes reviews et default, il apparaît par défaut dans le coin inférieur gauche de votre boutique. En outre, affiche uniquement la marque de confiance.

Si vous souhaitez également afficher vos étoiles d’évaluation, vous avez deux possibilités :

  • La variante de floating_reviews : À l’instar de la variante floating, elle est également affichée par défaut dans le coin inférieur gauche de votre boutique en ligne. Toutefois, contrairement à la variante floating, elle affiche également les étoiles d'évaluation.

mobile-trustmark_reviews.png

  • La variante topbar : Il s’agit d’une barre située au-dessus du nom de votre boutique qui contient aussi bien la marque de confiance que des informations sur vos évaluations.

trustbadge-mobile-topbar_FR.jpg

Pour configurer l'affichage mobile de votre Trustbadge, veuillez copier la ligne de code suivante et la coller sous le paramètre 'variant' dans le code de votre Trustbadge :

'responsive': {'variant':'floating', 'position':'left', 'yOffset':'0'},

Dans ce paramètre, vous disposez de trois options de configuration :

  • la valeur que vous entrez pour 'variant' détermine la variante de Trustbadge que vous souhaitez afficher pour des largeurs d'écran inférieures à 648 pixels. Vous avez le choix entre les variantes floating et floating_reviews ainsi que la variante topbar. Saisissez la variante souhaitée comme valeur pour 'variant'.
  • Les variantes floating et floating_reviews ne sont pas fixées sur le bord gauche de votre boutique. La valeur que vous entrez pour 'position' définit le positionnement horizontal de ces deux variantes. En plus de la valeur par défaut 'left', vous pouvez également sélectionner 'center' pour un positionnement central et 'right' pour un positionnement sur le bord droit. Pour la version topbar, en revanche, le positionnement horizontal ne peut pas être ajusté car la barre s'étend sur toute la largeur de l'écran.
  • Pour les variantes floating et floating_reviews, le positionnement vertical peut également être ajusté. Cela se fait par le biais de la valeur de 'yOffset'. Il suffit de remplacer le 0 par un nombre quelconque de pixels pour déplacer le Trustbadge mobile vers le haut. De même, le positionnement vertical ne peut être défini individuellement pour la variante topbar. La variante est fixée au bord supérieur de l'écran.
Outre ces variantes de Trustbadge développées pour les appareils mobiles, vous avez également la possibilité d’utiliser les variantes custom ou custom_reviews dans l’affichage mobile de votre boutique. Dans cet article, nous expliquons comment vous pouvez configurer ces variantes pour l’affichage mobile : Comment paramétrer l’affichage mobile du Trustbadge®?

Paramètres supplémentaires

Positionnement flexible de la Trustcard (Custom-Checkout)

Bien entendu, vous pouvez également positionner librement la Trustcard sur la page de confirmation de commande. Ce paramètre n'est pas lié aux variantes custom et custom_reviews, mais peut également être utilisé avec les variantes reviews et default. Il suffit de suivre les instructions ci-dessous.

Étape 1: Créez un élément DIV sur la page de confirmation de commande

Vous devez d'abord créer un élément DIV à l'endroit de votre page de confirmation de commande où la Trustcard doit apparaître. Il suffit d'insérer la ligne de code suivante à l'endroit approprié :

<div id="customCheckoutDiv"></div>

L'ID par défaut de l'élément DIV est customCheckoutDiv. Vous pouvez bien sûr remplacer cet ID par un nom de votre choix. Dans ce cas, n'oubliez toutefois pas d'utiliser cet ID dans le code du Trustbadge à l'étape suivante.

Étape 2 : Liez le code du Trustbadge à l'élément DIV

Sous la ligne de code 'variant', insérez la ligne de code suivante dans le code de votre Trustbadge :

'customCheckoutElementId': 'customCheckoutDiv',

Le paramètre "'customCheckoutElementId' est le marqueur de référence pour l'élément DIV créé à l'étape 1 et l'associe au code de votre Trustbadge. Si vous avez effectué un changement d'ID à l'étape 1, veuillez remplacer la valeur customCheckoutDiv également dans ce paramètre par l'ID de l'élément DIV que vous avez défini.

Vous avez maintenant placé avec succès la Trustcard à l'endroit que vous avez choisi. Testez maintenant le réglage en passant une commande test dans votre boutique. Si la Trustcard apparaît dans la position souhaitée, l'intégration est réussie.


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

Utilisateurs qui ont trouvé cela utile : 4 sur 12