How do I adapt the Trustbadge® to my requirements?

Have you not integrated the Trustbadge® yet? Then first carry out the standard integration before continuing. This article can help you: How can I integrate the Trustbadge® in my shop without a plugin?
In the article linked above, you will also find the Trustbadge code, which is the basis for all adjustments described in the following text.

Within the standard integration, the following rules are defined for the Trustbadge®:

• The Trustbadge presents your collected star ratings and – after successful certification – your Trustmark.
• For desktops, the Trustbadge is displayed on the right side of the screen and in the mobile version, on the left side of the screen.
• In desktop devices, the Trustbadge is displayed 54 pixels above the lower edge of the screen and in the mobile devices, 10 pixels above.

You can naturally adapt these rules to your individual needs.

The Trustbadge for new members will be displayed on your website until you have received your first review or the Trustmark:

Only limited adjustments are possible to the Trustbadge for new members:
 

• You can place it on the right or left edge of the screen.
• You can move it up or down.

The integration of the custom variant is not yet possible at this time.
Do you want to make further adjustments? Then wait until you have collected your first review or received the Trustmark. All adjustment options described in this article are then available to you.

In this article, we explain how you can use the Trustbadge® code to...

• ... change the display of the Trustbadge.
• ... place the Trustbadge elsewhere on your website.
• ... temporarily hide the Trustbadge on your website.

How can I display the Trustbadge differently?

Within the standard integration, the Trustbadge presents your collected star ratings and – after successful certification – your Trustmark.

(desktop variant)                                      (mobile variant)

Using the Trustbadge code, you have four options for changing how the Trustbadge is displayed:

• You can hide the collected star ratings and only display your Trustmark
  

               (desktop variant)                            (mobile variant)

• You can use the dark mode of the Trustbadge.
  

               (desktop variant)                            (mobile variant)

• You can also use the desktop variant of the Trustbadge in the mobile version of your website.
• You can use the top bar variant of the Trustbadge in the mobile version of your website.
  

Hiding star ratings in the desktop version

1. Find the following line of code within the Trustbadge code:

   data-desktop-disable-reviews="false"

2. Replace the line of code with the following line of code:

   data-desktop-disable-reviews="true"

You have now successfully hidden the star ratings in the desktop view.

Hiding star ratings in the mobile version

1. Find the following line of code within the Trustbadge code:

   data-mobile-disable-reviews="false"

2. Replace the line of code with the following line of code:

   data-mobile-disable-reviews="true"

You have now successfully hidden the star ratings in the mobile version of your site.

Using the dark mode of the Trustbadge

1. Find the following line of code within the Trustbadge code:

   data-color-scheme="light"

The color scheme setting is an optional parameter. If you don't find the abovementioned line of code in your Trustbadge code, you can add it to it yourself.

2. Replace the line of code with one of the following lines of code:
   - If you want the Trustbadge to continuously be displayed in dark mode:

   data-color-scheme="dark"

   - If the dark mode settings of your client shall determine whether the Trustbadge is displayed in dark mode:

   data-color-scheme="os-default"

Using the desktop variant of the Trustbadge in the mobile version of your site

1. Find the following line of code within the Trustbadge code:

   data-disable-mobile="false"

2. Replace the line of code with the following line of code:

   data-disable-mobile="true"

This means that you can also use the desktop variant of the Trustbadge in the mobile version of your website.

Using the top bar variant of the Trustbadge in the mobile version of your website

1. Find the following line of code within the Trustbadge code:

   data-mobile-enable-topbar="false"

2. Replace the line of code with the following line of code:

   data-mobile-enable-topbar="true"

This allows you to use the top bar variant of the Trustbadge in the mobile version of your site.

The top bar variant of the Trustbadge is firmly positioned at the top edge of the screen. You cannot change this position.

How can I move the Trustbadge to another position?

The Trustbadge code gives you the option of placing the Trustbadge in different places in the desktop and mobile view, independently of each other. You can move the Trustbadge...

... horizontally to the left or right.

... vertically up or down.

Are these options not enough for you? With the custom variant of the Trustbadge, you have the option of placing the Trustbadge absolutely anywhere on your website.

Adjusting placement of the Trustbadge in the desktop versions of your website

In the desktop view, you can move the Trustbadge horizontally from the right to the left edge of the screen or vertically up and down.

Placing the Trustbadge on the left edge of the screen in the desktop version of your website

In the desktop view's standard settings, the Trustbadge is placed on the right edge of the screen. With the following code adjustment, you can position the Trustbadge on the left edge of the screen.

1. Find the following line of code within the Trustbadge code:

   data-desktop-position="right"

2. Replace the line of code with the following line of code:

   data-desktop-position="left"

You have now successfully placed the Trustbadge on the left edge of the screen.

Moving the Trustbadge up or down in the desktop version of your website

In the desktop view's standard setting, the Trustbadge is placed 54 pixels above the lower edge of the screen. With the following code adjustment, you can move the Trustbadge up or down.

1. Find the following line of code within the Trustbadge code:

   data-desktop-y-offset="0"

2. Replace the 0 with the number of pixels by which the Trustbadge should be moved up or down.

Two examples:

• Would you like to move the Trustbadge up by 20 pixels? Then use the following line of code:

  data-desktop-y-offset="20"

• Would you like to move the Trustbadge down? Then use minus values. To move the Trustbadge 20 pixels down, use the following line of code:

  data-desktop-y-offset="-20"

With a value of -54, the Trustbadge is placed at the bottom edge of the screen without any space. We therefore recommend that you do not use values beyond -44.

You have now successfully moved the Trustbadge up or down.

Adjusting placement of the Trustbadge in the mobile version of your website

In the mobile view, you can move the Trustbadge horizontally from the left to the right edge of the screen, to the centre of the screen, or vertically up and down.

In the mobile view, place the Trustbadge on the right edge of the screen or in the centre

In the standard settings, the Trustbadge is placed on the left edge of the screen. With the following code adjustment, you can position the Trustbadge on the right edge of the screen or in the centre.

1. Find the following line of code within the Trustbadge code:

   data-mobile-position="left"

2. Replace the line of code with one of the following lines of code:
   - If you want to place the Trustbadge on the right side:

   data-mobile-position="right"

   - If you want to place the Trustbadge in the centre:

   data-mobile-position="center"

You have now successfully placed the Trustbadge on the right edge of the screen or in the centre.

Moving the Trustbadge up or down in the mobile version of your website

In the mobile view's standard settings, the Trustbadge is placed 10 pixels above the lower edge of the screen. With the following code adjustment, you can move the Trustbadge up or down.

1. Find the following line of code within the Trustbadge code:

   data-mobile-y-offset="0"

2. Replace the 0 with the number of pixels by which the Trustbadge should be moved up or down.

Two examples:

• Would you like to move the Trustbadge up by 5 pixels? Then use the following line of code:

  data-mobile-y-offset="5"

• Would you like to move the Trustbadge down? Then use minus values. To move the Trustbadge 5 pixels down, use the following line of code:

  data-mobile-y-offset="-5"

  Only use values up to -10.

You have now successfully moved the Trustbadge up or down.

Placing the Trustbadge flexibly on your website

In addition to the previously described standard variant of the Trustbadge, you can also integrate the custom variant into your website.

The custom variant differs from the standard variant in three ways:

1. It looks different from the standard variant. Here, you can see the custom variant:
    
          (with star ratings)                                                              (without star ratings)
2. You can place the custom variant on your website with complete flexibility.
3. You can change the size of the custom variant.

You can place the custom variant of the Trustbadge in different places in the desktop and mobile view, independently of each other.

Flexible placement of the Trustbadge in the desktop version of your website

By default, the custom variant has a width of 156 pixels and a height of 78 pixels. Below, we explain how you can change the size of the Trustbadge in the desktop view. Do the aforementioned default values suit you? Then skip the next two steps and proceed to step 3.

1. Find the following line of code within the Trustbadge code:

   data-desktop-custom-width="156"

2. Replace the 156 with the number of pixels that you want to specify as the width of the Trustbadge.

The number of pixels you can specify here depends on whether you have hidden the star ratings in the desktop view.

• Have you hidden the star ratings? Then select a number of pixels between 32 and 58.
• Have you not hidden the star ratings? Then select a number of pixels between 100 and 500.

The number of pixels for the height of the Trustbadge is automatically determined by the width you have selected. You cannot specify it.

3. Find the following line of code within the Trustbadge code:

   data-desktop-enable-custom="false"

4. Replace the line of code with the following line of code:

   data-desktop-enable-custom="true"

5. Open the source code of your website.
6. Place the following line of code on your website in the position where the Trustbadge should appear:

   <div id="trustbadgeCustomContainer"></div>

Possible options would be, for example, the header or the footer.

You have now successfully integrated the Trustbadge in the position you selected on your website.

Flexible placement of the Trustbadge in the mobile version of your website

By default, the custom variant has a width of 156 pixels and a height of 78 pixels in the mobile view. Below, we explain how you can change the size of the Trustbadge in the mobile view. Do the aforementioned default values suit you? Then skip the next two steps and proceed to step 3.

1. Find the following line of code within the Trustbadge code:

   data-mobile-custom-width="156"

2. Replace the 156 with the number of pixels that you want to specify as the width of the Trustbadge.

The number of pixels you can specify here depends on whether you have hidden the star ratings in the mobile view.

• Have you hidden the star ratings? Then select a number of pixels between 32 and 58.
• Have you not hidden the star ratings? Then select a number of pixels between 100 and 500.

The number of pixels for the height of the Trustbadge is automatically determined by the width you have selected. It does not need to be specified by you.

3. Find the following line of code within the Trustbadge code:

   data-mobile-enable-custom="false"

4. Replace the line of code with the following line of code:

   data-mobile-enable-custom="true"

5. Open the source code of your website.
6. Place the following line of code on your website in the position where the Trustbadge should appear:

   <div id="trustbadgeCustomMobileContainer"></div>

Possible options would be, for example, the header or the footer.

You have now successfully integrated the Trustbadge in the position you selected on your website.

How can I hide the Trustbadge?

If you want to hide the Trustbadge, you have two options:

• You can enable fade-out mode in the desktop view. In this mode, the Trustbadge is still displayed at the top of each page. However, it fades away as your customers scroll down the page. It reappears as soon as your customer returns to the top of the page.

In mobile view, the fade-out mode is automatically activated. However, it is possible to disable it in this view.

• You can hide the Trustbadge completely. In this case, the Trustbadge will no longer be visible on your website. The Trustcard is only opened after an order has been received so that your customers can apply for the Buyer Protection.

If you hide the Trustbadge completely, it will not be displayed in either the desktop or mobile view.

Activate fade-out mode in the desktop version of your site

1. Find the following line of code within the Trustbadge code:

   data-desktop-enable-fadeout="false"

2. Replace the line of code with the following line of code:

   data-desktop-enable-fadeout="true"

You have now successfully activated fade-out mode in the desktop view. The Trustbadge is now slowly hidden when your customers scroll down the website.

Deactivate fade-out mode in mobile version of your site

1. Find the following line of code within the Trustbadge code:

   data-mobile-enable-fadeout="true"

2. Replace the line of code with the following line of code:

   data-mobile-enable-fadeout="false"

You have now successfully deactivated fade-out mode in the mobile view. The Trustbadge will no longer be hidden when your customers scroll down the website.

Hide the Trustbadge

A visible Trustbadge ensures that your customers feel safe on your website. Hiding the Trustbadge puts your conversions and sales at risk. We therefore advise you to only temporarily hide the Trustbadge.

1. Find the following line of code within the Trustbadge code:

   data-disable-trustbadge="false"

2. Replace the line of code with the following line of code:

   data-disable-trustbadge="true"

You have now successfully hidden the Trustbadge in both the desktop and mobile view.

How can I place the Trustcard elsewhere?

After checkout, the Trustcard appears as a pop-up window on the order confirmation page of your shop. Using the Trustcard, your customers can give their consent to receiving a review invite and/or protect their order with the Buyer Protection.

You don't want the Trustcard to open as a popup? Then, you can assign it a fixed position on your order confirmation page.

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

2. Copy the following code line to your clipboard:

   <div id="trustbadgeCustomCheckoutContainer"></div>

3. Insert the code line at the position of the template file where the Trustcard should appear.

You have now successfully placed the Trustcard in a fixed position on your order confirmation page.