What display options are there for the Trustbadge® and how can I integrate it into my shop?

A note in advance: In the following tutorial we will explain all the display options for the Trustbadge, with all the available parameters as well as the steps needed for integration and configuration. The introduction is based on this tutorial, in which we explain our standard integration: How can I integrate the Trustbadge in my shop without a plugin? Please first carry out the standard integration before starting with this tutorial.

The Trustbadge variants

The variants reviews and default

trustbadge_trustmark_reviews_EN.pngtrustbadge_reviews_EN.png

Variant reviews (with and without trustmark)

trustbadge_no_reviews_EN.png

Variant default

While the variant reviews shows both your star ratings and your trustmark, with the variant default you can limit the display to show only your trustmark.

This tutorial explains in detail how to integrate one of these two variants in your shop: How can I integrate the Trustbadge in my shop without a plugin?

The following parameters of the Trustbadge code give you the option to configure the variants reviews and default to suit your individual requirements:

'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. It is naturally also possible to shift the Trustbadge downwards. To do this, simply enter the appropriate minus value.

By default, the Trustbadge is displayed 54 px from the lower edge. For this reason, no value less than -54 should be entered for the parameter ˈyOffset.ˈ
'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.’

'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 devices 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.

The variants custom and custom_reviews

helpcenter_BILD.png

The variant custom

TB5-custom-trustmark-only_EN.pngreviews-only_EN.png

The variant custom_reviews (with and without trustmark)

In contrast to the variants reviews and default, which are anchored to the right edge of your shop, the variants custom and custom_reviews can be flexibly positioned in your shop. If you would like to integrate one of these two variants in your shop, please carry out the steps in the following integration guideline.

The following integration guideline builds on this tutorial: How can I integrate the Trustbadge in my shop without a plugin? If you have not yet gone through this, you should do so before continuing from this point.

Step 1: Create a DIV element

To be able to use one of the two Trustbadge variants custom or custom_reviews, you first need to create a DIV element. To do this, copy the following HTML code to the position in your shop system where the Trustbadge should be displayed. Possible positions are in the header or footer, for example.

<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>

There are two options for adjustment within the HTML code.

  1. You can assign a new ID for the DIV element. To do this, simply replace the value ‘MyCustomTrustbadge’ with a name of your choice. If you make a change to the ID at this point, please remember the ID you have defined. It will be needed again in Step 3.
  2. The properties width and height can be used to adjust the size of the Trustbadge. To do so, simply replace the values for width and height based on your requirements. In the process please note the original 2:1 (width:height) aspect ratio of the Trustbadge in the variant custom_reviews or 1:1 in the variant custom.

Step 2: Select your preferred Trustbadge variant

Now go to the plugin or template file in which you saved your Trustbadge code.

If you have not yet generated the Trustbadge code and integrated it into your shop, please first follow the steps in these instructions: How can I integrate the Trustbadge in my shop without a plugin?

Within the Trustbadge code you can determine which Trustbadge variant should be used in your shop using the ‘variant’ parameter. To do this, simply enter custom or custom_reviews as the value for the parameter. After your adjustment, the line of code should either look like this:

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

or like this:

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

Step 3: Link the Trustbadge code and the DIV element

Following this, insert the following line of code into the Trustbadge code if it is not already there:

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

The parameter 'customElementId' is the reference mark for the DIV element created in Step 1, and links it with your Trustbadge code. If you made a change to the ID in Step 1, please also replace the value ‘MyCustomTrustbadge’ within this parameter with the ID of the DIV element that you defined.

The variant custom is only available for shops with the Trusted Shops trustmark and is only visible with an active trustmark. If your trustmark is not yet active but you would like to see a preview, you can do this using the developer console of your browser. Run the command trustbadge.showIntegrationPlaceholder(); there.

Optional Step 4: Set the opening direction of the Trustbadge

The minimised Trustbadge continuously accompanies your customers in the online shop. Your customers can maximise the Trustbadge by clicking on it, to receive more information about your trustmark or the reviews that you have collected. No matter where you have positioned the Trustbadge in your online shop, by default it always maximises in the direction in which it has the most space.

However, you can also assign a fixed direction in which the Trustbadge should maximise. To do this, first enter the following line of code, if available, into the Trustbadge code:

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

Define a direction by entering one of the following values in the parameter:

  • 'topRight' for maximisation to the top right.
  • 'topLeft' for maximisation to the top left.
  • 'bottomRight' for maximisation to the bottom right.
  • 'bottomLeft' for maximisation to the bottom left.

For maximisation to the top right, for example, the line of code should look like this after your adjustment:

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

After this you have completed integration of the variant custom or custom_reviews and can now review display of the Trustbadge in your online shop.

Notice: Is the Trustbadge still being displayed in the bottom right corner? Then please check

  • that you really entered custom or custom_reviews as the value in the parameter ‘variant’
  • that you refer to the ID of the DIV element created in Step 1 in the parameter ‘customElementId’
  • that you defined the height and width of the DIV element as described in Step 1.

In these cases you will receive notifications with further instructions in the developer console of your browser.

The mobile Trustbadge variants floating, floating_reviews and topbar

Trusted Shops naturally also offers mobile display variants for the Trustbadge. By default, if you have not adjusted the value for the parameter 'disableResponsive’ to true, these are shown for a screen width of 648 px and smaller.

mobile-trustmark-only.png

The Floating Variant shown here is the standard mobile variant of the Trustbadge. Unlike the variants reviews and default, it is by default displayed in the bottom left corner of your shop. It also only shows the trustmark.

If you would like to display your star ratings, there are two options:

  • The variant floating_reviews: In the same way as the variant floating, this is also by default displayed in the bottom left corner of your online shop. However, unlike the variant floating, the star ratings are also shown.

mobile-trustmark_reviews.png

  • The variant topbar: This variant refers to a bar that is displayed above your shop header and contains both the trustmark and review information.

trustbadge-mobile-topbar_EN.jpg

To configure the mobile display of your Trustbadge, please copy the following line of code and insert it under the parameter ‘variant’ in your Trustbadge code:

'responsive': {'variant':'floating', 'position':'left', 'yOffset':'0'},

Within this parameter you have three configuration options:

  • With the value that you enter for ‘variant’ you determine which Trustbadge variant you want to display for screen widths under 648 px. Possible variants are floating, floating_reviews and topbar. Enter the variant you prefer as the value for ‘variant.’
  • The variants floating and floating_reviews are not anchored to the left edge of your shop. With the value that you enter for ‘position’ you define the horizontal positioning of these two variants. As well as the default value ‘left’ you can also select ‘center’ for centred positioning or ‘right’ for positioning on the right edge. For the topbar variant, on the other hand, the horizontal positioning cannot be adjusted as the bar covers the entire width of the screen.
  • For the variants floating and floating_reviews, the vertical positioning can be adjusted. This is carried out using the value for ‘yOffset.' Simply replace the 0 with a number of pixels to move the Trustbadge upwards. The vertical position of the topbar variant is also not able to be defined. This variant is anchored to the top edge of the screen.

Additional parameters

Flexible positioning of the Trustcard (custom checkout)

You can naturally also position the Trustcard freely on the order confirmation page. This setting is not tied to the variants custom and custom_reviews, and can also be used with the variants reviews and default. Simply follow the instructions below.

Step 1: Create a DIV element on the order confirmation page

You first need to create a DIV element at the position on the order confirmation page where the Trustcard should be displayed. To do so, simply insert the following line of code in the appropriate location:

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

The ID of the DIV elements is pre-set as customCheckoutDiv. You can naturally replace this ID with a name of your choice. However, in this case remember to also use this ID in the Trustbadge code for the next step.

Step 2: Link the Trustbadge code and the DIV element

Underneath the line of code for ‘variant’ insert the following line of code into your Trustbadge code:

'customCheckoutElementId': 'customCheckoutDiv',

The parameter 'customCheckoutElementId' is the reference mark for the DIV element created in Step 1 and links this with your Trustbadge code. If you made a change to the ID in Step 1, please also replace the value ‘customCheckoutDiv’ within this parameter with the ID of the DIV element that you defined.

You have now successfully positioned the Trustcard where you want it. Test the settings by carrying out a test order from your shop. If the Trustcard is displayed where you want it, the integration was successful.


Was this article helpful?

3 out of 7 found this helpful