How to display Trustpilot reviews on Webflow product pages

Product pages convert on trust. A shopper comparing two similar items usually picks the one with visible, verifiable ratings, and Trustpilot is a review platform most buyers recognize on sight. The hard part is getting that review data onto a Webflow product page without hand-copying quotes that go stale the moment a new review lands.

Trustpilot exposes reviews two ways. Its hosted TrustBox widgets render inside an iframe, and its REST APIs return raw review data you can style yourself. Each has a place, and the right choice comes down to how much design control you want and whether you can run server-side code.

This guide builds the API path on Webflow Cloud. A Next.js Route Handler holds your Trustpilot API key, fetches product reviews by SKU, and caches them, so your product page renders native, on-brand review markup. It also covers the TrustBox widget as the no-backend fallback.

What do you need to display Trustpilot reviews on Webflow product pages?

You need a Webflow Cloud app, a Trustpilot for Business account with the Product Reviews add-on and API module, your Business Unit ID, an API key, and the SKUs that identify each product.

Trustpilot gates review data behind account tiers, so confirm every piece is in place before you write a line of code.

Line up these pieces first:

• Webflow Cloud project: A Next.js app, deployed or running in local dev, since the API key has to live in server-side code.
• Trustpilot for Business account: Product reviews require the Product Reviews add-on on a Starter, Plus, Premium, or Enterprise plan.
• API module access: The paid add-on that opens up the REST APIs, sold in tiers by yearly call allowance.
• Business Unit ID: The identifier for your Trustpilot profile, returned by the Business Units API or shown in your business dashboard.
• API key (Client ID): The public-API credential you pass as an apikey header on every request.
• Product SKUs: The stock-keeping identifiers that map each Webflow product to its Trustpilot reviews.

With the account tier, credentials, and SKUs confirmed, the build starts by locating your Business Unit ID and minting a key.

5 steps to display Trustpilot reviews on Webflow product pages

The build wires a Trustpilot API key into a Webflow Cloud Route Handler, fetches product reviews by SKU, caches them within Trustpilot's refresh window, and renders the results on the page.

The final step adds the hosted TrustBox widget for teams that would rather not run a backend at all.

1. Get your Business Unit ID and Trustpilot API key

Every Trustpilot API call is scoped to a Business Unit, the internal identifier for your company profile. Reading review data requires a Trustpilot for Business account with the paid API module, which Trustpilot provisions through its sales team rather than a self-serve developer signup. That access comes with an API key (Client ID) that you pass as an apikey header, and because the endpoints in this guide are public, the key alone is enough, so you never set up OAuth. To find your Business Unit ID, call the Business Units API Search for business units endpoint (/v1/business-units/search?query=), which matches on business names, or read the ID from your business dashboard. Record both the key and the ID, because every request that follows depends on them.

Verify the key with a single call to the profile info endpoint:

curl -X GET "https://api.trustpilot.com/v1/business-units/{businessUnitId}/profileinfo" \
  -H "apikey: YOUR-API-KEY-HERE"

A 200 response returning your company profile, including the companyName field shown in that endpoint's documented response, confirms the key and the Business Unit ID are valid and ready to use.

2. Store the API key as a Webflow Cloud environment secret

The API key must never reach the browser, so it belongs in Webflow Cloud's environment variables rather than in your repository. In the Webflow Cloud dashboard, open your app, select the environment, and go to Environment Variables. Add the key and your Business Unit ID, then mark the key as a Secret so it is encrypted at rest and masked in the dashboard. Each environment supports up to 110 variables, and both secret and non-secret values are available during the build and at runtime, which is exactly what a Route Handler needs.

Add these two variables to the environment:

TRUSTPILOT_API_KEY=your_trustpilot_api_key
TRUSTPILOT_BUSINESS_UNIT_ID=your_business_unit_id

Reference them in code with process.env, never by importing a config file, so the secret stays on the server. Push a new commit afterward, since variables only take effect on the next deployment; the Webflow Cloud environments documentation covers marking values as secrets.

3. Build a data layer that fetches Trustpilot product reviews

A small server-only module keeps every Trustpilot call in one place and out of your client bundles. It reads the API key from process.env, targets the Product Reviews API endpoints, and sets a revalidation window so the same SKU is not re-fetched on every page view. Trustpilot's API module overview sets a Content Refresh guideline of at least once every 24 hours for showcased data, so any cache window from a few minutes up to a day stays compliant. This example uses one hour.

Three endpoints cover the data a product page needs:

The summary powers the star rating and review count, while the reviews endpoint fills the list beneath it.

Create lib/trustpilot.ts with a typed helper for each call:

// lib/trustpilot.ts
const BASE = "https://api.trustpilot.com/v1/product-reviews/business-units";

export type ProductReview = {
  id: string;
  stars: number;
  content: string;
  createdAt: string;
  consumer: { displayName: string };
};

export type ReviewSummary = {
  starsAverage: number;
  numberOfReviews: { total: number };
};

const apiKey = () => process.env.TRUSTPILOT_API_KEY as string;
const unitId = () => process.env.TRUSTPILOT_BUSINESS_UNIT_ID as string;

export async function getProductSummary(sku: string): Promise<ReviewSummary> {
  const url = `${BASE}/${unitId()}?sku=${encodeURIComponent(sku)}`;
  const res = await fetch(url, {
    headers: { apikey: apiKey() },
    next: { revalidate: 3600 }, // refresh at most once an hour
  });
  if (!res.ok) throw new Error(`Trustpilot summary ${res.status}`);
  return res.json();
}

export async function getProductReviews(sku: string): Promise<ProductReview[]> {
  const url = `${BASE}/${unitId()}/reviews?sku=${encodeURIComponent(sku)}&perPage=10`;
  const res = await fetch(url, {
    headers: { apikey: apiKey() },
    next: { revalidate: 3600 },
  });
  if (!res.ok) throw new Error(`Trustpilot reviews ${res.status}`);
  const data = (await res.json()) as { productReviews: ProductReview[] };
  return data.productReviews ?? [];
}

Because the module runs only on the server, the key stays hidden from visitors, and the revalidate option lets Webflow Cloud serve cached data between refreshes instead of hitting Trustpilot on every request.

4. Render the rating summary and reviews on the product page

With the data layer in place, a Server Component can call it directly and return markup you fully control, with no iframe involved. The component awaits the summary and the review list, then maps each review into your own layout so it inherits your design system. Because the fetch runs on the server, both the request and the API key stay server-side, and the browser receives only finished HTML that search engines can crawl.

Fetch both calls in the product page component:

// app/products/[sku]/page.tsx
import { getProductReviews, getProductSummary } from "@/lib/trustpilot";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ sku: string }>;
}) {
  const { sku } = await params;
  const [summary, reviews] = await Promise.all([
    getProductSummary(sku),
    getProductReviews(sku),
  ]);

  return (
    <section>
      <p>
        {summary.starsAverage.toFixed(1)} out of 5 based on{" "}
        {summary.numberOfReviews.total} reviews
      </p>
      <ul>
        {reviews.map((review) => (
          <li key={review.id}>
            <strong>{review.stars} out of 5</strong>
            <p>{review.content}</p>
            <span>{review.consumer.displayName}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

If part of the page needs to respond to user input, such as a Load more button, expose a thin Route Handler and call it from a Client Component instead.

This Route Handler proxies the same helper for client-side requests:

// app/api/reviews/route.ts
import { NextResponse, type NextRequest } from "next/server";
import { getProductReviews } from "@/lib/trustpilot";

export async function GET(request: NextRequest) {
  const sku = new URL(request.url).searchParams.get("sku");
  if (!sku) {
    return NextResponse.json({ error: "Missing sku parameter" }, { status: 400 });
  }

  const reviews = await getProductReviews(sku);
  return NextResponse.json({ reviews });
}

Either way, the API key lives only in server code, and the SKU in the query string decides which product's reviews come back.

5. Add a TrustBox product widget as a no-backend alternative

When shipping speed matters more than design control, Trustpilot's hosted product review TrustBox widget renders reviews inside an iframe with no server code at all. You add a bootstrap script once, then drop a widget element keyed to the product SKU. The catch on a Next.js app is client-side routing: the bootstrapper runs on the first page load and does not detect route changes, so a widget on a client-navigated page may never initialize. The fix is to call window.Trustpilot.loadFromElement in an effect whenever the SKU changes, as the single-page application guide recommends.

Load the bootstrap script from your root layout with next/script:

// app/layout.tsx
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>
  );
}

Then render a client component that re-initializes the widget on navigation:

// components/trustbox.tsx
"use client";
import { useEffect, useRef } from "react";

declare global {
  interface Window {
    Trustpilot?: {
      loadFromElement: (el: HTMLElement | null, force?: boolean) => void;
    };
  }
}

export default function TrustBox({ sku }: { sku: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Re-initialize the widget after each client-side route change.
    if (window.Trustpilot) {
      window.Trustpilot.loadFromElement(ref.current, true);
    }
  }, [sku]);

  return (
    <div
      ref={ref}
      className="trustpilot-widget"
      data-locale="en-US"
      data-template-id="YOUR-TEMPLATE-ID"
      data-businessunit-id="YOUR-BUSINESS-UNIT-ID"
      data-sku={sku}
      data-style-height="400px"
      data-style-width="100%"
      data-theme="light"
    >
      <a
        href="https://www.trustpilot.com/review/example.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        Trustpilot
      </a>
    </div>
  );
}

Now each product page shows its own SKU-specific reviews, and switching products reloads the widget instead of leaving an empty Trustpilot link behind.

What causes Trustpilot review displays to fail? Tips to troubleshoot

Most Trustpilot display failures trace to one of four causes: an API key sent the wrong way, a SKU that does not match Trustpilot's records, a widget script that never ran, or cached data that has gone stale.

Work through the symptoms below in the order the request travels, from credentials to cache.

Trustpilot returns 401 or 403 to your Route Handler

Cause: The API key is missing, malformed, or passed the wrong way. Trustpilot's public endpoints expect the key in an apikey request header, not as a Bearer token and not as a query parameter, and the private endpoints reject a key outright because they require an OAuth access token. Fix: Confirm the value stored in Webflow Cloud matches your Trustpilot application's Client ID exactly, with no trailing whitespace from a copy-paste. Check that your helper sets the header name as apikey, and that you are calling a public endpoint such as /reviews rather than a /private/ one. The authentication overview lists which endpoints accept a key versus a token. Redeploy after editing the variable, since changes apply only on the next build.

A valid SKU returns an empty reviews array

Cause: The SKU you queried does not match the SKU attached to reviews inside Trustpilot, or the product simply has no reviews yet. Trustpilot ties each product review to the exact SKU string sent with the review invitation, so a difference in case, a prefix, or a trailing character returns nothing even when the product page itself looks correct. It can also mean the Product Reviews add-on is not active on the account. Fix: Call the summary endpoint for the same SKU and read numberOfReviews.total. If it is zero, verify the SKU in your Webflow product data matches what Trustpilot stored, and confirm the add-on is enabled on your plan. Collect at least one product review before expecting output.

The TrustBox widget renders only a Trustpilot link

Cause: The bootstrap script has not run, or it ran before the widget element existed in the DOM. On a Next.js app, the script loads once, but client-side navigation swaps the page without a full reload, so the bootstrapper never sees the new widget and leaves the fallback link in place. Fix: Confirm the bootstrap script is present in the document head and actually loads on the published site, not only in local dev. For client-navigated pages, call window.Trustpilot.loadFromElement inside a useEffect keyed to the SKU so the widget re-initializes after each route change. The widget also renders only after the page finishes loading, so preview or publish rather than checking inside the Designer.

Reviews go stale or you start hitting rate limits

Cause: Every page view calls Trustpilot directly with no cache, which shows outdated data slowly and burns through your yearly API allowance on busy pages. The API module sells calls in tiers by yearly allowance, and unsuccessful calls caused by your own implementation errors still count against the total. Fix: Cache responses inside your data layer using the revalidate option, so each SKU is fetched at most once per window rather than once per visitor. Keep that window at or under 24 hours to respect Trustpilot's Content Refresh guideline. If you store review data rather than proxying it live, also call the Deletions API every 28 days so reviews removed on Trustpilot disappear from your site too.

What you can build with Trustpilot and Webflow

With reviews flowing through a Route Handler, your Webflow product pages can show verified social proof that stays current on its own, styled to match the rest of your site.

A few directions extend naturally from the setup in this guide.

Consider these next builds:

• Per-SKU rating badges: Show each product's average stars and review count across a product grid using the summary endpoint alone.
• Filterable review lists: Layer star and language filters on top of the reviews endpoint for shoppers who want the full picture.
• CMS-synced reviews: Write fetched reviews into a Webflow CMS Collection so a Collection List renders them with native design tools.
• Post-purchase invitations: Trigger a Trustpilot review invitation from a Webflow order event to keep fresh reviews arriving.

The Trustpilot integration page breaks down the widget, Zapier, and API routes in more depth, including CMS syncing and automated invitations.

For deeper customization beyond what these endpoints return, Webflow's developer documentation covers Route Handlers, environment secrets, and storage options for your Webflow Cloud app.