Skip to main content

Custom landing with JavaScript SDK

Build your own landing on your domain or CMS and connect it to an IncentIA campaign using the JavaScript SDK. Useful when you want full UX control or to integrate capture with your existing site.

Case: you have a marketing landing already designed in your CMS (Webflow, Framer, custom HTML) and you want a "Participate and win" button to trigger the wheel of an IncentIA campaign.

Time: ~30 min · Level: intermediate (basic HTML/JS).

Prerequisites​

  • A campaign with a game already created (games tutorial).
  • Your tenant has public API Key enabled (Admin → Integrations → API Keys → create one with scope campaign-participate).
  • CORS permissions configured for your landing domain (Admin → Settings → CORS origins).

1. Include the SDK​

Add in your landing's <head>:

<script src="https://cdn.incentia.app/sdk/v1/incentia.min.js"></script>

Or install via npm if your stack allows:

npm install @incentia/sdk

2. Initialise the client​

const incentia = IncentiaSDK.create({
  apiKey: 'pk_live_xxxxx',          // public API key
  tenant: 'mycompany',              // tenant subdomain
  baseUrl: 'https://app.incentia.app'
});

The SDK exposes async methods for the full participation cycle.

3. Identify the visitor​

Two options:

a) OTP (member enters email/phone):

// Send code
await incentia.auth.sendOtp({ email: 'user@example.com' });

// Verify code
const session = await incentia.auth.verifyOtp({
  email: 'user@example.com',
  code: '123456'
});

b) Existing token (visitor comes from your authenticated system):

incentia.auth.setToken(myBackendToken);

4. Register the participation​

const participation = await incentia.campaigns.participate({
  campaignSlug: 'summer-25',
});

console.log(participation.id);         // participation UUID
console.log(participation.canPlay);    // true if allowed to play
console.log(participation.remaining);  // plays remaining

If the member exhausted their plays, canPlay = false and you can show the corresponding message.

5. Trigger the game​

const result = await incentia.games.play({
  participationId: participation.id,
});

console.log(result.prize);
// { id: 42, name: '10% coupon', code: 'SUMMER10', type: 'coupon' }

The backend evaluates the wheel (respecting probabilities and stock) and returns the prize. You can ignore the logic and render your own wheel animation — the result is already decided.

6. Render the result​

if (result.prize.type === 'coupon') {
  document.getElementById('result').innerHTML = `
    <h2>You won ${result.prize.name}!</h2>
    <p>Code: <code>${result.prize.code}</code></p>
    <p>We emailed it to you.</p>
  `;
} else if (result.prize.type === 'physical') {
  document.getElementById('result').innerHTML = `
    <h2>You won ${result.prize.name}!</h2>
    <p>We'll contact you for shipping.</p>
  `;
}

The email with coupon/instructions is auto-sent by IncentIA if the campaign template is configured.

7. Full example (HTML+JS)​

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.incentia.app/sdk/v1/incentia.min.js"></script>
</head>
<body>
  <h1>Spin the wheel!</h1>
  <form id="otp-form">
    <input type="email" id="email" placeholder="Your email" required />
    <button type="submit">Enter</button>
  </form>
  <div id="game" style="display:none"></div>
  <div id="result"></div>

  <script>
    const incentia = IncentiaSDK.create({
      apiKey: 'pk_live_xxxxx',
      tenant: 'mycompany',
    });

    document.getElementById('otp-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const email = document.getElementById('email').value;
      await incentia.auth.sendOtp({ email });
      const code = prompt('OTP code received:');
      await incentia.auth.verifyOtp({ email, code });

      const p = await incentia.campaigns.participate({ campaignSlug: 'summer-25' });
      if (!p.canPlay) {
        document.getElementById('result').innerText = 'Already participated';
        return;
      }
      document.getElementById('game').style.display = 'block';
      // here you can render your wheel animation...
      const result = await incentia.games.play({ participationId: p.id });
      document.getElementById('result').innerHTML = `${result.prize.name}!`;
    });
  </script>
</body>
</html>

8. Advanced customisation​

The SDK doesn't force you to use its UI — it only orchestrates backend calls. You can:

  • Use your own wheel animation (CSS, canvas, Lottie) and just show the prize at the end.
  • Use your own OTP system (send emails yourself) if you don't want IncentIA's.
  • Integrate Google Analytics / Meta Pixel by injecting events at each step.

9. Security​

  • The public API key only allows scoped actions: participate, play, auth. Does NOT access other members' data.
  • The secret NEVER lives in the frontend. Use only pk_ (public).
  • For admin ops (create campaigns, read metrics) use private API key from your backend.

10. Debug​

  • Browser console: incentia.debug = true for verbose logs.
  • Admin → Integrations → API Keys → {your key} → Logs — every request with timestamp and status.

What you built​

  • Custom landing with full design control.
  • Visitor identification via OTP.
  • Participation and game triggered via SDK.
  • Results and prizes managed in your UI.

Next steps​

  • Server-side integration for critical ops → use the REST API.
  • Outbound webhooks from IncentIA to your system when someone plays → Admin → Webhooks.
  • Combine with Shopify to grant spins per purchase → Shopify tutorial.