Next.js

Show progress

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

import Script from "next/script";

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

Count the action

Copy your program's incoming URL from Streakfox setup and keep it in the server-only STREAKFOX_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.STREAKFOX_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. Streakfox 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. @streakdev/react and @streakdev/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.