diff --git a/content/docs/brand/quickstart/setup-program.mdx b/content/docs/brand/quickstart/setup-program.mdx index a59ce4b3..072aa288 100644 --- a/content/docs/brand/quickstart/setup-program.mdx +++ b/content/docs/brand/quickstart/setup-program.mdx @@ -69,7 +69,7 @@ The **Tracking** step (**Install tracking**) puts the click tracker on your site - **Your agent**: select **Connect your AI** to connect Claude, Cursor or another AI app and let it add the tracker. Shown only when AI agents are available for your program. - **Script tag**: paste the tag in `` on every page of your site. -- **npm**: install the SDK and wrap your root layout. +- **npm**: install the SDK and wrap your app in the provider. The snippets on the page already carry your Program ID: @@ -86,23 +86,35 @@ The snippets on the page already carry your Program ID: npm install @affitor/sdk ``` +On Next.js App Router, put the provider in a client component and render it once in your layout: + ```tsx -// app/layout.tsx (or your root layout) +// app/providers.tsx (a client component) +'use client'; import { AffitorProvider } from '@affitor/sdk/react'; -export default function RootLayout({ children }) { +export function Providers({ children }: { children: React.ReactNode }) { + return {children}; +} +``` + +```tsx +// app/layout.tsx (Next.js App Router): render it once around your app +import { Providers } from './providers'; + +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + - - {children} - + {children} ); } ``` +The provider runs in the browser, so it lives in a client component: in the App Router, `layout.tsx` is a Server Component. With the Pages Router, wrap your app in `AffitorProvider` in `pages/_app.tsx`. + Below the snippets, **Tracker on** your site shows **Waiting for the first visit**, **Tracker not found on your site yet**, or **First click** and how long ago it arrived. **Check now** asks Affitor to look for the tracker on your website again. Nothing is saved on this step: **Continue** turns on after the first click, and **Skip for now** moves on to Payments. The step is done once Affitor finds the tracker on your website or receives real tracking events. Signup tracking is a separate install: see [signup tracking](/docs/brand/tracking/lead-tracking-signup), and [click tracking](/docs/brand/tracking/click-tracking) for the full click guide.