Add testimonials to a Next.js site

Add SiteBackend testimonials to a Next.js site with a placeholder div and one script. It works with the App Router and the Pages Router, and with output: "export", because everything loads in the visitor's browser.

Get the IDs from your site's Testimonials tab in the dashboard: Collect for the form customers fill in (c_…), and Widgets for the wall, carousel, highlight or badge that shows approved ones (w_…).

Load the script once

Add it to the root layout with next/script, so every page can use widgets:

import Script from "next/script";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://sitebackend.com/widget.js" strategy="lazyOnload" />
      </body>
    </html>
  );
}

lazyOnload loads the script during browser idle time after the page's resources have loaded. The widget may appear later on a busy page. With the Pages Router, put the same Script in pages/_app.tsx.

Add a component

export function Testimonials({ id }: { id: string }) {
  return <div data-sitebackend-widget={id} />;
}

It's a Server Component; it doesn't need "use client". Use it anywhere:

import { Testimonials } from "@/components/testimonials";
 
export default function Home() {
  return (
    <main>
      <h2>What our customers say</h2>
      <Testimonials id="w_YOUR_WIDGET_ID" />
 
      <h2>Leave a testimonial</h2>
      <Testimonials id="c_YOUR_COLLECT_ID" />
    </main>
  );
}

Client-side navigation

When a visitor follows a Link, Next.js changes the page without reloading it. The script notices widgets on the new page and loads them, so you don't need to do anything.

Local development

Widgets work on http://localhost:3000 even when your site has a domain set in the dashboard: http://localhost and http://127.0.0.1 are allowed on any port. The SiteBackend dashboard preview is also allowed. Preview or staging addresses on other domains are blocked. See sites.

For a contact form on the same site, see add a contact form to a Next.js site.