Have a question? Let's find you an answer.

TrustBox widgets - An implementation and design overview

Want to add a TrustBox widget to your website or your ecommerce store? Here’s an implementation and design overview to help you get started.

If you’re not quite sure which widget(s) you'd like to implement, we recommend reading this introduction to TrustBoxes and Targeted TrustBoxes. You can also visit the TrustBox Library to see previews of all our widgets.

Implementation steps

  1. Log in to Trustpilot Business.
  2. Go to Integrations > TrustBox Library and get an overview of all the TrustBoxes you can access.
  3. You can filter to see TrustBox types, e.g., TrustBoxes optimized for SEO. You can also click on the TrustBoxes to see live previews.
  4. Once you've chosen a TrustBox, you can configure the widget by following the steps under Get your TrustBox.
  5. When you're ready to implement, click Get Code. You'll now have the option to Share instructions, so you can send it to yourself or your developer.
  6. Copy the TrustBox script into the HEAD section of your website (you only have to do this once, whether you're adding one or several TrustBoxes.)
  7. Add the TrustBox HTML to the BODY where you'd like the TrustBox(es) to be displayed.

Note: If you can't put the script in the HEAD section, it's possible to put it in the BODY section before the HTML. Keep in mind that this may have an impact on website performance.

Responsive design

All our TrustBoxes are responsive. They can be configured to use different height and width attributes, which makes them adaptable to fit different screen sizes. They have internal breakpoints that ensure the content position is adapted to the given dimensions, and they can scroll.

Note: We recommend checking the minimum and maximum dimensions of your TrustBox(es) before implementing them. You'll find this information on the Preview page of each TrustBox.

When implemented on a website, the TrustBox is embedded in an iframe. The iframe does not fully support resizing, so the TrustBox will not be completely fluid in all dimensions. This means that when you resize your browser window, the TrustBox can be fluidly resized in width but will remain fixed in height. For this to work, it's important that you set the width to 100% and adjust the height of your DOM elements to fit the minimum height of the TrustBox.

Product TrustBoxes in templates

When you get the HTML for a Product TrustBox, it's specific to a given SKU. The SKU is in the 'data-sku="{you sku}"' snippet. If you generate your HTML on your server, you can change the attribute programmatically to be any of your SKUs. If you change the values in your front end, there are additional steps that you must follow to change the SKUs. (You may need help from your developer.)

Adding a TrustBox to your eCommerce store

When adding a TrustBox to your eCommerce store, please follow the instructions provided by the store:

For Magento users

The following Magento article provides instructions on how to add content in Magento's content management system. The Page Layout section describes how to insert the script, while the Widgets section describes how to add HTML to the body.

You can also use the Trustpilot and Magento plugin to drag and drop the TrustBox onto your page in the application's UI.

For WooCommerce users

WooCommerce is a WordPress add-on so, please follow the widget implementation instructions described in the WordPress support article. If your WooCommerce site is hosted, you'll need a Premium WordPress account to implement TrustBoxes.

You can also use the Trustpilot and WooCommerce plugin to drag and drop the Trustbox onto your page in the application's UI.

For Shopify users

The Shopify Application provides seamless ways for companies to invite their customers to leave a review on Trustpilot. This Shopify guide will walk you through how to add custom HTML in Shopify.

For PrestaShop users

PrestaShop has this in-depth guide on how to add HTML. Implementation does require some programming knowledge.

If you use the Trustpilot and PrestaShop plugin, you can drag and drop the TrustBox onto your page in the application's UI.

For BigCommerce users

BigCommerce has this guide for adding images into the HTML code. Implementation does require some programming knowledge.

For OpenCart users

Trustpilot’s free OpenCart plugin allows you to automate your review collection for service and product reviews. You can also add multiple TrustBox widgets using the plugin and invite past customers to write reviews. Use the Trustpilot and OpenCart plugin to drag and drop the Trustbox onto your page in the application's UI.

Want to know more about TrustBox performance and loading speed? Then you'll find this article useful.



Please sign in to leave a comment.