Comment puis-je intégrer le Trustbadge dans ma boutique sans plug-in ?

Il existe des plug-ins pour de nombreuses solutions e-commerce. Ces plug-ins vous aident à intégrer les produits auxquels vous avez souscrit dans votre site web. Cela rend l’intégration très simple et confortable.
Vérifiez dans cet aperçu si un plug-in est disponible pour votre solution e-commerce : Intégrez Trusted Shops à votre boutique
 
  • Un plug-in est-il disponible ? Dans ce cas, veuillez suivre les instructions d’intégration que vous avez trouvées à l’aide de l’aperçu lié ci-dessus.
  • Aucun plug-in n’est disponible ? Dans ce cas, revenez à ce guide et suivez les étapes décrites ci-dessous.

Vous pouvez intégrer le Trustbadge® dès le premier jour de votre adhésion à Trusted Shops. Pour ce faire, suivez simplement les cinq étapes suivantes :

  1. Trouver votre identifiant Trusted Shops
  2. Configurer le code du Trustbadge
  3. Intégrer le code du Trustbadge® dans votre site web
  4. Définir le transfert de données pour la Trustcard
  5. Vérifier l’intégration du Trustbadge

Étape 1 : Trouver votre identifiant Trusted Shops

Pour l’intégration du Trustbadge, vous avez besoin de votre identifiant Trusted Shops individuel. Vous trouverez votre identifiant Trusted Shops dans My Trusted Shops.

  1. Connectez-vous à votre compte My Trusted Shops. Le tableau de bord s’ouvre.
  2. Votre identifiant Trusted Shops (« TS-ID ») se trouve dans la colonne de droite du tableau de bord.

01_FR.png

Étape 2 : Configurer le code du Trustbadge

Le code d’intégration suivant constitue la base de l’intégration de votre Trustbadge :

<script async 
data-desktop-y-offset="0"
data-mobile-y-offset="0"
data-desktop-disable-reviews="false"
data-desktop-enable-custom="false"
data-desktop-position="right"
data-desktop-custom-width="156"
data-desktop-enable-fadeout="false"
data-disable-mobile="false"
data-disable-trustbadge="false"
data-mobile-custom-width="156"
data-mobile-disable-reviews="false"
data-mobile-enable-custom="false"
data-mobile-position="left"
data-mobile-enable-topbar="false"
data-mobile-enable-fadeout="true"
data-color-scheme="light"
charset="UTF-8"
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
</script>
  1. Dans le code d’intégration, trouvez la ligne de code suivante :
    src="//widgets.trustedshops.com/js/YOUR_TSID.js"> 
  2. Remplacez la zone en gras YOUR_TSID par votre identifiant Trusted Shops.

02_FR.pngVous avez ainsi créé votre code Trustbadge®. Si vous ne procédez à aucune autre modification, le Trustbadge...

... affichera vos avis collectés et, une fois la validation obtenue, votre Marque de confiance.

... s’affichera à droite dans l’affichage de bureau et à gauche dans l’affichage mobile.

... s’affichera 54 pixels au-dessus du bas de l’écran dans l’affichage de bureau et 10 pixels au-dessus du bas de l’écran dans l’affichage mobile.

À ce stade, vous avez deux possibilités :

  • Êtes-vous d’accord avec ces paramètres ? Si oui, passez directement à étape 3.
  • Vous souhaitez afficher le Trustbadge différemment ou l’intégrer à un autre endroit de votre boutique ? Dans ce cas, poursuivez la configuration du code du Trustbadge® à l’aide de cet article : Comment adapter le Trustbadge® à mes besoins ? Revenez ensuite à cet article et poursuivez avec étape 3.

Étape 3 : Intégrer le code du Trustbadge® dans votre site web

Vous avez configuré le code du Trustbadge comme vous le souhaitez ? Il ne vous reste alors plus qu’à l’intégrer dans votre site web.

  1. Ouvrez votre fichier de pied de page (« Footer ») dans votre solution e-commerce.
Le fichier Footer s’appellera probablement footer.php ou quelque chose de similaire.
  1. Copiez tout le code du Trustbadge préparé dans votre cache. 
  2. Insérez le code du Trustbadge® juste avant la balise de fermeture </body> dans le fichier Footer. 

Le Trustbadge est maintenant disponible sur toutes les pages de votre boutique, même sur la page de confirmation de commande.

Étape 4 : Définir le transfert de données pour la Trustcard

Une fonctionnalité importante du Trustbadge est la Trustcard. La Trustcard s’ouvre après le passage en caisse dans votre boutique. Grâce à la Trustcard, vos clients peuvent donner leur consentement pour recevoir une invitation d’avis et/ou protéger leur commande à l’aide de la Protection acheteur.

03_FR.png

Pour que la Trustcard s’ouvre au bon moment, le Trustbadge doit pouvoir reconnaître la page de confirmation de commande. Pour ce faire, intégrez l’élément DIV ci-dessous dans le modèle de la page de confirmation de commande.

Cet élément DIV permet en même temps de transmettre au Trustbadge les données de votre boutique nécessaires à la Protection acheteur et à l’envoi d’une invitation d’avis.

La base de l’élément DIV est le code suivant :

<div id="trustedShopsCheckout" style="display: none;"> 
<span id="tsCheckoutOrderNr">2020-05-21-001</span>
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span>
<span id="tsCheckoutOrderAmount">4005.95</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">VORKASSE</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
</div>
Les données de commande doivent être renseignées et transmises de manière dynamique via l’élément DIV. Pour ce faire, ne copiez pas l’exemple de code ci-dessus tel quel dans votre page de confirmation de commande.
  1. Remplacez les valeurs exemplaires en gras des paramètres. Pour cela, utilisez les variables correspondantes dans le langage de programmation utilisé par votre solution e-commerce. Le tableau suivant vous explique les différents paramètres : 
Paramètres Fonction Remarques
<span id="tsCheckoutOrderNr">2020-05-21-001</span> Transfert du numéro de commande  
<span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> Transfert de l’adresse e-mail de votre clientèle  
<span id="tsCheckoutOrderAmount">4005.95</span> Transfert de la valeur de la commande Comme vous pouvez le voir dans l’exemple 4005.95, le séparateur décimal est un point. Deux décimales sont également transférées.
<span id="tsCheckoutOrderCurrency">EUR</span> Transfert de l’abréviation de la devise de la commande Pour les abréviations de devises, la norme ISO 4217 est prise en charge. Si vous n’offrez qu’une seule devise, vous pouvez coder cette valeur en dur.
<span id="tsCheckoutOrderPaymentType">VORKASSE</span> Transfert du mode de paiement utilisé  
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span> Transfert de la date de livraison prévue Obligatoire si vous souhaitez envoyer des demandes d’avis en fonction de la date de livraison prévue. Le format de date YYYY-MM-DD est pris en charge.
Dans le langage de programmation PHP, le transfert de l’adresse électronique pourrait p. ex. ressembler à ceci :
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

$customer_email correspond à l’adresse e-mail du client dans votre solution e-commerce. Pour la définition exacte des variables à utiliser, veuillez vous référer à la documentation de votre solution e-commerce, car celles-ci varient d’un système à l’autre. Il n’y a malheureusement pas de règle universelle pour cette manipulation.
  1. Ouvrez le fichier Template de votre page de confirmation de commande. 
Le fichier Template s’appellera probablement finish.tpl, thankyou.php, success.phtml ou similaire.
  1. Copiez l’intégralité du code de l’élément DIV dans votre presse-papier. 
  2. Insérez le code dans le fichier Template de votre page de confirmation de commande. 

Ainsi, la Trustcard s’ouvrira sur la page de confirmation de commande après le passage en caisse. Le Trustbadge est désormais intégré dans votre boutique avec toutes ses fonctionnalités.

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. Pour en savoir plus : Comment puis-je placer la Trustcard ailleurs ?

Étape 5 : Vérifier l’intégration du Trustbadge

Testez maintenant le fonctionnement de votre Trustbadge en déclenchant une commande test dans votre boutique. Si le Trustbadge a été correctement intégré, la Trustcard apparaît à la fin du processus de paiement.

Cet article vous aidera à vérifier l’intégration de votre Trustbadge : Comment vérifier l’intégration de mon Trustbadge® ?

N’hésitez pas à contacter notre SAV à l’adresse members@trustedshops.com si vous avez des questions ou si vous rencontrez des difficultés avec votre intégration.
Avez-vous établi une politique de sécurité du contenu pour votre site web ? Dans ce cas, vérifiez si vous devez adapter votre politique suite à l’intégration du Trustbadge. Cet article peut vous aider à : Comment adapter ma politique de sécurité du contenu après avoir intégré le Trustbadge® ?

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

Utilisateurs qui ont trouvé cela utile : 18 sur 31