Skip to Content
DocumentationWhiteLabel Widget · Widget React SDKQuick Start

Quick Start

Get up and running with TaskOn in your React application in minutes.

Before integration, make sure your Widget Mode setup is completed in TaskOn dashboard:

And ensure you already have:

  • Your TaskOn Client ID (TASKON_CLIENT_ID)
  • Your TaskOn Private Key (TASKON_PRIVATE_KEY)

1. Install

npm install @taskon/widget-react @taskon/core

2. Set Up Providers

TaskOnProvider is required.
ThemeProvider is optional.

  • In Cloud Widget mode (widgetId), you usually only need TaskOnProvider.
  • In Local Props mode (no widgetId), add ThemeProvider when you need local theme control.

Required: TaskOnProvider

App.tsx
import { TaskOnProvider } from "@taskon/widget-react/core";
import { QuestWidget } from "@taskon/widget-react/quest";
 
function App() {
  return (
    <TaskOnProvider
      config={{
        clientId: "YOUR_CLIENT_ID",
        onRequestLogin: () => {
          // Open your login modal or redirect to login page
        },
      }}
    >
      <QuestWidget widgetId={98765} />
    </TaskOnProvider>
  );
}

Optional: ThemeProvider (typically for Local Props mode)

App.tsx
import { TaskOnProvider, ThemeProvider } from "@taskon/widget-react/core";
import { QuestWidget } from "@taskon/widget-react/quest";
 
function App() {
  return (
    <TaskOnProvider
      config={{
        clientId: "YOUR_CLIENT_ID",
        onRequestLogin: () => {
          // Open your login modal or redirect to login page
        },
      }}
    >
      <ThemeProvider theme={{ mode: "light" }}>
        <QuestWidget campaignId={12345} />
      </ThemeProvider>
    </TaskOnProvider>
  );
}

3. Authentication

For loginRequired handling, host login sync (login / logout), and server-side signature details, see Authentication.

4. Add a Widget

You can integrate widgets in two modes:

Mode A: Cloud Widget (widgetId)

  1. Go to taskon.xyz  and sign in.
  2. Open Business Entity Hub / White-Label / Widget in the dashboard.
  3. Create and save a widget config, then copy the generated widgetId.
  4. Use this widgetId in your React app.
QuestPageWidgetId.tsx
import { QuestWidget } from "@taskon/widget-react/quest";
 
function QuestPageWidgetId() {
  return <QuestWidget widgetId={98765} />;
}

Mode B: Local Props (no widgetId)

Import and render widget directly with business props:

QuestPageLocal.tsx
import { QuestWidget } from "@taskon/widget-react/quest";
 
function QuestPageLocal() {
  return <QuestWidget campaignId={12345} />;
}

Next Steps

Last updated on
OverviewInstallation