uier
Sign in

Add website feedback to Next.js

Install the uier toolbar in the App Router with next/script and check it on your project’s site.

Create a project

Create the project

Add the exact addresses you will review.

Sign in to uier and create a project for your site. Add its production or preview URL, then open the project’s installation guide. Copy the project code from the script tag shown there.

Add the script to your root layout

Use next/script inside the App Router’s body element.

Keep your existing layout and its children. Add the Script element below the children, replacing YOUR_PROJECT_CODE with the code from your project.

// app/layout.tsx
import Script from 'next/script';

// Inside <body>, after {children}:
<Script src="https://uier.io/toolbar.js" data-uier-project="YOUR_PROJECT_CODE" strategy="afterInteractive" />

This example comes from the same snippet generator as the project’s installation guide. It loads the toolbar after the page becomes interactive.

Check the installation

  1. Deploy the layout change to an address configured in the project.
  2. Run the installation check from uier and open the review link it provides.
  3. Pin a test comment, open the inbox, and check that the comment appears in the project.
  4. Navigate to another page on the site and check the toolbar there too.

If the toolbar does not load

Start with the project address and your browser’s console.

Confirm that the script uses the copied project code and that the current site address is configured in that project. If the site sends a Content Security Policy, merge the sources shown in the installation guide into the existing directives. Keep any request nonces your app already requires.

The script tag loads the toolbar. Project access settings still determine who can review the site.

Plan a client review