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 :
- 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"
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.
- 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.
- 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 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.
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.
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>
- 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. |
<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 désormais intégré dans votre boutique avec toutes ses fonctionnalités.
É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® ?