Comment intégrer le Trustbadge® sur mon site web sans plugin ?

Il existe des plugins pour de nombreuses solutions e-commerce. Ces plugins 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 plugin est disponible pour votre solution e-commerce : Intégrez Trusted Shops à votre boutique
 
  • Un plugin 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 plugin 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.
  • Souhaitez-vous afficher le Trustbadge différemment ou l’afficher à un autre endroit de votre site web ? 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 s'affiche sur chaque page de votre site web, y compris 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 se déploie sur votre site web après la validation de la commande. 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 cela, vous devez intégrer un élément DIV sur le modèle de la page de confirmation de commande.

Cet élément DIV est également utilisé pour transférer des données de votre site web vers le Trustbadge, ce qui est nécessaire pour l'activation de la Protection acheteur et l’envoi d’une invitation d’avis.

Les étapes suivantes diffèrent si vous ne recueilliez que des avis service ou des avis produit et service avec Trusted Shops. Cliquez maintenant sur le lien correspondant à votre site Web pour continuer :

Définir le transfert des données pour les avis service

Les étapes suivantes indiquent comment paramétrer le transfert des données pour la collecte des avis service. Souhaitez-vous recueillir des avis produit en plus des avis service ? Procédez de la manière suivante : Définir le transfert des données pour les avis service et produit

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">1.01</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">1.01</span> Transfert de la valeur de la commande Comme vous pouvez le voir dans l’exemple 1.01, 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. La date transférée ne peut pas être postérieure à un an. 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 ainsi intégré sur votre site web 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 ?

Définir le transfert des données pour les avis service et produit

Les étapes suivantes indiquent comment paramétrer le transfert des données pour les avis service et produit. Voulez-vous recueillir uniquement des avis service ? Procédez de la manière suivante : Définir le transfert des données pour les avis service

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">1.01</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">VORKASSE</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>

<!-- product reviews start -->
 <!-- for each product in the basket full set of data is required -->
 <span class="tsCheckoutProductItem">
 <span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span>
 <span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span>
 <span class="tsCheckoutProductName">Product Name</span>
 <span class="tsCheckoutProductSKU">0123456789</span>
 <span class="tsCheckoutProductGTIN">0123456789</span>
 <span class="tsCheckoutProductMPN">0123456789</span>
<span class="tsCheckoutProductBrand">My Great Brand</span>
 </span>
 <!-- product reviews end -->
</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">1.01</span> Transfert de la valeur de la commande Comme vous pouvez le voir dans l’exemple 1.01, 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. La date transférée ne peut pas être postérieure à un an. Le format de date YYYY-MM-DD est pris en charge.
<span class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span> Transfert de l’URL de la page produit  
<span class="tsCheckoutProductName">Product Name</span> Transfert du nom du produit  
<span class="tsCheckoutProductSKU">0123456789</span> Transfert de l’unité de gestion des stocks (SKU), c’est-à-dire le numéro d’article attribué au produit  
<span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span> Transfert de l’URL de l’image produit Facultatif, mais fortement recommandé. L’image produit figure sur le questionnaire d’avis et permet à vos clients de se souvenir plus facilement du produit acheté. Cela augmente le taux de conversion de vos demandes d’avis.
<span class="tsCheckoutProductGTIN">0123456789</span> Transfert du Global Trade Item Number (GTIN) Facultatif, mais requis lors de l’utilisation de l’intégration Google. Étant donné que le GTIN identifie de manière unique un produit à l’échelle mondiale, le transfert du GTIN permet à Google d’attribuer facilement les avis produit que vous avez recueillis au bon produit.
<span class="tsCheckoutProductMPN">0123456789</span> Transfert du Numéro de pièce du fabricant (MPN) Facultatif. Ce paramètre est également utilisé pour identifier clairement le produit.
<span class="tsCheckoutProductBrand">My Great Brand</span> Transfert de la marque du produit Facultatif. Tout comme le GTIN, la marque du produit permet d’identifier clairement le produit et de transférer correctement les avis recueillis à Google.
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 ainsi intégré sur votre site web 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 passant une commande test sur votre site web. Si le Trustbadge a été correctement intégré, la Trustcard apparaît à la fin du processus de paiement.

03_FR.png

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 : 20 sur 33