Trustbadge integration in just a few steps

Integrate the Trustbadge in the most flexible way

The Trustbadge® can be freely positioned in your shop

Trustbadge custom_reviews

Would you rather have the Trustbadge® displayed in your shop somewhere other than in the bottom-right corner of the screen?
No problem – following these instructions, you can adjust the Trustbadge® to suit your preferences.

Step 1: Enter the URL of your shop below to generate your personal Trustbadge® code.


 

Step 2: In the integration code generated above, locate the following line

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

and change the value for the parameter in ‘custom_reviews’ or ‘custom’, depending on whether you also want to display your current shop rating in the Trustbadge® or only the trustmark.

Hint: Variant 'custom' displays the Trusted Shops trustmark, soleley. It is only visible if your shop is certified to display the trustmark. You may execute the following command at the developer console of your browser in order to see a preview:
trustbadge.showIntegrationPlaceholder();

Step 3: Insert the following code in the position where you want the Trustbadge® to be displayed – for example, in the header or the footer of the page.
<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>
With the CSS properties 'width' and 'height' in this HTML code, you determine how large the Trustbadge® should be displayed. Both values must be specified. Please note the original aspect ratio (width: height) of the Trustbadge® of 2: 1 in the variant 'custom_reviews' or 1: 1 for the variant 'custom'.

Step 4: In the integration code generated above, locate the following line
'customElementId': '', /* required for variants custom and custom_reviews */

and insert ‚MyCustomTrustbadge‘ as the value for the parameter 'customElementId': 

'customElementId': 'MyCustomTrustbadge', /* required for variants custom and custom_reviews */

Step 5: For the direction of the Trustcard, use the parameters in the line trustcardDirection by entering 'topLeft', 'topRight', 'bottomLeft' or 'bottomRight'.

'trustcardDirection': '', /* topRight, topLeft, bottomRight, bottomLeft */

Step 6: For the automatic collection of customer ratings and the link to register for the money-back guarantee, the Trustbadge® needs a little help. You can do this by setting an <div> element to identify your order confirmation page (thank-you page). On this page, the Trustbadge® then automatically opens the Trustcard for your shop visitors. The Trustcard contains the link to register for the money-back guarantee and/or the consent to be reminded to submit a rating. 

Provided that you have not already done so, now position this <div> container on the order confirmation page:

<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">2016-05-21_001</span>
<span id="tsCheckoutBuyerEmail">my-customer@mail.test</span>
<span id="tsCheckoutOrderAmount">1000.95</span>
<span id="tsCheckoutOrderCurrency">GBP</span>
<span id="tsCheckoutOrderPaymentType">WIRE TRANSFER</span>
<span id="tsCheckoutOrderEstDeliveryDate">2016-05-24</span>
</div>

Fill in the values of the parameters using the scripting language used by your shop system. In PHP, the e-mail address could, for example, look something like this, in which $customer_email would correspond to the customer’s e-mail address in your shop system (you can find the exact names and definitions of the parameters in your shop system’s documentation – unfortunately, we have no control over this):

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

On the order confirmation page the Trustcard now appears in a lightbox and provides the link to register for the money-back guarantee.

Tip: If the Trustbadge® still appears in the lower right corner, please check whether you have actually specified a variant 'custom' or 'custom_reviews' in the generated integration code, refer to the ID of an existing element of the shop page in the parameter 'customElementId', and set the height and width as in Step 3 described above.
In the developer console of your browser you will receive messages with further information in these cases.

Display the Trustcard anywhere! 

The completion of the Trusted Shops Guarantee, or the registration to submit a review, can also be placed anywhere on the order confirmation or thank you page in your shop. 

Step 1: Add an empty <div> container into your order thank you page in the position in which you want the Trustcard to display. Enter this <div> container as a separate ID name, e.g.

<div id="customCheckoutDiv"></div>

Step 2: In the Trustbadge code you then add in the field _tsConfig as an additional parameter 'customCheckoutElementId': 'customCheckoutDiv' and supplement the ID name you chose in the first step as the value for the parameter 'customCheckoutElementId' (in this example, it would be the 'customCheckoutDiv ').