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 :
- Trouver votre identifiant Trusted Shops
- Configurer le code du Trustbadge
- Intégrer le code du Trustbadge® dans votre site web
- Définir le transfert de données pour la Trustcard
- 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.
- Connectez-vous à votre compte My Trusted Shops. Le tableau de bord s’ouvre.
- Votre identifiant Trusted Shops (« TS-ID ») se trouve dans la colonne de droite du tableau de bord.
É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>
- Dans le code d’intégration, trouvez la ligne de code suivante :
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
- Remplacez la zone en gras YOUR_TSID par votre identifiant Trusted Shops.
Vous 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.
- Ouvrez votre fichier de pied de page (« Footer ») dans votre solution e-commerce.
- Copiez tout le code du Trustbadge préparé dans votre cache.
- 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.
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.
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
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>
- 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 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.
- Ouvrez le fichier Template de votre page de confirmation de commande.
- Copiez l’intégralité du code de l’élément DIV dans votre presse-papier.
- 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.
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>
<!-- 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>
- 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. |
<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.
- Ouvrez le fichier Template de votre page de confirmation de commande.
- Copiez l’intégralité du code de l’élément DIV dans votre presse-papier.
- 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.
É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.
Cet article vous aidera à vérifier l’intégration de votre Trustbadge : Comment vérifier l’intégration de mon Trustbadge® ?