Credibility turns browsers into clients when they cannot inspect your service upfront. Adding Trustpilot badges to your Webflow site provides persistent, visible reassurance that guides prospective buyers to book with confidence.
Most service businesses sell something buyers can't inspect before paying. Without product imagery, spec sheets, or return policies for reassurance, potential clients rely on visible proof that previous buyers had positive experiences.
That is what a Trustpilot badge does on a pricing page: it substitutes for what an ecommerce buyer can't inspect.
This guide covers which badge you can actually display, which depends on your Trustpilot plan more than most write-ups admit, and how to make it survive on a Webflow Cloud app.
What do you need to add Trustpilot badges to Webflow?
You need a Trustpilot business account on a plan that includes the widget you want, your Business Unit ID, and somewhere in Webflow to put two pieces of code. Settle the plan first.
Here’s the full list before you go deeper:
- A Trustpilot business account, on Plus or higher if you want a star rating or TrustScore rather than a review count
- Your Business Unit ID and the template ID of the widget you picked, both from Trustpilot Business under Share and promote, then Website widgets
- A Webflow site on a plan that allows custom code if Webflow renders your pages, or a Webflow Cloud app whose root layout you can edit
- For a Webflow Cloud app, Next.js 15 or higher and Node.js 22 or later locally
Once the plan and the reviews are in place, the build hinges on getting the loader into the document your site renders.
5 steps to add a Trustpilot badge to a Webflow service site
The build includes a Business Unit ID, a bootstrap script loaded once, a widget div for the badge, a placement decision, and a fix for when the badge drops to a bare link after navigation.
The bootstrap script differs between a Webflow-rendered site and a Webflow Cloud app, and the last step applies only to Cloud, so both are worth reading even if the first four go smoothly.
1. Find your Business Unit ID and pick a widget
In Trustpilot Business, go to Share and promote, then Website widgets, then All widgets. Browse the library, preview the layouts, and choose one your plan includes rather than one you like the look of, since the picker will show you designs you cannot use.
Copy the generated snippet rather than adapting one from a blog post. It carries two values specific to you: the Business Unit ID that identifies your company, and a template ID that identifies the layout. Neither is a secret, so both are fine in the page source, which is why this integration needs no server route.
Finish this step with a snippet containing your IDs and a widget you are entitled to display.
2. Put the bootstrap script in the site head
Trustpilot's markup comes in two halves that go in different places. The bootstrap script is the loader, and it belongs once per site, not once per badge.
The loader goes in the head of a Webflow-rendered site:
<!-- Site settings > Custom code > Head code -->
<script
type="text/javascript"
src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
async
></script>Add that in Site settings, then Custom code, then Head code. This is where the two paths separate, and it is the detail that quietly breaks the Webflow Cloud build.
Site settings head code is injected into pages Webflow itself renders. A Webflow Cloud app is your own Next.js app, deployed from a repository, and it renders its own document, so nothing you put in Site settings reaches it.
Loading the script in your root layout
On that path, the script belongs in your root layout instead:
// app/layout.tsx — Webflow Cloud apps render their own document,
// so the script has to be loaded here rather than in Site settings.
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
strategy="afterInteractive"
/>
</body>
</html>
)
}If you misconfigure this, the failure is subtle: there are no console warnings or visual breaks, but the badge simply fails to appear because the expected global variable remains undefined.
The second half is the widget markup, and it goes in the body where you want the badge to appear, not in the head:
<!-- A Code Embed element in the body, where the badge should sit -->
<div
id="trustbox"
class="trustpilot-widget"
data-locale="en-GB"
data-template-id="YOUR_TEMPLATE_ID"
data-businessunit-id="YOUR_BUSINESS_UNIT_ID"
data-style-height="24px"
data-style-width="100%"
>
<!-- The fallback link Trustpilot ships in every snippet. Keep it:
it is what a visitor sees if the script is blocked, and the
bootstrap uses it to tell an unrendered widget from a rendered
one. -->
<a
href="https://www.trustpilot.com/review/example.com"
target="_blank"
rel="noopener"
>Trustpilot</a>
</div>Keeping those two halves in separate places matters. Webflow warns against putting document-level markup in head code, and a widget div placed there renders nothing while looking like it was installed correctly.
Trustpilot recommends the head and offers placement in the body just before the widget as the fallback when you have no head access. On a Webflow-rendered site, head code needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site itself.
The anchor inside the widget div is not optional decoration. It is what a visitor sees if the script is blocked by an extension or a strict content blocker, and the bootstrap script reads it as a sign that this element hasn't been rendered yet.
Trustpilot ships it in every snippet without saying in so many words that it is required, so treat removing it as a change with consequences rather than tidying. You finish this step with a badge appearing on a published page.
3. Place the badge where the doubt is
Badge placement on a service site is a judgment about where hesitation happens, not about where there is space in the layout.
The three places that earn it are the pricing page near the point of commitment, the contact or booking form where somebody is deciding whether to hand over their details, and the footer as a persistent signal.
A badge in the header on every page is the common instinct and the weakest position, because it becomes furniture within one scroll and stops being read
Match the widget to the moment. A Micro Star beside a Request a quote button does focused work; a full review list in the same spot asks someone to read testimonials after they've already decided to act. You finish this step with the badge on the two or three pages where a visitor is actually weighing you up.
4. Re-render the badge after client-side navigation
This step separates a Webflow Cloud app from a standard Webflow site, and it produces a symptom that is easy to misread: the badge works on first load, but on every client-side navigation after that the visitor gets the bare Trustpilot fallback link instead.
The bootstrap script scans for widgets once, on the window load event. A Next.js app moving between routes on the client never fires that event again, so it never picks up the new div, and the fallback link is all that remains. It looks like a styling bug, but it isn't.
Trustpilot's answer is to ask the widget to load itself:
// app/components/TrustBadge.tsx
'use client'
import { useEffect, useRef } from 'react'
declare global {
interface Window {
Trustpilot?: {
loadFromElement: (el: HTMLElement, reload?: boolean) => void
}
}
}
export default function TrustBadge() {
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
// The bootstrap script only scans on first load. After a
// client-side navigation the badge is an empty div until
// something asks Trustpilot to render it again.
if (ref.current && window.Trustpilot) {
window.Trustpilot.loadFromElement(ref.current, true)
}
}, [])
return (
<div
ref={ref}
className="trustpilot-widget"
data-locale="en-GB"
data-template-id="YOUR_TEMPLATE_ID"
data-businessunit-id="YOUR_BUSINESS_UNIT_ID"
data-style-height="24px"
data-style-width="100%"
>
<a
href="https://www.trustpilot.com/review/example.com"
target="_blank"
rel="noopener"
>Trustpilot</a>
</div>
)
}The loadFromElement call is Trustpilot's documented approach for single-page applications, and the ref gives it a specific element rather than a global rescan. The second argument tells it to reload; without it, an element that already holds a rendered widget isn't guaranteed to refresh, which is exactly the case this component exists for.
Be clear-eyed about the guard. Checking window.Trustpilot prevents a crash when the async script hasn't arrived yet, but it does nothing to recover afterward. On first page load, that is fine, because the script's own scan catches the widget when it fires.
After a client-side navigation, there is no second scan, so if the script is genuinely late, the badge stays unrendered with no error anywhere.
If you see that in practice, retry on script load rather than adding more guards.
After this step, you can navigate away from the page and back again with the badge still there.
5. Keep collecting reviews after the badge is live
A rating badge is a claim with a timestamp attached, and a service business that stops asking for reviews ends up displaying an average built from a period that no longer reflects how it works.
Review Collector is the widget for this, and it is the one thing available on Free so that it can sit on a thank-you page or an order-complete page regardless of what tier the rest of your setup is on. Placing it where a customer has just had a good outcome is what makes the difference; asking at a random moment produces the response rate you would expect.
It will not work in an email. Review Collector is JavaScript-rendered by the Bootstrap script, and email clients don't run scripts, so an embedded copy simply doesn't appear. Trustpilot's email widgets are separate products on the Plus tier, which means the follow-up email most service businesses want to send is a paid feature, not a free one.
Resist the urge to solicit selectively from customers you expect to be happy. Beyond the obvious problem, an average from a filtered sample is fragile in exactly the situation where you need it to hold. You finish this step with a badge whose number keeps moving.
What causes Trustpilot badges to fail on Webflow?
Almost every failure here shows up as the same symptom: a space, or a bare Trustpilot link where the badge should be. The causes have nothing in common, so telling them apart is the hardest part.
Four cover nearly all of it, and the first two account for the majority.
The badge shows only a plain Trustpilot link
Cause: The bootstrap script did not run. Either it is missing from the head, the page was previewed rather than published, or a content blocker stopped it. What you are seeing is the fallback anchor inside the widget div doing its job, which is why it looks like a deliberate but broken design rather than an error.
Fix: Confirm the loader is in the right place for your build, meaning Site settings head code for a Webflow-rendered site and the root layout for a Webflow Cloud app. Note that preview and comment modes do render the effects of custom code, so a badge missing in preview is a real signal rather than something to expect until you publish.
Then load the page with blockers disabled to rule out the third cause. If the link renders but the widget never replaces it, chase the script rather than the widget markup.
The badge disappears after navigating between pages
Cause: Client-side navigation in a Webflow Cloud app. The bootstrap script scanned the document on first load and has no reason to scan again, so the widget div on the second page stays empty.
Fix: Call loadFromElement with a reference to the widget element after the component mounts, as in step 4. Guard against the global existing, because the script loads asynchronously and fast navigation can arrive before it is ready.
This failure is specific to app-style navigation and will not reproduce on a standard Webflow site, so it is easy to miss if you test only in the Designer.
The widget you want is not in the picker
Cause: Your Trustpilot plan does not include it. The library shows widgets across tiers, and star ratings or TrustScore start at Plus, while Free offers only Review Collector.
Fix: Check your plan before designing a page around a badge, since the picker will happily preview layouts your account cannot publish. If you are on Free and want a rating badge, the honest sequence is to collect reviews first with Review Collector, then upgrade when there is a rating worth displaying.
Building the layout around a widget you cannot use is a common way to discover this late, usually after the design has been signed off and the badge is load-bearing in the composition.
The badge renders but shows no reviews
Cause: Usually the Business Unit ID, which identifies the wrong company or is malformed after being copied by hand. Occasionally it is genuine: a new profile with too few reviews to display, particularly for widgets that only show a count once you pass a threshold you set.
Fix: Regenerate the snippet from Trustpilot rather than editing the ID in place, since that removes transcription as a possibility. Then open your profile on Trustpilot directly to confirm the reviews exist and are published, because a widget faithfully showing an empty profile looks identical to a broken one.
If the profile has reviews and the widget still shows none, check whether the layout you chose only displays a count above a threshold you set, which is a setting rather than a fault.
What you can build next with Trustpilot and Webflow
Once the badge is live, the next step is usually depth rather than more badges: individual reviews on the pages they relate to, a rating summary that feeds structured data, or automated review invitations triggered when a job is marked complete.
If you want review content rather than a badge, and are willing to run a server route to get it, our Trustpilot review display guide covers the API route including caching and the TrustBox alternative. For the connection details, see the Webflow and Trustpilot integration.
Frequently asked questions
Can I show a star rating on Trustpilot's free plan?
No. The only widget included on Free is Review Collector, which invites customers to leave a review rather than displaying a rating. Star rating and TrustScore widgets start on the Plus plan, and Micro Review Count on Starter shows a review count.
Why does the badge vanish when I move between pages?
The Bootstrap script scans the page once on load, and client-side navigation in a Webflow Cloud app never triggers a second scan. Call loadFromElement with the widget element after the component mounts.
Is the Business Unit ID a secret?
No. It identifies your company publicly and is meant to sit in the page source, which is why a badge needs no server route or API key. That is the main practical difference between a widget and an API-based review display.
Where should the badge go on a service site?
Near the moment of hesitation: the pricing page, the contact or booking form, and the footer. A badge in the header on every page becomes furniture and stops being noticed within a scroll.
Should I ask only happy customers for reviews?
No. Beyond the obvious problem, an average built from a filtered sample is unreliable exactly when you need it to hold up. Ask everyone when the work is finished, when response rates are highest.
