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

A note in advance: We offer plugins and integration assistance for many shop software systems. An overview of these systems can be found here: How can I start with the Trustbadge® integration? Is there no separate manual for your shop software yet? Then please use the following tutorial and also let us know by e-mail so that we can also provide an individual manual for your shop software in the future.

You can integrate the Trustbadge® on the first day of your Trusted Shops membership. All that you need is your Shop-URL, your Trusted Shops ID that you received with your welcome e-mail, a little experience with code and the following overall integration guideline. 

Step 1: Generate your personal Trustbadge code

To start with the integration, you first need an individual Trustbadge code. This ensures that, after integration, the Trustbadge displays information such as the trustmark and star ratings that are related to your shop. You can generate your Trustbadge code with your Trusted Shops ID or your Shop-URL on this website.

You can find your Trusted Shops ID (starting with X...) in your dashboard in the My Trusted Shops backend. To do this, first log in to My Trusted Shops here. After logging in, you will be taken directly to the dashboard. In the right column of the dashboard, your shops which are registered with Trusted Shops are listed, with their respective Trusted Shops ID.

Step 2: Configure the Trustbadge code based on your individual requirements

A number of settings can be adjusted within the generated Trustbadge code to adapt the display of the Trustbadge to the individual conditions of your shop. The parameters that can be found in the code section _tsConfig are relevant for this purpose. In the following we will present the individual parameters and the adjustments possible within them.

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

By default the Trustbadge is displayed in the lower right corner of your shop. Using the parameter ˈyOffsetˈ you can shift the Trustbadge on the vertical axis. To do this, simply change the 0 to the number of pixels that the Trustbadge should be shifted upwards.

By default, the Trustbadge is displayed 54 px from the lower edge. If you would like to display the Trustbadge lower, corresponding minus values can be entered. However the value should not be lower than -54.

'variant': 'reviews', /* default, reviews, custom, custom_reviews */

The Trustbadge exists in four variants. The parameter ˈvariantˈ allows you to determine which of the variants is displayed in your shop. By default, the variant selected is ‘reviews.’ If you prefer a different variant, please replace the value ‘reviews’ in the code line with ‘default,’ ‘custom_reviews’ or ‘custom.’ The four variants are as follows:

  • reviews: In this variant, your star ratings and trustmark are shown.

trustbadge_trustmark_reviews_EN.png

  • default: Once your shop has been certified, this variant only shows your trustmark.

trustbadge_no_reviews_EN.png

  • custom_reviews: In this variant the Trustbadge shows your star ratings and trustmark in the same way as the ‘reviews’ variant. However, the variant ‘custom_reviews’ allows flexible positioning in your shop.

TB5-custom-trustmark-only_EN.png

  • custom: In this variant the Trustbadge shows only your trustmark, in the same way as the ‘default’ variant. However, the variant ‘custom’ allows flexible positioning in your shop.

custom.png

 

If you would like to use one of the two variants ‘custom’ or ‘custom_reviews,’ additional adjustments to the Trustbadge code and the used template are necessary. The required steps are explained in more detail here: What display options are there for the Trustbadge® and how can I integrate it into my shop? The currently opened tutorial, on the other hand, concentrates on the variants ‘reviews’ and ‘default.’
Using the parameter ‘variant’ you can determine the maximum elements that the Trustbadge should display. Your shop needs to have successfully completed the certification before it can display the trustmark. In addition to this, the star ratings can naturally only be shown once you have collected shop reviews with Trusted Shops. In this article we explain the various display formats in detail: What is the Trustbadge®?
'disableResponsive': 'false', /* deactivate responsive behaviour */

In general, the Trustbadge automatically adjusts to the screen size used by your customers. This means that with a screen width of 648 px or smaller, the Trustbadge switches to a display variant that is optimised for mobile devices. If you change the value in 'disableResponsive’ from false to true, this automatic adjustment is inhibited. In this case, the mobile device will show the desktop version of the Trustbadge.

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

These parameters can also be used to control whether the Trustbadge should be displayed in your shop or not. If you set the value of this parameter from false to true, the Trustbadge will be hidden. However, the Trustcard will pop up on your order confirmation page, allowing your customers to give their consent to a review invite and also offering them the Buyer Protection.

Step 3: Copy your Trustbadge code in the footer of your shop template

On your FTP server, open the template file for the footer you use (footer.php or similar). Then copy the entire code that you just generated and possibly configured in the field above. Paste the code in the footer template immediately before the final </body> tag.

The Trustbadge is then available on every page of your shop, including the order confirmation page. You’re almost done. You need to do just one more important thing. 

Step 4: Define data transfer for the Trustcard

The Trustbadge needs a little help to send your customers review requests via the Trustbadge and be able to offer the Buyer Protection once certification has been completed. You need to set a DIV element to recognise your order confirmation page (“thank-you page”) and transfer the required order data. The Trustbadge then automatically opens the Trustcard for your customers on this page, including a Buyer Protection for the order and/or the consent for sending of a review reminder.

website_integration_custom_en-GB.png

To make everything as easy as possible for your customers, and so that they don’t need to unnecessarily enter their order details again, the data required for the Buyer Protection and review request should be directly transferred from your shop template to the Trustbadge. Enter the code below into the template of the order confirmation page (finish.tpl, thankyou.php, success.phtml or similar) and replace the bold example values with variables that are used in your shop system to enable dynamic filling of the DIV elements with the correct order data.

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2020-05-21-001</span>
<span id=”tsCheckoutBuyerEmail”>my.customer@mail.co.uk</span>
<span id="tsCheckoutOrderAmount">4005.95</span>
<span id="tsCheckoutOrderCurrency">GBP</span>
<span id="tsCheckoutOrderPaymentType">PREPAYMENT</span>
<span id="tsCheckoutOrderEstDeliveryDate">2020-05-24</span>
</div> 

 

In the following, we will briefly explain the transfer parameters shown in the code example so that you can ensure that the required data is provided.

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

Required. This parameter transfers the order number. This is required for the assignment of a submitted review to a specific ordering process. If no order number is available, a time stamp for the corresponding order can also be transferred as long as this reference is unambiguous.

<span id=”tsCheckoutBuyerEmail”>my.customer@mail.co.uk</span>

Required. This parameter transfers the e-mail address of your customer. This is required to send your customer a review invite a few days after their order or to send a confirmation e-mail regarding a concluded Buyer Protection.

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

Optional, but required if you have the trustmark. This parameter transfers the total amount of the order. 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">GBP</span>

Optional, but required if you have the trustmark. This parameter transfers the currency code of the order in accordance with ISO standard 4217. If you only offer one currency, this value can also be hard-coded.

<span id="tsCheckoutOrderPaymentType">PREPAYMENT</span>

Optional, but required if you have the trustmark. This parameter transfers the payment method used. A simple text string is sufficient here. If the payment method is no longer available when the order is completed, the word OTHER can be hard-coded as the value for this parameter.

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

Optional but required if review requests are to be sent based on the expected delivery date. This is a parameter that transfers the expected delivery date. As can be seen in the example 2020-05-24, the date format YYYY-MM-DD is used.

Because the DIV elements should transfer dynamic order details, the code example shown above should not be copied into your order confirmation page without making changes. Instead, as mentioned above, the value of each transfer parameter marked in bold should be replaced by corresponding variables in the programming language used by your shop system. 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 shop system as it is different from one system to the next. For this reason we are unfortunately unable to make any universally applicable statements. As soon as you have adjusted the code example above, you can copy it and enter it into the template of your order confirmation page as described.

Step 5: Test the Trustbadge in your shop

You can now test the functioning of your Trustbadge by triggering a test order in your shop. At the end of the ordering process, make sure that the Trustcard appears as displayed above, making it possible for your customers to register for a review invite by simply clicking a button. If this works smoothly, you have successfully integrated the Trustbadge. From now on, your customers will be able to choose to be sent a review reminder directly after completing their purchase. As soon as your shop is certified, customers will also be offered the Buyer Protection. Also check in the browser console whether the DIV container ‘trustedShopsCheckout’ is now completely and correctly filled out.

Do you need more assistance than offered in these instructions for integration of the Trustbadge? You are welcome to contact us at members@trustedshops.com or by calling +44 203 364 5906.

In addition to the standard Trustbadge integration described in this tutorial, there are also other variants in the display options reviews and default. These are explained in detail in this article: What display options are there for the Trustbadge® and how can I integrate it into my shop?

Was this article helpful?

4 out of 4 found this helpful