Hello! How can we help?

Browse the Trustpilot Support Center to find info on Google Seller Ratings, Rich Snippets, TrustBoxes, Product reviews, plus how-to guides for editing your reviews and account settings

TrustBox FAQ Follow

Frequently Asked Questions

How do I change the width of a TrustBox to make it fit my site? Can I make it responsive so it looks good on mobile too?

We have made some of our TrustBoxes responsive, so that you can adjust their height and width, depending on the placement. The attribute data-style-width can be set to 100% relative to the width allocated to the TrustBox display. Doing so will give the TrustBox a fluid width. For example, the data-style-width attribute in the following example can be altered to adjust the TrustBox's width.

Before:
<div class="trustpilot-widget" data-locale="en-US" data-template-id="123" data-businessunit-id="456" data-style-height="240" data-style-width="380"></div>

After:
<div class="trustpilot-widget" data-locale="en-US" data-template-id="123" data-businessunit-id="456" data-style-height="240" data-style-width="100%"></div>

(If you see that the TrustBox is cropped after you have changed its dimensions, try to either revert to original, or select a responsive TrustBox.)

Can I change the height of my TrustBox?

Yes, the height of a TrustBox can be changed. Each TrustBox has a default height, depending on its style. However, please note that the height should always be set in pixels (px) and not percentage (%). The height can be changed by altering the value of the "data-style-height" attribute, shown below.

<div class="trustpilot-widget" data-locale="en-US" data-template-id="123" data-businessunit-id="456" data-style-height="240" data-style-width="380"></div>

Is the new Horizontal TrustBox now responsive?

Yes, the Horizontal TrustBox can be made responsive with a simple change to the data-style-width attribute (same as above). By setting this attribute to 100%, you give this particular TrustBox a fluid width. The code snippet should look like this:

<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e65db0d04a09e042d5fc" data-businessunit-id="XXXXX" data-style-height="28" data-style-width="100%" data-theme="dark"></div>

I changed the width of my Drop-Down TrustBox, and now it looks broken when I click it. Why?

It is recommended to keep the width of the Drop-Down TrustBox at 100%. When placed in the HTML container, the TrustBox will automatically reach the same width. This practice ensures the TrustBox displays well across all browsers and devices.

Can I put a TrustBox inside my own Android or iOS application?

Yes. It’s possible to implement a TrustBox widget inside an app, no matter the operating system. TrustBoxes can be implemented in a webview into apps built on Android as well as iOS. Alternatively, you can build your own custom TrustBox widget using our APIs.

I’m using a TrustBox that can have either a dark or light theme. How do I change it?

The theme color can be changed for the following TrustBoxes: Carousel, Drop-Down, Horizontal, Micro (except Micro Button), , Mini, Mini Carousel, Pop-Up, Quote, Slider, Starter and all Product Review TrustBoxes. You can change the color theme in the Configure your TrustBox live preview section. Choose between light color theme or dark color theme depending on which displays best on your website. You also have the option to change the color theme of the TrustBox by manually adding the attribute data-theme= in the HTML code. For example, data-theme="light".

Can I decide what star ratings get shown in my TrustBoxes?

Yes. Under Select your reviews, you can choose which reviews you wish to display. You can also manually insert an additional data-stars attribute directly into the HTML code. For example, you can insert data-stars="3,4,5" to show 3, 4, and 5 star reviews or data-stars="5" to show only 5 star reviews.

To illustrate, this is what the code snippet would look like if you only want 4 and 5 star reviews in your TrustBox:

<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e65db0d04a09e042d5fc" data-businessunit-id="XXXXX" data-style-height="28" data-style-width="100%" data-theme="light" data-stars="4,5"></div>

Is there a way to pick and choose which reviews are shown in a TrustBox?

Yes. You can specify which reviews or what kinds of reviews appear in TrustBoxes via Your favorite reviews, or you can set up a Targeted TrustBox via Your reviews by tag.

Your favorite reviews allows you to select specific reviews from the Service Reviews page to be included in TrustBoxes. From the TrustBox Library, you can select Your favorite reviews and configure the TrustBox code snippet accordingly. The selected favorite reviews will appear in all TrustBoxes that use the appropriate data attributes. Reviews can also be selected based on star rating(s) and tags.

Targeted TrustBoxes pull in specific reviews to display via tagged reviews. Reviews can be tagged from the Service Reviews page in the Business Portal, or by using the Review Tagging APIs. When implementing a TrustBox, include a data attribute data-tags to pull in reviews with that tag.

As instructed on the Business Portal, I have added the script code within the HEAD section of my site. That copied the script to all HEAD sections on my website. Is it possible to skip adding the script code to the HEAD section, and add the complete code in the BODY section instead?

It is best practice to add the script tag within the HEAD section of the website, as it enables the TrustBox to load faster and perform better. However, the TrustBox will still work if you include the tag within the BODY section of your website. In this case, including the tag in the BODY section is recommended so as to avoid errors.

Can I implement a TrustBox with a system that uses XML as its document type?

Yes. However, it’s important to note that when using a CMS or other system that uses XML as its document type, the TrustBox script code snippet needs to change. You must change the XHTML alternative for the HTML 5 tag async. The XHTML alternative is async="sync" - therefore the <script> tag needs to be adjusted from async to async="async".

How often is the TrustBox updated? Is it real time?

TrustBox data is not real time, but it updates every 20 minutes.

Can the new TrustBoxes open as a pop-up?

The new TrustBoxes utilize an API. Therefore, some TrustBoxes can open as a pop-up or in a new window, depending on the web developer’s particular implementation of it. Additionally, there are two new TrustBoxes in the TrustBox Library with pop-up functionality: the Pop-Up and the Drop-Down. Both take up little real estate but expand upon clicking.

How do I change the language of the TrustBox?

The language can be changed by configuring the data-locale variable. Select this variable in the configuration section for each TrustBox.

What are the supported browsers for TrustBoxes?

TrustBoxes are built to work in all modern browsers: Chrome, Firefox, Safari (iOS), Opera and Internet Explorer (v. 9 and newer).

The following browsers do not support TrustBoxes: Safari for Windows, IE8 and older.

Note: TrustBoxes will display properly in newer versions of Safari on Mac OS, but older versions of Safari may experience issues.

When a browser does not support a TrustBox, the TrustBox does not load properly.

Can I implement a TrustBox on my WordPress website?

Yes, you can. The best implementation method is to add the TrustBox JavaScript code snippet into the header of the page you want to display it on. As this requires changing your WordPress header.php template file, you may need your webmaster's help to implement. Read more here.

Another implementation method is to switch from Visual to Text edit mode in WordPress, then paste the TrustBox JavaScript and HTML code snippets into the editor.

Do I need to add the script in the HEAD section multiple times if I have more than one TrustBox on my page?

No. You only need to add the script in the HEAD section once, regardless of the number of TrustBoxes on your page.

Will a TrustBox slow down my website?

TrustBoxes are designed to keep the impact on your website as minimal as possible. When your page is loading for the first time after implementing a TrustBox, there will be a request to load a small script which will wait until your page has loaded before fetching any TrustBox content. The UI of the TrustBox and your reviews will not be loaded until after your page has finished loading.

Does loading time of the TrustBox affect the SEO of my website?

As explained above, the TrustBoxes wait for your website to load fully in order to keep their impact to a minimum. If your own page is extremely slow, Google may not index your page, and that might affect your SEO. Page speed is one of many factors affecting SEO. As long as your page load is not extremely slow, then there is no need to worry about it.

Can you cache the TrustBox?

TrustBoxes use the industry standard caching to load snippets. The API is cached for 20 minutes, so new review content will appear in your TrustBox within 20 minutes The small javascript snippet in the header load only once per page.

What kind of tracking does a TrustBox perform?

There are two types of tracking:

  • The impression tracking is used to check how many times a TrustBox is loaded.
  • Speed performance tracking via New Relic is used to track how fast TrustBoxes load. Trustpilot then uses that tracking data to monitor and improve the performance on a continuous basis.

Can I adjust the height of the Carousel TrustBox to make it more mobile responsive?

One way to create a responsive state is to override the height of the iframe to be larger on mobile. You can wrap the TrustBox with a new HTML division and override the iframe's height with CSS

See example:

<div class="carousel">
<!-- TrustBox widget --> <div class="trustpilot-widget" data-locale="en-GB" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="5400267300006400057a0113" data-style-height="130px" data-style-width="100%" data-theme="light" data-group="on" data-stars="1,2,3,4,5"> <a href="https://uk.trustpilot.com/review/bundingo.com" target="_blank">Trustpilot</a> </div> <!-- End TrustBox widget -->
</div>
.carousel { width: 320px; }
.carousel iframe { height: 280px !important; }

Technical Terms to Know

Application Programming Interface (API): An API is a set of programming instructions for accessing a web-based software application. It is a software-to-software interface and not a user interface, meaning the average business user never sees its inner workings. APIs allow separate software systems to talk to one another without any user intervention or knowledge.

Representational State Transfer (REST): REST is an architectural style for designing networked applications. It uses simple HTTP protocol to make calls or connections between machines.

Content Delivery Network (CDN): A CDN is a large distributed system of servers deployed in multiple data centers. It is used to serve content to end-users with high degrees of availability and performance.

Bootstrap (front-end framework): A small bit of code that is used to load the rest of the code required for a program to run. The bootstrap makes it easier for people to use the program on their website and to update it.

iframe: An iframe, or inline frame, is an HTML element that places one HTML document within another (in a frame). <iframe>...</iframe>

HEAD: An HTML structure element; a container for processing information and metadata of an HTML document. <head>...</head>

script: An HTML head element that places a script in the HTML document; it can act as a container for script instructions to link to the external script. By itself, it is neither a block nor an inline element; it does not display at all, but it can contain instructions that will dynamically generate block or inline content. <script>...</script>

BODY: An HTML structure element; a container for the displayable content of a HTML document. <body>...</body>

div: A generic HTML body, block-level element with no semantic meaning. It is used to distinguish a document section, usually for purposes such as presentation or behavior, controlled by style sheets or DOM calls. <div>...</div>

Contact Support