Add Product Tours to Your Next.js App in 15 Minutes

Install Guidez in your Next.js app by adding the Guidez snippet to your root layout.tsx (App Router) or _document.tsx (Pages Router). After authentication, call window.Guidez.identify({ userId, email, ...attributes }) to identify the user. Your first AI-generated tour will be live in under an hour with zero additional code.

Yes. Guidez works with both App Router and Pages Router. For App Router, add the Guidez script tag to your root layout.tsx inside a 'use client' component or via next/script. Guidez handles client-side navigation detection automatically — no custom router event listeners needed.

No. The Guidez snippet loads asynchronously and weighs under 8kb compressed. It has no impact on Core Web Vitals (LCP, CLS, FID) and doesn't block rendering. Next.js Lighthouse scores are unchanged after Guidez installation.

Guidez automatically detects URL changes from Next.js client-side navigation (using the History API) and evaluates tour triggers for the new page. No additional configuration required — tours trigger correctly on both hard navigation and client-side route changes.

Yes. After the user authenticates via NextAuth, Clerk, or Auth0, call window.Guidez.identify() with the user's ID and attributes in your authenticated layout component. Guidez will only show flows after identification, ensuring non-authenticated pages are never targeted.