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:
<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>
- Find the following line of code within the integration code:
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
- 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 on your website? 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 website, 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 on your website after the 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. For this, you have to integrate a DIV element into the template of the order confirmation page.
This DIV element is also used to transfer data from your website to the Trustbadge, which is required for the Buyer Protection and for the dispatch of a review invite.
The next steps differ depending on whether you only collect service reviews or both service and product reviews with Trusted Shops. Now click on the link that matches your website to continue:
Define data handover for service reviews
The basis for the DIV element is the following code:
<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>
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:
| Parameter | Function | Notes |
| <span id="tsCheckoutOrderNr">2020-05-21-001</span> | Transfer of the order number | |
| <span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> | Transfer of your customer's e-mail address | |
| <span id="tsCheckoutOrderAmount">1.01</span> | Transfer of the order value | As can be seen in the example 1.01, 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 website with all its functionalities.
Define data transfer for service and product reviews
The basis for the DIV element is the following code:
<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>
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:
| Parameter | Function | Notes |
| <span id="tsCheckoutOrderNr">2020-05-21-001</span> | Transfer of the order number | |
| <span id="tsCheckoutBuyerEmail">mein.kunde@mail.de</span> | Transfer of your customer's e-mail address | |
| <span id="tsCheckoutOrderAmount">1.01</span> | Transfer of the order value | As can be seen in the example 1.01, 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 class="tsCheckoutProductUrl">http://www.shop.url/product_page.html</span> | Transfer of the complete URL of the product detail page | |
| <span class="tsCheckoutProductName">Product Name</span> | Transfer of the product name | |
| <span class="tsCheckoutProductSKU">0123456789</span> | Transfer of the Stock Keeping Unit (SKU), i.e. the article number you have assigned | |
| <span class="tsCheckoutProductImageUrl">http://www.shop.url/image.png</span> | Transfer of the URL of a product image | Optional, but highly recommended. The product image is displayed in the review questionnaire and makes it easier for your customers to remember the product. This increases the conversion rate of your review requests. |
| <span class="tsCheckoutProductGTIN">0123456789</span> | Transfer of the Global Trade Item Number (GTIN) | Optional, but required when using Google integration. Since the GTIN uniquely identifies a product worldwide, the transfer of the GTIN makes it especially easy for Google to assign your collected product reviews to the right product. |
| <span class="tsCheckoutProductMPN">0123456789</span> | Transfer of the Manufacturer Part Number (MPN) | Optional. The parameter is also used to clearly identify the product. |
| <span class="tsCheckoutProductBrand">My Great Brand</span> | Transfer of the product brand | Optional. Just like the GTIN and the MPN, the product brand also helps to clearly identify the product and correctly transfer the collected reviews to Google. |
<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 website with all its functionalities.
Step 5: Check Trustbadge integration
Now test the function of your Trustbadge by triggering a test order on your website. 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 members@trustedshops.com.
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®?