Next.js Embed Guide

Add PraiseLane testimonials to your Next.js application with proper SSR handling.

Setup Steps

Create a client component

Since the embed script manipulates the DOM, it must run on the client side. Create a client component.

'use client';

import { useEffect, useRef } from 'react';

interface PraiseLaneWidgetProps {
  projectSlug: string;
  mode?: 'popup' | 'inline' | 'both';
}

export default function PraiseLaneWidget({
  projectSlug,
  mode = 'popup',
}: PraiseLaneWidgetProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://yourapp.com/embed.min.js';
    script.setAttribute('data-project', projectSlug);
    script.setAttribute('data-mode', mode);
    script.defer = true;

    if (mode === 'inline') {
      script.setAttribute(
        'data-inline-target',
        '#praiselane-inline'
      );
    }

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [projectSlug, mode]);

  if (mode === 'inline') {
    return <div id="praiselane-inline" ref={containerRef} />;
  }

  return null;
}

Use in a page or layout

Import the client component in your page or layout. For site-wide notifications, add it to your root layout.

// app/layout.tsx
import PraiseLaneWidget from '@/components/PraiseLaneWidget';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <PraiseLaneWidget projectSlug="my-project" />
      </body>
    </html>
  );
}

Using next/script (alternative)

You can also use the built-in next/script component for simpler cases.

import Script from 'next/script';

export default function Page() {
  return (
    <>
      <h1>Testimonials</h1>
      <Script
        src="https://yourapp.com/embed.min.js"
        data-project="my-project"
        strategy="lazyOnload"
      />
    </>
  );
}

The next/script component handles deduplication and loading strategy automatically.

Configure allowed domains

Add your Next.js app domain to the allowed domains in PraiseLane project settings.

For local development, add localhost:3000.

Is My Embed Working?

Run through this checklist to verify your embed is set up correctly:

Component uses "use client" directive
Script loads on client side only
Domain (including localhost for dev) is in allowed domains
data-project slug matches your project
At least one approved testimonial exists
No hydration mismatch warnings in console

Troubleshooting

Hydration mismatch error

Make sure the PraiseLane component is marked with "use client" at the top. The embed script should only run on the client.

Script loads on every navigation

Use next/script with strategy="lazyOnload" to load the script once. Or place the component in your root layout.

Widget not appearing in development

Add localhost:3000 to your allowed domains. Next.js dev server runs on port 3000 by default.

Other Platform Guides

Back to Embed Documentation