Check whether a plugin is available for your e-commerce platform in this overview: Integrate Trusted Shops into your shop
- Is a plugin available? If yes, please follow the integration instructions that you found using the aforementioned overview.
- Is no plugin available? Then return to this guide and follow the steps described below.
You can integrate the Trustbadge® on the first day of your Trusted Shops membership. Only five steps are necessary:
- Find your Trusted Shops ID
- Configure the Trustbadge code
- Integrate the Trustbadge code into your website
- Define data transfer for the Trustcard
- Check Trustbadge integration
Step 1: Find your Trusted Shops ID
You need your individual Trusted Shops ID for Trustbadge integration. You can find your Trusted Shops ID in My Trusted Shops.
- Log in to My Trusted Shops. The dashboard opens.
- Find your Trusted Shops ID ("TS ID") in the right column of the dashboard.
Step 2: Configure the Trustbadge code
The basis for your Trustbadge integration is the following integration code:
- Find the following line of code within the integration code:
- Replace the bold section YOUR_TSID with your Trusted Shops ID.
You have now created your Trustbadge code. If you do not make any further adjustments, the Trustbadge will...
... show your collected reviews and – after successful certification – your Trustmark.
... be placed on the right in desktop view and on the left in mobile view.
... be displayed 54 pixels above the bottom of the screen in the desktop view and 10 pixels above the bottom of the screen in the mobile view.
At this point, you have two options:
- Are you okay with these settings? Then go directly to Step 3.
- Would you like to display the Trustbadge differently or integrate it elsewhere in your shop? Then continue the configuration of the Trustbadge code using this article: How do I adapt the Trustbadge® to my requirements? Then return to this article and continue with Step 3.
Step 3: Integrate the Trustbadge code into your website
Have you configured the Trustbadge code according to your needs? Then integrate it into your website.
- Open your footer file within your e-commerce platform.
- Copy the entire prepared Trustbadge code to your clipboard.
- Insert the Trustbadge code into the footer file immediately before the closing </body> tag.
The Trustbadge is then available on every page of your shop, including the order confirmation page.
Step 4: Defining data transfer for the Trustcard
An important functionality of the Trustbadge is the Trustcard. The Trustcard opens in your shop after checkout. Using the Trustcard, your customers can give their consent to receiving a Review Invite and/or protect their order with the Buyer Protection.
In order for the Trustcard to open at the right time, the Trustbadge must be able to recognise the order confirmation page. To do this, integrate the DIV element below into the template of the order confirmation page.
This DIV element is also used to transfer data from your shop to the Trustbadge, which is required for the Buyer Protection and for sending a Review Invite.
The basis for the DIV element is the following code:
<div id="trustedShopsCheckout" style="display: none;">
The order data should be dynamically filled in and transferred via the DIV element. Therefore, do not copy the example code above unchanged into your order confirmation page.
- Replace the example and bold marked values of the parameters. Use the corresponding variables in the programming language used by your e-commerce platform. The following table explains the individual parameters:
|<span id="tsCheckoutOrderNr">2020-05-21-001</span>||Transfer of the order number|
|<span id="tsCheckoutBuyerEmail">email@example.com</span>||Transfer of your customer's e-mail address|
|<span id="tsCheckoutOrderAmount">4005.95</span>||Transfer of the order value||As can be seen in the example 4005.95, the decimal separator is a period and the amount is stated to two decimal places.|
|<span id="tsCheckoutOrderCurrency">EUR</span>||Transfer of the order currency code||The ISO 4217 standard is supported for currency codes. If you only offer one currency, this value can be hard-coded.|
|<span id="tsCheckoutOrderPaymentType">VORKASSE</span>||Transfer of the payment method used|
|<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>||Transfer of the expected delivery date||Required if you want to send review request based on the expected delivery date. The submitted date cannot be later than one year from now. The date format YYYY-MM-DD is supported.|
<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>
$customer_email corresponds with the e-mail address of the customer in your shop system. The exact definition of the variable to be used should be taken from the documentation of your e-commerce platform as it is different from one system to the next. For this reason, we are unfortunately unable to make any generally valid statements.
- Open the template file of your order confirmation page.
- Copy the entire prepared DIV element code to your clipboard.
- Insert the code into the template file of your order confirmation page.
This opens the Trustcard on the order confirmation page after checkout. The Trustbadge is thus integrated into your shop with all its functionalities.
Step 5: Check Trustbadge integration
Now test the function of your Trustbadge by triggering a test order in your shop. If the Trustbadge has been correctly integrated, the Trustcard appears at the end of the checkout process.
This article helps you test your Trustbadge integration: How do I test my Trustbadge® integration?
If you have any questions or problems with your integration, please contact our Customer Success team at firstname.lastname@example.org.
Have you established a Content Security Policy for your website? Then check whether you need to adapt your policy after Trustbadge integration. This article can help you: How do I adjust my Content Security Policy after integrating the Trustbadge®?