OfferWall SDK Quick Integration Guide

1. Add the Loader Script

Safe Loading Method

Add this code to ensure script loading doesn't block your application:

document.addEventListener('DOMContentLoaded', function() {
    if (!window.loadOfferWallSDK) {
        const script = document.createElement('script');
        script.src = 'https://wall.giga.pub/api/v1/loader.js?projectId=YOUR_PROJECT_ID';
        script.async = true;
        document.head.appendChild(script);
    }
});

Simplest Loading Method

Or simply add this to your HTML:

<script src="https://wall.giga.pub/api/v1/loader.js?projectId=YOUR_PROJECT_ID"></script>

Note: Replace YOUR_PROJECT_ID with your actual project ID. The loader is served by the backend and automatically selects the optimal CDN based on user's region.

2. Initialize the SDK

Handling Asynchronous SDK Loading

The pattern (window.loadGigaSDKCallbacks || (window.loadGigaSDKCallbacks = [])).push(() => {...}) registers a function to be executed after the SDK is fully loaded, even if the script loads asynchronously. This ensures your initialization code runs only when the SDK is available, preventing errors due to missing dependencies.

JavaScript

// Initialize SDK
(window.loadGigaSDKCallbacks || (window.loadGigaSDKCallbacks = [])).push(
    () => {
        window.loadOfferWallSDK({
            projectId: 'YOUR_PROJECT_ID' // Replace with your project ID
        })
        .then(sdk => {
            // Save SDK reference
            window.gigaOfferWallSDK = sdk;

            // Listen for reward claims
            sdk.on('rewardClaim', async (data) => {
              console.log('Reward claim received:', data);

              // Credit the user in your system
              await creditUserReward(data.userId, data.amount);

              // Confirm the reward
              sdk.confirmReward(data.rewardId, data.hash);
            });
        })
        .catch(error => {
            console.error('Error loading SDK:', error);
        });
    }
);

TypeScript

// Reward claim interface
interface RewardClaim {
  rewardId: string | number;
  userId: string;
  projectId: string | number;
  hash: string;
  amount: number;
  description?: string;
}

// Initialize SDK
(window.loadGigaSDKCallbacks || (window.loadGigaSDKCallbacks = [])).push(
    () => {
      (window as any).loadOfferWallSDK({
        projectId: 'YOUR_PROJECT_ID' // Replace with your project ID
      })
      .then((sdk: any) => {
        // Save SDK reference
        (window as any).gigaOfferWallSDK = sdk;

        // Listen for reward claims
        sdk.on('rewardClaim', async (data: RewardClaim) => {
          console.log('Reward claim received:', data);

          // Credit the user in your system
          await creditUserReward(data.userId, data.amount);

          // Confirm the reward
          sdk.confirmReward(data.rewardId, data.hash);
        });
      })
      .catch((error: Error) => {
        console.error('Error loading SDK:', error);
      });
});

React

import { useEffect, useState } from 'react';

function App() {
  const [offerWallSDK, setOfferWallSDK] = useState(null);

  useEffect(() => {
    // Initialize the SDK when component mounts
      (window.loadGigaSDKCallbacks || (window.loadGigaSDKCallbacks = [])).push(
          () => {
              window.loadOfferWallSDK({
                projectId: 'YOUR_PROJECT_ID'
              })
              .then(sdk => {
                // Save SDK reference
                window.gigaOfferWallSDK = sdk;
                setOfferWallSDK(sdk);

                // Listen for reward claims
                sdk.on('rewardClaim', async (data) => {
                  console.log('Reward claim received:', data);

                  // Credit the user in your system
                  await creditUserReward(data.userId, data.amount);

                  // Confirm the reward
                  sdk.confirmReward(data.rewardId, data.hash);
                });
              })
              .catch(error => {
                console.error('Error loading SDK:', error);
              });
    });

    return () => {
      if (window.gigaOfferWallSDK) {
        window.gigaOfferWallSDK.destroy();
      }
    };
  }, []);

  // Rest of your component...
}

React + TypeScript

import { useEffect, useState } from 'react';

interface RewardClaim {
  rewardId: string | number;
  userId: string;
  projectId: string | number;
  hash: string;
  amount: number;
  description?: string;
}

interface OfferWallSDK {
  open: () => void;
  close: () => void;
  confirmReward: (rewardId: string | number, hash: string) => Promise<boolean>;
  hasOffers: () => boolean;
  on: (event: string, handler: (data: any) => void) => void;
  off: (event: string, handler: (data: any) => void) => void;
  destroy: () => void;
}

function App() {
  const [offerWallSDK, setOfferWallSDK] = useState<OfferWallSDK | null>(null);

  useEffect(() => {
    ((window as any).loadGigaSDKCallbacks || ((window as any).loadGigaSDKCallbacks = [])).push(
      () => {
        (window as any).loadOfferWallSDK({
          projectId: 'YOUR_PROJECT_ID'
        })
          .then((sdk: OfferWallSDK) => {
            (window as any).gigaOfferWallSDK = sdk;
            setOfferWallSDK(sdk);

            sdk.on('rewardClaim', async (data: RewardClaim) => {
              console.log('Reward claim received:', data);
              await creditUserReward(data.userId, data.amount);
              sdk.confirmReward(data.rewardId, data.hash);
            });
          })
          .catch((error: Error) => {
            console.error('Error loading SDK:', error);
          });
      }
    );

    return () => {
      if ((window as any).gigaOfferWallSDK) {
        (window as any).gigaOfferWallSDK.destroy();
      }
    };
  }, []);

  // Rest of your component...
}

3. Show the OfferWall

Add a button to open the OfferWall:

JavaScript

function openOfferWall() {
  if (window.gigaOfferWallSDK) {
    window.gigaOfferWallSDK.open();
  }
}

// Example: Opening on button click
document.getElementById('rewards-button').addEventListener('click', openOfferWall);

TypeScript

function openOfferWall(): void {
  if ((window as any).gigaOfferWallSDK) {
    (window as any).gigaOfferWallSDK.open();
  }
}

// Example: Opening on button click
document.getElementById('rewards-button')?.addEventListener('click', openOfferWall);

React

function RewardsButton() {
  const openOfferWall = () => {
    if (window.gigaOfferWallSDK) {
      window.gigaOfferWallSDK.open();
    }
  };

  return (
    <button onClick={openOfferWall}>
      Open Rewards
    </button>
  );
}

React + TypeScript

const RewardsButton: React.FC = () => {
  const openOfferWall = (): void => {
    if ((window as any).gigaOfferWallSDK) {
      (window as any).gigaOfferWallSDK.open();
    }
  };

  return (
    <button onClick={openOfferWall}>
      Open Rewards
    </button>
  );
};

Reward Validation Modes

The OfferWall supports two reward confirmation modes, configured per-project:

Default Mode (simplified)

By default, hash validation is disabled — the examples above apply as-is. Your app receives the rewardClaim event, credits the user, and calls sdk.confirmReward(data.rewardId, data.hash) directly. No server-side hash generation required.

Advanced Mode (server-side hash validation)

For projects with stricter security requirements, server-side hash validation can be enabled. In this mode, your backend must verify the incoming hash and generate a cryptographic confirmation hash using your project's secretKey.

See the Advanced Usage Guide for full implementation details.

That's it!

The basics are:

1. Add the loader
2. Initialize with your project ID
3. Show the OfferWall when needed
4. Listen for reward claims and confirm them

The SDK also provides optional methods for deeper integration:

• hasOffers() — check if offers are available before showing UI
• getOffers() — fetch available/active tasks to display in your own UI
• openOffer(offerId) — open a specific offer directly
• getRewards() — fetch all rewards with their statuses
• claimReward(rewardId) — claim a reward without opening the iframe
• pending() — get rewards awaiting confirmation (useful on app return)

For usage examples, server-side hash validation, and event system details, see the Advanced Usage Guide.