Next.js (App Router)

Add the ShowTrust widget to a Next.js 13+ App Router project. The script and the container <div> both go in the page that shows the wall of love, not in app/layout.tsx.

Install#

You don't need to install a package. The widget loads from our CDN. Grab the embed snippet from your dashboard (or via GET /v1/projects/:id/embed-snippet) and replace YOUR_PROJECT_ID with the value from /v1/projects.

Add the script#

In the page that shows the wall (for example app/testimonials/page.tsx), add Next's <Script> component with strategy="afterInteractive", right next to the container:

import Script from 'next/script';

export default function TestimonialsPage() {
  return (
    <main>
      <h1>What our customers say</h1>

      <div id="showtrustto-widget"><a slot="st-credit" href="https://showtrust.to/?ref=widget">Wall of love by ShowTrust</a></div>

      <Script id="showtrust-config" strategy="afterInteractive">
        {`window.SHOWTRUSTTO_WIDGET_CONFIG = { projectId: 'YOUR_PROJECT_ID' };`}
      </Script>
      <Script
        src="https://app.showtrust.to/showtrustto-widget.js"
        strategy="afterInteractive"
      />
    </main>
  );
}

Don't put the two <Script> tags in app/layout.tsx: if the script runs on a page without the container, it adds the wall to the end of that page. Next.js needs an id on the inline <Script>, and it must be unique in your app. Showing the wall on more than one page? Move the snippet into a small component (say components/WallOfLove.tsx) and render it only on those pages.

Client-side navigation works both ways: once loaded, the script picks up a container that appears when a visitor navigates to the page, and the wall goes away with the page when they leave. See Single-page apps for details.

Add the container#

The container <div> in the example above marks where the wall of love renders. Place it exactly where you want the wall to appear:

<div id="showtrustto-widget"><a slot="st-credit" href="https://showtrust.to/?ref=widget">Wall of love by ShowTrust</a></div>

On the Free plan the container includes a small Wall of love by ShowTrust link. The widget shows it once, under your wall, so keep it inside the container. To hide it, switch off the credit in your widget settings (Pro walls are white-label) and use the bare container: <div id="showtrustto-widget"></div>.

Run npm run dev, open the page, and the widget should render with your approved testimonials. If your site sends a Content Security Policy, add the sources listed in Content Security Policy.