Getting Started

Get Sync As A Service running in your app in 5 minutes.

Step 1: Install

Add the SDK from our CDN:

<script src="https://sync.brandclub.com/sync-sdk/latest/sdk.umd.js"></script>

Note: NPM package coming soon for React/bundler integration.

Step 2: Add to Your App (Sandbox)

Start with sandbox environment for testing:

<div id="sync-widget"></div>

<script src="https://sync.brandclub.com/sync-sdk/latest/sdk.umd.js"></script>
<script>
  BrandclubSync.init({
    clientId: "bc_your_app_id", // Replace with your client ID
    environment: "sandbox", // Use sandbox API for testing
    container: document.getElementById("sync-widget"),
    onSync: (result) => {
      console.log("Sync complete!", result);
      // Refresh your data here
    },
  });
</script>

Step 3: Test It

Open your app. The widget handles the entire user experience:

User Experience Flow

1. Sign In (Phone Authentication)

• User enters their phone number

• Receives a 6-digit OTP code via SMS

• Enters the code to authenticate

• Their phone number becomes their portable identity across all Sync As A Service-powered apps

2. Connect Retailers

• Widget shows a grid of available retailers (Amazon, Walmart, Target, etc.)

• User selects a retailer to connect

• Enters their retailer username/password

• Credentials are encrypted and never stored by your app

3. Handle MFA (if required)

• If the retailer requires MFA, the widget automatically prompts the user

• Supports OTP via SMS/email, security questions, and authenticator apps

• User completes the challenge without leaving your app

4. Sync Progress

• Shows real-time sync status: "Connecting..." → "Syncing..." → "Complete!"

• Displays each retailer being synced with status indicators

• MFA challenges appear inline if needed during sync

5. View Connected Accounts

• Shows all connected retailers with status badges

• "Connected" (green) - working, will auto-sync

• "Disconnected" (red) - needs re-authentication, shows "Fix" button

• Last sync time displayed for each retailer

For testing/evaluation: A demo client (bc_example_rewards_app_demo) is available with test credentials - contact us for access.

Step 4: Fetch Order Data

Once synced, get orders from your backend:

// Your backend endpoint (point to sandbox for testing)
app.get("/api/orders", async (req, res) => {
  const token = req.headers.authorization?.split(" ")[1];

  const response = await fetch("https://sync-beta.brandclub.com/sync/orders", {
    headers: { Authorization: `Bearer ${token}` },
  });

  const orders = await response.json();
  res.json(orders);
});

Step 5: Go to Production

When ready to go live:

1. Update SDK configuration:

   BrandclubSync.init({
     clientId: "bc_your_app_id",
     environment: "production", // Change to production API
     container: document.getElementById("sync-widget"),
     widgetVersion: "v1.0.0", // Optional: pin version for stability
   });

2. Update backend API calls:

   // Change sync-beta.brandclub.com → sync.brandclub.com
   const response = await fetch("https://sync.brandclub.com/sync/orders", {
     headers: { Authorization: `Bearer ${token}` },
   });

Done! Your app now has automatic purchase tracking.

Tip: For production, consider pinning widgetVersion to a specific version (e.g., "v1.0.0") to prevent unexpected changes when we update the widget.

Recurring Sync

Once connected, we auto-sync users automatically:

• Weekly auto-sync - We attempt to auto-sync users who have been inactive for a week

No manual triggers needed - purchases appear automatically.

What's Next?

• Integration Guides - React, Mobile WebView, Backend examples

• Widget Reference - All widget states and customization

• API Reference - REST API endpoints

• Data Reference - Order data structure

Demo

See a working integration: Contact us for a demo link.