Next.js (Pages Router)

For projects using the older Pages Router (pages/ directory), the script and the container <div> both go in the page file that shows the wall of love, not in pages/_app.tsx or pages/_document.tsx.

Install#

No package install needed. Replace YOUR_PROJECT_ID with the value from /v1/projects.

Add the script#

In the page that shows the wall (for example pages/testimonials.tsx), use Next's <Script> component 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>
  );
}

_app.tsx and _document.tsx wrap every page, and 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. To show the wall on several pages, put the snippet in a small component and render it only on those pages.

Client-side navigation with next/link 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>.

If your site sends a Content Security Policy, add the sources listed in Content Security Policy.