Next.js (Pages Router)

For projects using the older Pages Router (pages/ directory), the script goes in either pages/_document.tsx or pages/_app.tsx.

Install#

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

Add the script#

In pages/_app.tsx, use Next's <Script> component:

import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <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"
      />
      <Component {...pageProps} />
    </>
  );
}

Add the container#

Drop the container <div> wherever the wall of love should render:

<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>.