How can I integrate the Trustbadge in my shop without a plugin?

Plugins exist for many e-commerce platforms. These plugins help you integrate the products you've booked into your website. This makes integration very easy and convenient.
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:

  1. Find your Trusted Shops ID
  2. Configure the Trustbadge code
  3. Integrate the Trustbadge code into your website
  4. Define data transfer for the Trustcard
  5. 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.

  1. Log in to My Trusted Shops. The dashboard opens.
  2. Find your Trusted Shops ID ("TS ID") in the right column of the dashboard.

01_EN.png

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>
  1. Find the following line of code within the integration code:
    src="//widgets.trustedshops.com/js/YOUR_TSID.js">
  2. Replace the bold section YOUR_TSID with your Trusted Shops ID.

02_EN.pngYou 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.

  1. Open your footer file within your e-commerce platform. 
The footer file will probably be called footer.php or something similar.
  1. Copy the entire prepared Trustbadge code to your clipboard. 
  2. 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.

03_EN.png

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;">
<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>

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.

  1. 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">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.
In the programming language PHP, for example, transfer of the e-mail address could look like this: 
<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.
  1. Open the template file of your order confirmation page.
The template file will probably be called finish.tpl, thankyou.php, success.phtml or something similar.
  1. Copy the entire prepared DIV element code to your clipboard. 
  2. 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.

You don't want the Trustcard to open as a popup? Then, you can assign it a fixed position on your order confirmation page. Learn more here: How can I place the Trustcard elsewhere?

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 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®?


Was this article helpful?

18 out of 31 found this helpful