Skip to main content

Start Rewarding Customers in Under 5 Minutes

Get your Loyalteez integration up and running—from zero to first reward in 5 minutes.

Step 1: Get Your Brand ID in 30 Seconds​

  1. Visit partners.loyalteez.app
  2. Create your account or sign in (Google/GitHub OAuth supported)
  3. Go to Settings → Account
  4. Copy your Brand ID (looks like: 0x4751...c725e)

💡 No Credit Card Required: Test with free credits to verify integration before purchasing.

Step 2: Add Our 5KB JavaScript SDK to Your Site​

Add this script tag to your HTML <head> or before </body>:

Works with React, Vue, Angular, and Vanilla JS:

<script src="https://api.loyalteez.app/sdk.js"></script>
<script>
  // Initialize with YOUR brand ID
  LoyalteezAutomation.init('YOUR_BRAND_ID_HERE');
</script>

That's it! The SDK is now tracking events based on your configuration.

Step 3: Track Your First Customer Event​

Open your browser console and run this to verify:

// Track a test event
LoyalteezAutomation.track('test_event', {
  userEmail: '[email protected]',
  metadata: { source: 'console_test' }
});

Check your Partner Portal Analytics to see the event appear.

Step 4: Watch Rewards Distribute Automatically​

In your Partner Portal:

  1. Go to Settings → LTZ Distribution
  2. Click Choose Industry Template (e-commerce, SaaS, media, etc.)
  3. Set reward amounts for each event type (or use our recommended values)
  4. Save your configuration

That's it! Your loyalty program is now live. Every tracked event automatically creates wallets and distributes LTZ rewards.

🎉 You're Live! Common Integration Patterns​

The SDK automatically tracks configured events. Here are popular use cases:

Track Account Creation​

// After user signs up
LoyalteezAutomation.track('account_creation', {
  userEmail: user.email,
  metadata: {
    userId: user.id
  }
});

Track Purchases​

// After successful purchase
LoyalteezAutomation.track('subscribe_renewal', {
  userEmail: user.email,
  metadata: {
    orderId: order.id,
    amount: order.total
  }
});

Track Newsletter Signups​

<!-- Auto-tracked with data attribute -->
<form data-ltz-form="newsletter_signup">
  <input type="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>

The SDK will automatically detect the form submission and track the event!

Configuration Reference​

Loyalteez URLs​

ServiceURLPurpose
JavaScript SDKhttps://api.loyalteez.app/sdk.jsEvent tracking
Event Handler APIhttps://api.loyalteez.app/loyalteez-api/manual-eventManual events
Gas Relayerhttps://relayer.loyalteez.app/relayGasless transactions
Partner Portalhttps://partners.loyalteez.appDashboard

Smart Contracts (Soneium Mainnet)​

ContractAddress
Loyalteez Token0x5242b6DB88A72752ac5a54cFe6A7DB8244d743c9
PerkNFT0x6ae30d6Dcf3e75456B6582b057f1Bf98A90F2CA0
PointsSale0x5269B83F6A4E31bEdFDf5329DC052FBb661e3c72

Network Configuration​

const SONEIUM_MAINNET = {
  chainId: 1868,
  name: 'Soneium Mainnet',
  rpcUrl: 'https://rpc.soneium.org',
  blockExplorer: 'https://soneium.blockscout.com',
  nativeCurrency: {
    name: 'ETH',
    symbol: 'ETH',
    decimals: 18
  }
};

Environment Variables (Optional)​

If you're building a React/Vue/Next.js app, create a .env file:

# SDK Configuration
VITE_LOYALTEEZ_BRAND_ID=your_brand_id_here

# Worker URLs (optional - SDK uses these by default)
VITE_API_URL=https://api.loyalteez.app
VITE_GAS_RELAYER_URL=https://relayer.loyalteez.app

# Network (optional - for direct contract interactions)
VITE_CHAIN_ID=1868
VITE_RPC_URL=https://rpc.soneium.org

# Smart Contracts (optional)
VITE_LOYALTEEZ_ADDRESS=0x5242b6DB88A72752ac5a54cFe6A7DB8244d743c9
VITE_PERK_NFT_ADDRESS=0x6ae30d6Dcf3e75456B6582b057f1Bf98A90F2CA0
VITE_POINTS_SALE_ADDRESS=0x5269B83F6A4E31bEdFDf5329DC052FBb661e3c72

Then use in your code:

// React example
LoyalteezAutomation.init(import.meta.env.VITE_LOYALTEEZ_BRAND_ID);

// Or for Create React App
LoyalteezAutomation.init(process.env.REACT_APP_LOYALTEEZ_BRAND_ID);

Framework-Specific Setup​

React​

// src/App.tsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    if (typeof LoyalteezAutomation !== 'undefined') {
      LoyalteezAutomation.init('YOUR_BRAND_ID', {
        debug: process.env.NODE_ENV === 'development'
      });
    }
  }, []);

  return <YourApp />;
}

Next.js​

// pages/_app.tsx
import { useEffect } from 'react';
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  const handleSDKLoad = () => {
    LoyalteezAutomation.init(process.env.NEXT_PUBLIC_BRAND_ID);
  };

  return (
    <>
      <Script 
        src="https://api.loyalteez.app/sdk.js" 
        onLoad={handleSDKLoad}
      />
      <Component {...pageProps} />
    </>
  );
}

Vue.js​

<!-- App.vue -->
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  if (typeof LoyalteezAutomation !== 'undefined') {
    LoyalteezAutomation.init(import.meta.env.VITE_BRAND_ID, {
      autoTrack: true
    });
  }
});
</script>

WordPress​

Add to functions.php:

function loyalteez_enqueue_script() {
  wp_enqueue_script(
    'loyalteez-sdk',
    'https://api.loyalteez.app/sdk.js',
    array(),
    null,
    true
  );
  
  $brand_id = get_option('loyalteez_brand_id');
  wp_add_inline_script('loyalteez-sdk', "
    LoyalteezAutomation.init('$brand_id', { autoTrack: true });
  ");
}
add_action('wp_enqueue_scripts', 'loyalteez_enqueue_script');

Troubleshooting​

SDK Not Loading?​

// Check if SDK is loaded
console.log('Loyalteez SDK loaded:', typeof LoyalteezAutomation !== 'undefined');

// If false, check:
// 1. Script tag is correct: https://api.loyalteez.app/sdk.js
// 2. No ad blockers blocking the script
// 3. Browser console for errors

Events Not Tracking?​

  1. Enable debug mode:

    LoyalteezAutomation.init('YOUR_BRAND_ID', { debug: true });

  2. Check console for logs starting with [Loyalteez]

  3. Verify your Brand ID is correct

  4. Check Partner Portal → Analytics for received events

CORS Errors?​

The API automatically handles CORS. If you see CORS errors:

  1. Add your domain in Partner Portal → Settings → Domains
  2. Ensure you're using HTTPS in production

Need Help?​

Next Steps​

You're ready to start rewarding your users! 🎉

🚀 What's Next?​

Now that you've completed the quick start, here are your next steps:

1. Enable Gasless Perk Redemption (15 minutes)​

Let users redeem perks without paying gas fees using our Gas Relayer.

👉 Gas Relayer Guide

2. Set Up Webhook Notifications (10 minutes)​

Get real-time notifications when rewards are distributed.

👉 Webhook Integration Guide

3. Build Your First Use Case (20 minutes)​

Follow a complete tutorial:

4. Customize Event Rules (Optional)​

Fine-tune reward amounts, cooldown periods, and max claims per user.

👉 Custom Events Guide

5. Add a Discord Bot (5 minutes)​

Reward your community members for daily check-ins and events.

👉 Discord Integration Guide

6. Deploy to Production (30 minutes)​

Review our production checklist and best practices.

👉 Deployment Guide

❓ Common Questions​

How do I test without affecting production?

Use test email addresses ([email protected]) or create a separate test brand account. All events and wallets are on the real blockchain (Soneium), but you can use test credits.

What happens if my users don't have crypto wallets?

Perfect! That's exactly what we handle. When a user receives their first reward, we automatically create a non-custodial wallet for them. They can access it later via email authentication—no blockchain knowledge required.

Can I track events from my backend instead of frontend?

Absolutely! Use our REST API to track events from your server. This is perfect for sensitive operations like purchases or subscription renewals.

👉 REST API Reference

📚 Additional Resources​

Need Help? Join our Discord community or email [email protected]

Last updated on