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