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

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.

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.

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.

1. Open your footer file within your e-commerce platform. 

2. Copy the entire prepared Trustbadge code to your clipboard. 
3. 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;">
<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: 

<span id="tsCheckoutBuyerEmail"><?php echo $customer_email; ?><span>

2. Open the template file of your order confirmation page.

3. Copy the entire prepared DIV element code to your clipboard. 
4. 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 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®?