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" />

Run npm run dev and the widget should render with your approved testimonials.