Display Trustpilot reviews on your Webflow site to increase conversions with properly configured TrustBoxes.

How to integrate Trustpilot review widgets in Webflow

Trustpilot TrustBox widgets display your review score and customer feedback directly on your site. For service businesses, where trust signals directly impact conversion, properly implemented review badges can increase conversion rates.

This guide covers the architecture, configuration patterns, and Webflow-specific gotchas for integrating TrustBox widgets into service business sites.

What this integration accomplishes

TrustBox widgets load a JavaScript bootstrap script and render review content inside iframes using your Business Unit ID (a 24-character hex string) and template ID as data attributes. No API authentication required—just configuration values in the HTML.

You'll need:

Your Trustpilot Business Unit ID (from API or dashboard)
A template ID from your configured widget
The TrustBox bootstrap script in your Webflow project
Widget HTML with the right data attributes

Once you have your template ID and Business Unit ID, deployment requires no authentication. You'll need a Trustpilot Business account to generate template IDs and configure styling options, but the actual widget deployment is straightforward.

Architecture overview

TrustBox widgets use a client-side bootstrap script that initializes widget containers and populates them with review data via cross-origin iframes.

The widget container uses data-businessunit-id to fetch your review data. Trustpilot handles authentication and data retrieval internally, rendering widgets inside cross-origin iframes. Browser same-origin policies prevent your CSS from styling widget internals, though you can control container-level positioning and layout.

Get your Business Unit ID and template

You need two pieces of info from Trustpilot: your Business Unit ID and a template ID for your widget type.

Business Unit ID

This is a 24-character hex string that identifies your business in Trustpilot's system. It's not visible in the dashboard UI—you need to grab it from the widget embed code or via API.

Get it from your Trustpilot Business account:

Generate a widget in the configuration section
Copy the data-businessunit-id value from the embed code

Or retrieve it programmatically using the Business Units API.

Widget template

Trustpilot offers multiple widget types: Carousel, Grid, List Filtered, Horizontal, Mini Carousel, Pop-Up, Slider, plus specialized options like Review Collector and Product Attribute Ratings. Template IDs are automatically generated when you configure and save a widget in the dashboard.

Configure theme, font, and color scheme in the Trustpilot dashboard before generating your embed code. Due to the iframe architecture, you can't override internal widget styling with CSS—only container-level positioning and layout.

Implementation in Webflow

Webflow provides two primary methods for custom code: Site Settings Custom Code for site-wide placement, and Page-Level Custom Code for specific pages. You can also use an Embed element for flexible positioning.

Add the bootstrap script

The bootstrap script initializes all widgets on the page. Add it once per site, not per widget.

For site-wide availability, add to Site Settings > Custom Code > Footer Code:

<script type="text/javascript" 
        src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" 
        async>
</script>

Using async prevents blocking page rendering. Place scripts in footer code when possible for better performance.

Webflow's custom code documentation covers implementation details. Character limit is 50,000 per code section.

Add widget containers

Use Webflow's Embed element (Designer > Add Panel > Embed) for precise positioning.

Basic widget structure:

<div class="trustpilot-widget" 
     data-businessunit-id="YOUR_BUSINESS_UNIT_ID" 
     data-template-id="YOUR_TEMPLATE_ID"
     data-locale="en-US"
     data-theme="light"
     data-style-height="150px"
     data-style-width="100%">
  <a href="https://www.trustpilot.com/review/yourdomain.com" 
     target="_blank" 
     rel="noopener">Trustpilot</a>
</div>

The fallback link provides accessibility for users with JavaScript disabled and helps with SEO.

Embed elements don't render script effects in the Designer—you need to publish or use preview mode to see widgets. See custom code embed documentation for details.

Data attributes

Widget data attributes
Attribute	Required	Format	Purpose
`data-businessunit-id`	Yes	24-char hex	Identifies your business
`data-template-id`	Yes	String	Widget style template
`data-locale`	No	IETF BCP 47 (e.g., `en-US`)	Language and region
`data-theme`	No	`light` or `dark`	Visual theme
`data-style-height`	No	CSS value	Container height
`data-style-width`	No	CSS value	Container width
`data-stars`	No	Comma-separated 1–5	Filter by rating

Complete reference: TrustBox widget overview.

Performance optimization

Third-party JavaScript can impact Core Web Vitals—specifically Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Mitigate this with async loading, footer placement, and reserved space for dynamic content.

Prevent layout shift

Reserve space before widgets load to prevent CLS issues:

<div class="trustpilot-widget"
     style="min-height: 150px;"
     data-businessunit-id="YOUR_ID"
     data-template-id="YOUR_TEMPLATE"
     data-style-height="150px"
     data-style-width="100%"
     data-theme="light"
     data-locale="en-US">
  <a href="https://www.trustpilot.com/review/yourdomain.com" 
     target="_blank" rel="noopener">Trustpilot</a>
</div>

Strategic placement

For service businesses, effective placements include:

Service detail pages (near pricing or CTAs)
Contact and inquiry forms
Testimonial sections
Footer areas for persistent visibility

Webflow's performance optimization guide recommends limiting third-party scripts.

Structured data: critical compliance warning

This is important. Trustpilot widgets can automatically inject schema markup, which creates compliance issues with Google's guidelines.

Google's first-party review requirement

Google's guidelines state review markup should only apply to first-party reviews published directly on your site. Their 2019 guidance explicitly says "embedding a third-party widget is seen as controlling the process of linking reviews," which violates their policies for business/organization reviews.

The problem: Trustpilot's SEO-optimized TrustBox widgets (specifically "Product Reviews SEO" and "Product Reviews MultiSource SEO") automatically inject JSON-LD structured data into your <head>. For business/organization reviews on your site, this automatic injection violates Google's guidelines and can trigger a "spammy markup" manual action.

What to do:

For company reviews, use non-SEO widget variants to avoid automatic schema injection
For product reviews from verified purchasers, there's a gray area—some SEO practitioners argue this may constitute first-party data managed through a third-party platform, but the interpretation is contested
When in doubt, collect first-party reviews directly on your site for schema markup
Validate any schema implementation with Google's Rich Results Test

Check what Trustpilot injects

Open browser DevTools console and run:

// Inspect all JSON-LD schema on the page
document.querySelectorAll('script[type="application/ld+json"]')
  .forEach(script => console.log(JSON.parse(script.textContent)));

This reveals any automatically injected review markup.

First-party review schema

If you collect reviews directly on your site, use compliant first-party schema:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Service",
    "name": "Your Service Name"
  },
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "5",
    "bestRating": "5"
  },
  "author": {
    "@type": "Person",
    "name": "Customer Name"
  },
  "reviewBody": "Actual review text published on your site."
}
</script>

See Schema.org Review and AggregateRating specs, plus Google's review snippet guidelines.

Verify integration

After publishing, confirm widgets work correctly.

Browser verification

Load your published site (not Designer preview)
Confirm widget displays with current TrustScore and review count
Open DevTools console and check for JavaScript errors
Verify the fallback link redirects to your Trustpilot profile

Common errors if something's broken:

CrossOriginError: Blocked by CORS policy
ReferenceError: Trustpilot is not defined

Common display issues

Widgets not loading usually stem from:

Unpublished widgets - Check the widget is published in your Trustpilot Business account
Ad blocker interference - Disable ad blockers for testing
CSS conflicts - Theme or plugin stylesheets may interfere
Domain misconfigurations - Ensure widgets are configured for the correct domain

See Trustpilot's integration troubleshooting guide and TrustBox Widgets FAQ.

Webflow doesn't provide direct support for custom code troubleshooting. Contact Trustpilot through their business contact form for technical issues.

Performance validation

Run your published URL through PageSpeed Insights to monitor Core Web Vitals—specifically LCP, FID, and CLS. Prioritize Chrome UX Report (CrUX) field data over synthetic Lighthouse scores, as field data reflects actual user experience. Validate schema with Google's Rich Results Test.

Community help: Webflow Forum.

Advanced patterns

Dynamic widget loading for SPAs

For React, Angular, or Vue.js implementations requiring dynamic updates, use this method after route changes:

window.Trustpilot.loadFromElement(
  document.querySelector('.trustpilot-widget')
);

Required when widget containers are added after initial page load. See Trustpilot's SPA integration guide.

Container positioning

Since iframe architecture prevents styling widget internals, use wrapper CSS for positioning:

<div style="display: flex; justify-content: flex-start;">
  <div class="trustpilot-widget" 
       style="max-width: fit-content;"
       data-businessunit-id="YOUR_BUSINESS_UNIT_ID"
       data-template-id="YOUR_TEMPLATE_ID"
       data-style-height="150px"
       data-style-width="100%"
       data-theme="light"
       data-locale="en-US">
    <a href="https://www.trustpilot.com/review/yourdomain.com" 
       target="_blank" rel="noopener">Trustpilot</a>
  </div>
</div>

Custom API implementation

For requirements beyond standard TrustBox capabilities, Trustpilot provides APIs for building fully custom review displays with complete styling control. Custom implementations require API key authentication or OAuth 2.0 credentials and development work.

See Create a custom TrustBox widget using Trustpilot APIs.

Platform constraints

ConstraintDetailsWebflow character limit50,000 characters per custom code sectionServer-side codePHP, Ruby, Python not supported in WebflowTemplate IDsGenerated from Trustpilot dashboardBusiness Unit IDRequires API call or dashboard access