How can I customise the way the Trustbadge® is displayed in mobile devices?

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.

You can configure how the the Trustbadge is displayed on mobile devices independently from how it is displayed on desktops. Within the standard integration, the following rules are defined for the mobile Trustbadge:

  • The Trustbadge presents your collected star ratings and – after successful certification – your Trustmark.
  • The Trustbadge is displayed on the left side of the screen.
  • The Trustbadge is displayed 10 pixels above the lower edge of the screen.

You can naturally adapt these rules to your individual needs. In this article, we explain how you can use the Trustbadge® code to...

How can I display the mobile Trustbadge differently?

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

01_EN.png

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

  • You can hide the collected star ratings and only display your Trustmark.
    02_EN.png
  • You can also use the desktop variant of the Trustbadge in the mobile version of your website.
    03_EN.png
  • You can use the top bar variant of the Trustbadge in the mobile version of your website.
    04_EN.jpg

Hiding star ratings

  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 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

  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 mobile Trustbadge to another position?

Within the standard integration, the mobile Trustbadge is displayed on the left side of the screen and 10 pixels above the lower edge of the screen.

With the help of the Trustbadge code, the mobile Trustbadge can be moved...

... horizontally from the left edge of the screen to the centre or to the right.

... vertically up or down.

... flexibly in the mobile version of your website.

Placing 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

  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 standard variant of the Trustbadge described above, you can also integrate the custom variant in the mobile version of 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:
    05_EN.png  06_EN.png
          (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.

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.

  1. Find the following line of code within the Trustbadge code:
    data-mobile-enable-custom="false"
  2. Replace the line of code with the following line of code:
    data-mobile-enable-custom="true"
  3. Open the source code of your website.
  4. 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 deactivate the fade-out mode of the mobile Trustbadge?

In mobile view, the fade-out mode is automatically activated. In this mode, the Trustbadge is 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. You can deactivate the fade-out mode so that the Trustbadge is no longer hidden.

  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.


Was this article helpful?

13 out of 24 found this helpful