How to style Trustpilot widgets on your website

Last updated on May 17th, 2024 at 09:17 am

While at Fuel LAB we absolutely recommend and endorse the usage of Trustpilot® to boost your SEO signals and CRO (conversion rate optimization), being Trustpilot® partners since a long time, we know about the pain of styling the trustboxes (or reviews widgets) on your website.

It can be very frustrating; wether you use the official Trustpilot WordPress plugin (don’t) or the manual code injection, it’s likely that you’re unhappy on how the widgets are center-aligned all the time to the space of their container.

This can cause strong usability, UX and just graphic design issues, so let’s see where the problem lies and how to fix it.

What are Trustboxes or Trustpilot Widgets exactly?

So, despite Trustpilot’s business models, the main reason why most users want to make an account on Trustpilot is to display the verified reviews they have earned on the platform. This is not achievable with a free plan; it’s a paid feature.

There are many different types of Trustboxes, each one reflecting different use cases and strategies, with various versions (in the attempt to comply with all designs requirements and page formats).

So, assuming you are on a standard+ or convert plan, or other plans including the trustbox widgets integration, you will have surely tried to implement them on your website. The problem is, that these trustboxes are rendered trough iFrames.

This means that when you place, say, the Micro TrustScore widget underneath your product title, you’ll get this.

So, one would want the trustbox layout to align to the left, like all the rest of these text boxes.

• the product title is left aligned
• the description is left aligned
• product meta is left aligned
• button is full width
• Trustbox is always horizontally aligned to center (sob)

Why does the Trustpilot widget stay centered

This, happens because Trustpilot’s designers made these widgets responsive by design. It’s an intelligent choice when you think about it; with so many possibile website designs, they tried to deliver a consistent experience for everybody, that would fit most cases.

By being horizontally aligned, the trustbox reduces the risk of hitting the viewport limits, allowing for a more scalable rendering of the widget.

What is an iframe and why you can’t style it

An iFrame is essentially a windowed render of content that sits on a different server. It’s not content from within your website, so wether its loaded trough a CDN (almost all the time) or straight from another website / machine.

That’s why all the css styles you’re frantically trying to apply won’t work. You can’t edit an iFram, just as much as you can’t track an iFrame if you don’t have access to the original website.

But, there are things you can do.

Solutions and workarounds to style effectively your Trustpilot widgets.

First of all, I’d forget if I were you any plugin or app to display reviews; those apps can be useful to automate the invitation to review if you run an e-commerce, and that’s fair enough (although there are other options), but they can’t help you in this task.

So here’s what we’re going to do.

• First we’re going to style a bit your widget within the on-site options in Trustpilot.
• then, we’re going to implement the head code site-wide
• and ultimately, we’ll modify both the given code snippet to match our requirements, and the container of the snippet too.

Trustboxes styling options

Trustpilot® allows you to modify the following elements straight out of the box, when you have selected the desired widget from your dashboard:

The provided options are:

• which reviews to show
• widget language
• language of the reviews to display
• font family (a short selection)
• font color
• light or dark color scheme

So first of all, do what you can here, if blending with your website’s design is crucial to you.

Aligning the iFrame accordingly to your design with position relative

So, let’s align this iFrame to the left. This applies to any iFrame so for this example I’ll use another website.

So, as usual, we placed the code where we want the review widget to appear, and it’s sadly center aligned, unaccordingly with the rest of the page design. How can we modify the code to get the trustpilot widget to be left aligned?

It’s actually fairly easy. Let’s take a look at the code of this particular widget (but this applies to most widgets like these):

<div class="trustpilot-widget" data-locale="en-US" data-template-id="5419b63xxxxx045cd0c936" data-businessunit-id="65fd9d766xxxxx4a6893a6" data-style-height="20px" data-style-width="100%" data-theme="light"></div>

Not much that we can do here right? Well, this iFrame is called inside of a div. Why don’t we style that div, telling it to force its size to fit the content, and then we fine tune the positioning? Try this:

• add this code snippet to your div: style=”max-width: fit-content;left: -32px;position: relative;”

<div class="trustpilot-widget" style="max-width: fit-content;left: -32px;position: relative;" data-locale="en-US" data-template-id="5419b63xxxxx045cd0c936" data-businessunit-id="65fd9d766xxxxx4a6893a6" data-style-height="20px" data-style-width="100%" data-theme="light"></div>

Ad here’s the result.

Using Flexbox to Keep Your Trustpilot Widget in Place

One common issue with embedding Trustpilot widgets is their tendency to shift out of their parent containers, especially when resizing the page. This often happens when using position: relative and left properties to align the widget, which can result in unpredictable behavior. A more robust solution involves using Flexbox to ensure the widget stays firmly within its container while maintaining proper alignment and responsiveness.

Here’s how you can use Flexbox to achieve this:

<div style="display: flex; justify-content: flex-start; align-items: center; padding: 20px; background-color: #f8f9fa;">
    <!-- TrustBox widget - Mini -->
    <div class="trustpilot-widget" style="max-width: fit-content;" data-locale="en-US" data-template-id="53aa8807dec7e10d38f59f32" data-businessunit-id="65fd9d766daf80de4a6893a6" data-style-height="150px" data-style-width="100%" data-theme="light">
        <a href="https://www.trustpilot.com/review/your-business-url" target="_blank" rel="noopener">Trustpilot</a>
    </div>
    <!-- End TrustBox widget -->
</div>

In this example, the container for the Trustpilot widget is set to use Flexbox with display: flex. By applying justify-content: flex-start, the widget aligns to the left of the container. The align-items: center ensures that the widget is centered vertically within the container. Using max-width: fit-content keeps the widget’s size flexible and ensures it adapts properly to the content without overflowing its container.

This method provides a clean, reliable way to keep your Trustpilot widget aligned and within its container, regardless of how the page is resized. By leveraging Flexbox, you can avoid the pitfalls of using position: relative and left, resulting in a more stable and visually appealing layout for your reviews.

OT: why is Trustpilot great for SEO and CRO?

By the way, while I hope this was useful for you too (let me know in the comments, I am always interested in finding more problems..), I want to address one thing about Trustpilot and why I think it’s always a good investment.

SEO Perks

Trustpilot® is an official trusted Google partner. Google identifies those reviews specifically as verified reviews, and a domain hosting trustpilot content gains essentially a little bit of their authority and credibility. This, has ranking and holistic SEO impact.

Trustpilot® has a very powerful domain authority that you can leverage to target MOFU (Middle of the Funnel, consideration..) interactions. Say that someone searches for your brand, and your SEO is not that great. They will immediately find your company’s trustpilot page ranking first. From there, you have plenty of link juice at your disposal to bring those users to your favorite pages.

Likewise, you can be found when a user is looking for alternatives to a product or service in your same niche.

SEA Perks

After a certain number of verified reviews collected, your Google Ads RSA campaigns are going to show the reviews snippet underneath the ads, allocating you a stronger CTR, better AdRank (sometimes) and more credibility and conversion propension since click one.

CRO Perks

Undoubtedly, social proofing is fundamental for e-commerce. While there are many reviews services out there, Trustpilot did an egregious job in their branding and awareness efforts, and like it or not, that combination of colors, font and stars, calms and convinces the users, making the purchase experience more reliable and relaxed.

Here’s an example Case Study on how Trustpilot improves conversion rate.

Pietro Mingotti

Pietro Mingotti is an Italian entrepreneur and digital marketing specialist, best known as the founder and owner of Fuel LAB, a leading digital marketing and technical marketing agency based in Italy, operating worldwide. With a passion for creativity, innovation, and technology, Pietro has established himself as a thought leader in the field of digital marketing and has helped numerous companies achieve their marketing goals.