Luqta Web SDK

Official JavaScript/TypeScript SDK for integrating Luqta contest and quiz management into any web application.

Installation

npm install luqta-web-sdk

Or via CDN:

<script src="https://unpkg.com/luqta-web-sdk/dist/luqta-sdk.min.js"></script>

Quick Start

Preconfigured Mode (Built-in UI)

Drop a ready-made screen directly into your page — no UI work needed.

<div id="luqta-container" style="height: 100vh;"></div>

import { LuqtaClient } from 'luqta-web-sdk';

const client = new LuqtaClient({
  mode: 'preconfigured',
  apiKey: 'YOUR_API_KEY',
  screen: 'dashboard',
  containerId: 'luqta-container',
});

await client.render();

Custom Mode (API Only)

Use the SDK as a pure API client and build your own UI.

import { LuqtaClient } from 'luqta-web-sdk';

const client = new LuqtaClient({
  mode: 'custom',
  apiKey: 'YOUR_API_KEY',
});

await client.initialize();

const contests = await client.contests.getAll();
const quizzes  = await client.quiz.getAll();

Available Screens

| Screen | Description | |---|---| | dashboard | Overview stats and analytics | | contests | List and manage contests | | contest-detail | Single contest details | | create-contest | Create a new contest | | create-quiz | Create a new quiz | | participants | View and filter participants | | subusers | Manage sub-users | | billing | Billing history and reports | | subscription | Subscription plan details | | notifications | Notification center |

Configuration

new LuqtaClient({
  apiKey: string;           // Required — your Luqta API key
  mode?: 'preconfigured' | 'custom';  // Default: 'preconfigured'
  screen?: ScreenType;      // Which screen to render
  containerId?: string;     // ID of the container element (default: 'luqta-container')
  locale?: 'en' | 'ar';    // Language (default: 'en')
  rtl?: boolean;            // Right-to-left layout (default: false)
  branding?: BrandingConfig;
  onAction?: (action) => void;
  onError?: (error) => void;
})

Branding

Customize colors, fonts, and logo to match your brand:

const client = new LuqtaClient({
  mode: 'preconfigured',
  apiKey: 'YOUR_API_KEY',
  screen: 'dashboard',
  branding: {
    primaryColor: '#5304fb',
    secondaryColor: '#8f67fd',
    textColor: '#1E005E',
    fontFamily: 'Inter, sans-serif',
    logoUrl: 'https://yoursite.com/logo.png',
    appName: 'My App',
    borderRadius: 16,
  },
});

Arabic / RTL

const client = new LuqtaClient({
  mode: 'preconfigured',
  apiKey: 'YOUR_API_KEY',
  screen: 'dashboard',
  locale: 'ar',
  rtl: true,
});

API Modules (Custom Mode)

Contests

await client.contests.getAll();
await client.contests.create(contestData);
await client.contests.update(contestData);
await client.contests.delete(contestId);

Quizzes

await client.quiz.getAll();
await client.quiz.create(quizData);
await client.quiz.update(quizData);

Participants

await client.participants.getAll({ page: 1 });

Sub-users

await client.subusers.getAll();
await client.subusers.create({ name, email, password });
await client.subusers.delete(userId);

Billing

await client.billing.getReport({ page: 1 });

Subscription

await client.subscription.getDetail();

Notifications

await client.notifications.getAll();

Analytics

await client.analytics.getContestStats();
await client.analytics.getGenderStats();
await client.analytics.getAgeGroupStats();
await client.analytics.getCountryStats();
await client.analytics.getDailyAnalytics();

Error Handling

try {
  await client.render();
} catch (err) {
  if (err.name === 'LuqtaError') {
    console.log(err.code);    // e.g. 'INVALID_API_KEY'
    console.log(err.message); // Human-readable message
  }
}

Common error codes:

| Code | Description | |---|---| | MISSING_API_KEY | No API key provided | | INIT_FAILED | Initialization request failed | | INVALID_API_KEY | API key is invalid or expired | | CONTAINER_NOT_FOUND | Container element not found in DOM | | NO_TOKEN | Server did not return an auth token |

CDN Usage

<div id="luqta-container" style="height: 600px;"></div>

<script src="https://unpkg.com/luqta-web-sdk/dist/luqta-sdk.min.js"></script>
<script>
  const client = new LuqtaSDK.LuqtaClient({
    mode: 'preconfigured',
    apiKey: 'YOUR_API_KEY',
    screen: 'dashboard',
    containerId: 'luqta-container',
  });
  client.render();
</script>

Other Methods

client.setBranding({ primaryColor: '#ff0000' });
client.setLocale('ar', true);          // locale, rtl
client.configure({ screen: 'billing' });
client.destroy();                       // cleanup & remove from DOM

License

MIT