Next.js

Show progress

Add the widget to your signed-in layout with next/script:

import Script from "next/script";

export function PerkadooWidget({ memberId }: { memberId: string }) {
  return (
    <Script
      src="https://cdn.perkadoo.com/widget.js"
      data-project={process.env.NEXT_PUBLIC_PERKADOO_PROJECT_KEY}
      data-event="YOUR_ACTION"
      data-member={memberId}
      strategy="afterInteractive"
    />
  );
}

Count the action

Copy your streak's incoming URL from the Setup page and keep it in the server-only PERKADOO_INCOMING_URL environment variable. Call this helper from your authenticated backend after confirming that the member completed the lesson. Resolve the member ID from your authenticated session rather than trusting a member ID supplied by the browser.

import "server-only";

export async function countLesson(memberId: string, lessonId: string) {
  const response = await fetch(process.env.PERKADOO_INCOMING_URL!, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      member: memberId,
      completion_id: `lesson:${lessonId}`,
    }),
  });
  if (!response.ok) throw new Error(await response.text());
}

The incoming URL contains a secret. Never prefix its environment variable with NEXT_PUBLIC_ or include it in a browser request. Use the same member ID in the widget's data-member and the request's member field. Perkadoo hashes that value within your project. The incoming URL guide lists fields, retry behaviour and errors. Verify processed progress in setup before going live.

data-member displays progress only. Protected reward values require signed identity.

Preview packages

Preview, not yet on npm. @perkadoo/react and @perkadoo/web aren't published yet. When they are, the React SDK shows progress in client components and the Web SDK handles aliasUser on the server. Counting stays on the incoming URL above.