Get started
Quickstart
Show your first quest to a signed-in user: one backend route and one widget.
On this page
Before you start
- A public API key (aqk_) and a Secret Key (aqs_) from a platform that is accepted and turned on.
- Your app’s address on the platform’s Where AdQuest may appear list, if the publisher keeps one.
- React 18 or newer, a signed-in user and a backend that can keep the Secret Key private.
Step 1: Add a backend route
app/api/adquest/session/route.ts
// Server only. Add your own check that the user is signed in first.
export async function POST() {
const userId = "USER_ID_FROM_YOUR_SESSION";
const response = await fetch(process.env.ADQUEST_API_URL + "/platform/participant-sessions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-AdQuest-Platform-Secret": process.env.ADQUEST_PLATFORM_SECRET!,
},
body: JSON.stringify({ external_user_id: userId }),
});
const { data } = await response.json();
return Response.json({ externalUserId: userId, participantToken: data.participant_token, expiresAt: data.expires_at });
}Step 2: Show the widget
Rewards.tsx
"use client";
import { useEffect, useState } from "react";
import { AdQuestWidget } from "@adquest/sdk/react";
import "@adquest/sdk/styles.css";
export default function Rewards() {
const [session, setSession] = useState<{ externalUserId: string; participantToken: string } | null>(null);
useEffect(() => {
fetch("/api/adquest/session", { method: "POST" }).then((r) => r.json()).then(setSession);
}, []);
if (!session) return <p>Loading rewards…</p>;
return <AdQuestWidget
apiKey={process.env.NEXT_PUBLIC_ADQUEST_PLATFORM_API_KEY!}
baseUrl={process.env.NEXT_PUBLIC_ADQUEST_API_URL!}
externalUserId={session.externalUserId}
participantToken={session.participantToken}
/>;
}Step 3: What you should see
- The widget loads and shows a list of quests and your token balance.
- Opening a quest shows its task. Completing it adds tokens to the balance.