Next.js (App Router)

Add the ShowTrust widget to a Next.js 13+ App Router project. The script tag goes in your root layout; the container <div> goes wherever you want the wall of love to appear.

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 app/layout.tsx, use Next's <Script> component with strategy="afterInteractive":

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <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"
        />
      </body>
    </html>
  );
}

Add the container#

Wherever you want the wall of love to render, drop in the container <div>:

<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 and the widget should render with your approved testimonials.