Intégrer le Trustbadge pas à pas

Personnaliser l’affichage du Trustbadge

Choisissez où vous souhaitez afficher le Trustbadge® dans votre boutique en ligne

Trustbadge custom_reviews

Vous préférez afficher le Trustbadge® non pas en bas à droite mais plutôt à un autre endroit de votre boutique ?
Personnalisez le Trustbadge® à l'aide de ce guide.

Étape 1 : Saisissez ci-dessous l'URL de votre boutique en ligne afin de générer votre code personnel pour le Trustbadge®.


 

Étape 2 : Cherchez dans le code d'intégration généré ci-dessus la ligne suivante :

'variant': 'reviews', /* reviews, default, custom, custom_reviews */
Remplacez la valeur du paramètre par 'custom_reviews' ou 'custom', selon que vous souhaitiez afficher l'évaluation actuelle de votre boutique avec le Trustbadge® ou uniquement la marque de confiance.

Remarque: La variante 'custom' est disponible pour les magasins qui ont la marque de confiance de Trusted Shops. Elle n'est visible que lorsque la marque de confiance de Trusted Shops est active. Exécutez la commande

trustbadge.showIntegrationPlaceholder ();

dans la console de développement de votre navigateur pour obtenir une prévisualisation.

Étape 3 : Saisissez le code suivant à l’endroit où le Trustbadge®doit apparaître, p. ex. dans l'en-tête ou dans le pied de  page:

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

Avec les propriétés de CSS 'width' et 'height' dans ce code HTML, vous déterminez la taille du Trustbadge à afficher. Les deux valeurs doivent être indiquées. Notez le rapport original des diamantions (largeur: hauteur) du Trustbadge de 2:1 dans la variante 'custom_reviews' ou 1: 1 pour la variante 'custom'.

Étape 4 :
Cherchez dans le code d'intégration généré ci-dessus la ligne suivante

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

et ajoutez ‚ MyCustomTrustbadge‘ en tant que valeur pour le paramètre 'customElementId' :

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

Étape 5: Pour définir la position de la trustcard, utilisez les paramètres dans la lignetrustcardDirection et entrez au choix 'topLeft' (en haut à gauche), 'topRight' (en haut à droite), 'bottomLeft' (en bas à gauche) ou 'bottomRight' (en bas à droite).

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

Étape 6 : Le Trustbadge® a encore besoin d'un petit coup de pouce pour permettre la collecte automatique des avis clients et pour pouvoir proposer la garantie Trusted Shops aux visiteurs. Pour ce faire, ajoutez une balise <div> afin d’identifier votre page de confirmation de commande (ou page de remerciement). Lorsque le visiteur arrivera sur cette page, Le Trustbadge® ouvrira alors automatiquement la trustcard qui permet au visiteur de souscrire à la garantie de remboursement et/ou de donner son autorisation pour recevoir un rappel pour laisser un avis.  

Dans la mesure où cela n'a pas encore été fait, veuillez maintenant placer la balise <div> sur la page de confirmation de commande :

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2016-05-21_001</span>
<span id="tsCheckoutBuyerEmail">my-customer@mail.test</span>
<span id="tsCheckoutOrderAmount">4105.95</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">WIRE TRANSFER</span>
<span id="tsCheckoutOrderEstDeliveryDate">2016-05-24</span></div> 

Veuillez remplir les valeurs des paramètres à l'aide du langage de programmation utilisé dans le système de votre boutique. En PHP, la transmission de l'adresse email peut par exemple ressembler à ceci, $customer_email, correspondant à l'adresse email du client, enregistrée dans le système de votre boutique (vous trouverez la définition et la dénomination exacte des paramètres dans la documentation du système de votre boutique - celles-ci ne dépendent pas de nous) :

<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

La trustcard apparaît à présent sur la page de confirmation de commande et  propose aux visiteurs de souscrire à la garantie de remboursement Trusted Shops.

Astuce: Si le Trustbadge apparaît en bas à droite de votre cite (coin inférieur droit), vérifiez si vous avez réellement indiqué la Variante 'custom' ou 'custom_reviews' dans le code d'intégration généré, si l'ID indiquée dans le paramètre 'customElementId' existe effectivement et si vous avez définir la hauteur et la largeur comme dans Étape 3 décrite ci-dessus.
Dans la console du développeur de votre navigateur, vous recevrez des messages avec d'autres informations dans ces cas.


Personnaliser la version mobile du Trustbadge

Par défaut, le Trustbadge est affiché sous la forme d’une barre en tête de page sur les écrans de petite taille.

Il est possible de modifier les paramètres de configuration « responsifs » pour modifier la présentation et la position du Trustbadge.

Option “flottante”

Afin de bénéficier de notre nouvelle option “flottante”, il vous suffit d’ajouter le code suivant comme nouveau paramètre dans la configuration de votre Trustbadge.

'responsive': {'variant': 'floating'}

Si vous souhaitez afficher vos avis site dans le Trustbadge®, saisissez la valeur "floating_reviews" pour le paramètre "variant". Si vous ne souhaitez afficher que la marque de confiance, saisissez simplement "floating" pour le paramètre "variant".

Positionnement différent entre les versions mobiles et bureaux.

'responsive': {'variant': 'custom', 'customElementId': 'myMobileCustomTrustbadge'}

Les variantes “custom” et “custom_reviews” sont les valeurs disponibles dans l’objet pour “variant”.
Insérez le code HTML suivant où vous souhaitez afficher le Trustbadge®, par exemple dans le header ou le footer de la page:

<div id="myMobileCustomTrustbadge" style="width:100px;height:50px"></div>

Utilisez les propriétés CSS, “largeur” et “hauteur” du code HTML pour définir la taille d’affichage du Trustbadge. Les deux valeurs doivent être définies. De plus, il est important de conserver le ratio (largeur:hauteur) d’origine pour la taille, 2:1 pour la variante ‘custom_reviews’ ou 1:1 pour la variante ‘custom’.
 
 
 

Personnalisez l'affichage de la Trustcard

La souscription de la garantie Trusted Shops ou l'inscription pour la récolte des évaluations sur la page de confirmation de commandes peut également être affichée librement.

Étape 1 : Créez sur votre page de confirmation de commande à l'endroit souhaité un container <div> vide, dans lequel la Trustcard devra être affichée. Attribuez un identifiant unique à ce container <div>, par exemple :

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

Étape 2 : Dans le code du Trustbadge ajoutez dans le champ _tsConfig comme valeur de paramètre supplémentaire 'customCheckoutElementId': 'customCheckoutDiv' et ajoutez à l'identifiant unique que vous avez choisi à la première étape, comme valeur de paramétrage 'customCheckoutElementId' (dans l'exemple cela serait 'customCheckoutDiv').