Quest Widget

QuestWidget displays quest details, tasks, rewards, eligibility, and submission flow.

Import


import { QuestWidget } from "@taskon/widget-react/quest";

Usage

Campaign ID Mode


<QuestWidget campaignId={12345} />


<QuestWidget widgetId={987} />

Use widgetId when config/theme is managed in TaskOn dashboard (Business Entity Hub / White-Label / Widget).

Key Props

Prop	Type	Description
`campaignId`	`number`	Campaign ID to render (required when `widgetId` is not provided)
`widgetId`	`number`	Load function config and theme from cloud
`themeMode`	`"light" \| "dark" \| "auto"`	Override cloud mode at runtime
`isPreview`	`boolean`	Preview mode
`showBanner`	`boolean`	Show/hide banner
`showTitle`	`boolean`	Show/hide title
`showDescription`	`boolean`	Show/hide description
`showParticipants`	`boolean`	Show/hide participant count
`showShare`	`boolean`	Show/hide share button
`shareUrl`	`string`	Custom share URL
`shareText`	`string`	Custom share text
`rewardDisplayMode`	`"popup" \| "redirect"`	Reward detail display mode
`rewardRedirectUrl`	`string`	Redirect URL when `rewardDisplayMode="redirect"`

Useful Callbacks

Callback	Signature	Description
`onLoaded`	`(campaign) => void`	Called when campaign data is loaded
`onTaskCompleted`	`(taskId) => void`	Called when a task is completed
`onSubmitSuccess`	`() => void`	Called when quest submit succeeds
`onError`	`(error) => void`	Called on widget errors
`onConnectWallet`	`() => void`	Called when wallet connection is required

Example

QuestPage.tsx


import { TaskOnProvider, ThemeProvider } from "@taskon/widget-react/core";
import { QuestWidget } from "@taskon/widget-react/quest";
 
function QuestPage() {
  return (
    <TaskOnProvider config={{ clientId: "YOUR_CLIENT_ID" }}>
      <ThemeProvider theme={{ mode: "light" }}>
        <QuestWidget
          campaignId={12345}
          showBanner
          onSubmitSuccess={() => {
            console.log("Quest submitted");
          }}
        />
      </ThemeProvider>
    </TaskOnProvider>
  );
}