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

Bon à savoir : Nous proposons des plug-ins pour de nombreuses solutions e-commerce ainsi que des conseils d'intégration spécifiques. Un aperçu de ces systèmes est disponible ici: Comment intégrer le Trustbadge® ? Il n’existe pas encore de guide d’utilisation spécifique pour votre solution e-commerce ? Dans ce cas, veuillez utiliser le tutoriel suivant et nous informer également par e-mail afin que nous puissions vous fournir des instructions personnalisées pour votre solution e-commerce à l'avenir.

Bien entendu, vous pouvez intégrer le Trustbadge® dès le premier jour de votre adhésion à Trusted Shops. Tout ce dont vous avez besoin est l'URL de votre boutique ou votre identifiant Trusted Shops que vous avez reçu avec votre e-mail de bienvenue, un tout petit peu d’expérience en codage et le guide général d'intégration ci-après : 

Étape 1: Générez votre code de Trustbadge personnel

Pour commencer l'intégration, vous devez d'abord obtenir un code de Trustbadge individuel. Cela permet de s'assurer qu’une fois installé, le Trustbadge affiche également les informations relatives à votre boutique, telles que la marque de confiance et les étoiles d’évaluation. Le code peut être généré en utilisant votre identifiant Trusted Shops ou l'URL de votre boutique. Il suffit de saisir l'un ou l’autre dans le champ de saisie de ce site web. Votre code de Trustbadge personnel sera alors généré automatiquement.

Pour retrouver votre Trusted Shops-ID commençant par X, cliquez ici et connectez-vous au backend My Trusted Shops pour accéder à votre dashboard. Une fois connecté(e), vous pouvez retrouver la liste de vos domaines et leur Trusted Shops-ID respectifs à droite de votre écran.

Étape 2 : Configurez le code de Trustbadge en fonction de vos besoins

Dans le code de Trustbadge généré, vous pouvez maintenant effectuer certains réglages pour adapter l'affichage du Trustbadge aux conditions particulières de votre boutique. Les paramètres pertinents à cet égard sont ceux qui se trouvent dans la section de code _tsConfig. Nous présentons ci-après les différents paramètres et les ajustements possibles à l'intérieur de ces paramètres.

'yOffset': '0', /* offset from page bottom */

Par défaut, le Trustbadge est affiché dans le coin inférieur droit de votre boutique. Vous pouvez utiliser le paramètre ˈyOffsetˈ pour déplacer le Trustbadge le long de l'axe vertical. Pour ce faire, il suffit de remplacer le chiffre 0 par le nombre de pixels souhaités desquels le Trustbadge doit être déplacé vers le haut.

Par défaut, le Trustbadge est affiché à 54 px du bord inférieur. Ainsi, si vous souhaitez déplacer le Trustbadge vers le bas, vous pouvez entrer une valeur négative correspondante. Toutefois, ce chiffre ne devrait pas être inférieur à -54.
'variant': 'reviews', /* default, reviews, custom, custom_reviews */

Le Trustbadge existe en quatre variantes. Avec le paramètre ˈvariantˈ , vous déterminez laquelle de ces variantes doit être appliquée dans votre boutique. La variante « reviews » est sélectionnée par défaut. Si vous préférez une autre variante, remplacez la valeur « reviews » dans la ligne de code par « default », « custom_reviews » ou « custom ». Les quatre variantes se présentent de la façon suivante :

  • reviews : Dans cette variante, vos étoiles d’évaluation et votre marque de confiance sont affichées.

trustbadge_trustmark_reviews_FR.png

  • default : Dans cette variante, la marque de confiance n’est affichée que si votre boutique a été certifiée.

trustbadge_no_reviews_FR.png

  • custom_reviews : Dans cette variante, à l’instar de la variante « reviews », le Trustbadge indique vos étoiles d’évaluation et votre marque de confiance, à la différence près que la variante « custom_reviews » peut être positionnée de manière flexible dans votre boutique.

TB5-custom-trustmark-only_FR.png

  • custom: Dans cette variante, le Trustbadge n’affiche que votre marque de confiance, comme dans la variante « default ». Toutefois, la variante personnalisée peut être positionnée de manière flexible dans votre boutique.

custom.png

Si vous souhaitez utiliser l'une des deux variantes « Custom » et « Custom_reviews » dans votre boutique, il est nécessaire d'apporter des ajustements supplémentaires au code du Trustbadge et au modèle que vous utilisez. Nous expliquons ici plus en détail comment procéder: Quelles sont les variantes d'affichage du Trustbadge® et comment les intégrer dans ma boutique? Le présent tutoriel se concentre sur les variantes « reviews » et « default ».
Utilisez le paramètre ˈvariantˈ pour spécifier le nombre maximum d'éléments que le Trustbadge doit afficher. Pour afficher la marque de confiance, votre boutique doit bien entendu avoir passé le processus de certification avec succès. En outre, les étoiles d’évaluation ne peuvent bien sûr être affichées que si vous avez déjà recueilli des avis site auprès de Trusted Shops. Dans cet article, nous vous expliquons en détail les différents formats de présentation: Qu'est-ce que le Trustbadge® ?
'disableResponsive': 'false', /* deactivate responsive behaviour */

Par défaut, le Trustbadge s'adapte automatiquement à la taille de l'écran utilisé par vos clients. Par exemple, si la largeur de l'écran est de 648 px ou moins, le Trustbadge passe à une variante d'affichage optimisée pour les appareils mobiles. Si vous changez la valeur du paramètre 'disableResponsive' de false à true, cet ajustement automatique est désactivé. Au lieu de cela, la version de bureau du Trustbadge sera également affichée sur les appareils mobiles.

'disableTrustbadge': 'false' /* deactivate trustbadge */

Ce paramètre vous permet d’activer ou de désactiver l’affichage du Trustbadge dans votre boutique. Si vous réglez la valeur du paramètre de false à true, le Trustbadge sera dorénavant caché. Néanmoins, la Trustcard apparaît sur votre page de confirmation de commande, grâce à laquelle vos clients peuvent donner leur consentement aux demandes d'avis et à opter pour la protection de protection des acheteurs.

Étape 3 : Copiez votre code du Trustbadge dans le pied de page de votre modèle de boutique

Ouvrez le template du pied de page que vous utilisez (footer.php ou similaire) sur votre serveur FTP. Copiez ensuite tout le code que vous venez de générer et éventuellement configurer dans le champ ci-dessus. Insérez maintenant le code dans le template de pied de page juste avant la>balise </body>.

Le Trustbadge est donc disponible sur toutes les pages de votre boutique, même sur la page de confirmation de commande. Voilà, c'est presque terminé – il ne manque qu'une dernière étape importante. 

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

Afin d'envoyer des demandes d'avis à vos clients via le Trustbadge et de pouvoir offrir une protection si votre boutique est certifiée, le Trustbadge a besoin d'un petit coup de main. En effet, il faut définir un élément DIV pour reconnaître votre page de confirmation de commande (« page de remerciement ») et transmettre les données nécessaires à la commande. Le Trustbadge ouvre alors automatiquement la Trustcard pour vos visiteurs, qui contient la sécurisation de la commande et/ou le consentement aux demandes d'avis.

website_integration_custom_fr-FR.png

Pour faciliter au maximum la tâche de vos clients et leur éviter de devoir ressaisir inutilement leurs données de commande, les données nécessaires à la protection de l'acheteur et à la demande d'avisdoivent être transférées directement du modèle de votre boutique au Trustbadge. Pour ce faire, insérez le code ci-dessous dans le template de la page de confirmation de commande (finish.tpl, thankyou.php, success.phtml ou similaire) et remplacez les valeurs exemplaires en gras par les variables utilisées dans votre système de boutique afin que l'élément DIV se remplisse de manière dynamique avec les données de commande exactes.

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2020-05-21-001</span>
<span id="tsCheckoutBuyerEmail »>mon.client@mail.fr</span>
<span id="tsCheckoutOrderAmount">4005.95</span>
<span id="tsCheckoutOrderCurrency">EUR</span>
<span id="tsCheckoutOrderPaymentType">PAIEMENT D’AVANCE</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
</div> 

Dans les pages qui suivent, nous expliquons brièvement les paramètres de transfert indiqués dans l'exemple de code afin que vous puissiez vous occuper de fournir les données requises.

<span id="tsCheckoutOrderNr">2020-05-21-001</span>

Obligatoire. Le numéro de commande est transféré via ce paramètre. Cela est nécessaire pour pouvoir attribuer une commande effective à un avis client. Si aucun numéro de commande n'est disponible, il est également possible de transférer un timbre horodateur de la commande concernée, à condition que cette référence soit unique.

<span id="tsCheckoutBuyerEmail »>mon.client@mail.fr</span>

Obligatoire. Ce paramètre transmet l'adresse électronique de votre client. Cela est nécessaire pour pouvoir envoyer à vos clients une invitation à l'évaluation ou un e-mail de confirmation de protection quelques jours après la commande.

<span id="tsCheckoutOrderAmount">4005.95</span>

Facultatif, mais obligatoire si vous avez la marque de confiance. Ce paramètre est utilisé pour transférer le montant total 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>

Facultatif, mais obligatoire si vous avez la marque de confiance. Ce paramètre permet de transférer le code de devise de la commande selon la norme ISO 4217. Si vous n'offrez qu'une seule devise, vous pouvez également coder cette valeur en dur.

<span id="tsCheckoutOrderPaymentType">PAIEMENT D’AVANCE</span>

Facultatif, mais obligatoire si vous avez la marque de confiance. Ce paramètre est utilisé pour transférer le mode de paiement utilisé. Une simple chaîne de texte suffit ici. Si le mode de paiement n'est pas (plus) disponible au moment de l'exécution de la commande, vous pouvez utiliser le mot OTHER codé en dur comme valeur pour ce paramètre.

<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>

Facultatif, mais nécessaire si les demandes d'avis doivent être envoyées en fonction de la date de livraison prévue. C'est un paramètre qui est utilisé pour transférer la date de livraison prévue. Comme vous pouvez le voir dans l'exemple 2020-05-24, le format de date YYYY-MM-DD est pris en charge.

Étant donné que les données dynamiques de la commande doivent être transférées via l'élément DIV, vous ne devez pas copier l'exemple de code ci-dessus sans le modifier dans votre page de confirmation de commande. Comme expliqué ci-dessus, vous devez plutôt remplacer les valeurs en gras de chaque paramètre de transfert par les variables correspondantes dans le langage de programmation utilisé par votre système de boutique. 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>

Dans cet exemple, $customer_email correspond à l'adresse e-mail du client dans votre système de boutique. Pour la définition exacte des variables à utiliser, veuillez vous référer à la documentation de votre système de boutique, car celles-ci varient d'un système à l'autre. Il n’y a malheureusement pas de règle universelle à ce sujet. Une fois que vous avez personnalisé l'exemple de code susmentionné, vous pouvez le copier comme décrit ci-dessus et le coller dans le modèle de votre page de confirmation de commande.

Étape 5 : Testez le Trustbadge dans votre boutique

Vous pouvez maintenant tester le fonctionnement de votre Trustbadge en déclenchant une commande de test depuis votre site. Faites attention à ce que la Trustcard apparaisse à l'issue de la commande. En cliquant sur le bouton correspondant, vos clients pourront ainsi demander de recevoir une invitation à l’évaluation. Si tout se passe bien, vous avez terminé l’intégration du Trustbadge avec succès. Désormais, vos clients ont la possibilité de recevoir un rappel à soumettre un avis immédiatement après avoir effectué leur achat. Dès que votre boutique sera certifiée, vos clients bénéficieront également de la protection des acheteurs. Vérifiez également dans la console de navigateur si le conteneur DIV "trustedShopsCheckout" est désormais complètement et correctement rempli.

Avez-vous besoin d'une aide supplémentaire pour l'intégration du Trustbadge en plus de ce manuel ? Contactez-nous par e-mail à members@trustedshops.com ou par téléphone au 01.70.70.70.50.

Outre l'intégration standard du Trustbadge dans les variantes d'affichage « reviews » et « default » décrites dans ce tutoriel, il existe également d'autres variantes, que nous présentons en détail dans cet article: Quelles sont les variantes d'affichage du Trustbadge® et comment les intégrer dans ma boutique?

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

Utilisateurs qui ont trouvé cela utile : 2 sur 2