Kigo TOP SDK Context Configuration

The Kigo TOP SDK Context is a dynamic configuration system that allows partners to tailor the behavior, branding, and user experience of the Kigo Tokenized Offers Platform (TOP). This context provides flexible, deeply mergeable customization for program branding, theming, components, user data, UX features, and more.

Setting the Kigo Context

Initial Setup

You can configure the KigoContext when the Kigo TOP SDK is initialized. This is typically done within the Kigo.onReady method, which fires once the SDK is fully loaded and ready:

window.Kigo.onReady = function (kigo) {
  kigo.setContext({
    theme: {
      palette: {
        primary: '#007BFF',
        secondary: '#F5F5F5',
        fontAccentColor: '' // optional. This is use for our button links. ex. Return to offers, estimated savings
      }
    }
  });
};

Updating the Context Asynchronously

You can modify the SDK context at runtime using Kigo.setContext, ideal for updating data after authentication or fetching dynamic configurations:

window.Kigo.setContext({
  locale: {
    merchantProductLabel: { singular: 'merchant', plural: 'merchants' }
  },
  showTrendingTags: true
});

Deep Merging Behavior

The Kigo TOP SDK uses deep merging for context updates. Only the properties you provide will override defaults or previous values—everything else remains unchanged.

// Only updates the wallet banner display; other wallet config stays intact
window.Kigo.setContext({
  walletConfig: {
    showBanner: false
  }
});

Full Context Type Reference

The KigoContext supports the following structure:

type KigoContext = {
  theme?: {
    palette: { primary: string; secondary: string };
    typography?: KigoTypographyContext;
  };
  locale?: {
    merchantProductLabel: { singular: string; plural: string };
  };
  components?: {
    Header: {
      defaultProps: {
        logo: string;
        backgroundColor: string;
        textColor?: string;
        borderColor?: string;
        headerButtonBackgroundColor?: string;
        headerButtonTextColor?: string;
      };
    };
    Landing?: {
      defaultProps: {
        backgroundImage: string;
      };
    };
  };
  user: {
    accountId: string;
    email: string;
    firstName: string;
    lastName: string;
    authorized: boolean;
  };
  programCampaign: {
    id?: string;
    programId?: string;
    partnerId?: string;
    startDate?: string;
    endDate?: string;
    campaignName?: string;
  };
  provider: {
    partnerId?: string;
    partnerName?: string;
    programId?: string;
    externalProgramId?: string;
    programName?: string;
    nationalDealsCatalogFilterId?: string;
  };
  uiuxOverride?: {
    'welcome-modal'?: WelcomeModalContext;
    'estimated-savings-count'?: { enabled: boolean };
    'wallet-icon'?: { enabled: boolean };
    'wallet-icon-url'?: { url?: string };
    'national-deals'?: { title?: string };
    'share-with-friend'?: { enabled: boolean };
  };
  deeplinkUrls?: {
    shareToken?: string;
  };
  location?: {
    address?: string;
  };
  showCashBackOffers?: boolean;
  walletConfig: {
    showBanner: boolean;
    showCashbackChip: boolean;
    showRedeemedValue: boolean;
    showCategoryNotMerchantLogo: boolean;
    showShareWithFriend: boolean;
  };
  showTrendingTags?: boolean;
  showAccountDropdown?: boolean;
  componentPlacement?: KigoComponentPlacementContext;
  redemption?: {
    clickThroughUrlTarget?: string;
  };
};

Example Usage

window.Kigo.onReady = function (kigo) {
  kigo.setContext({
    theme: {
      palette: {
        primary: '#1B998B',
        secondary: '#E6FFFA'
      }
    },
    user: {
      accountId: 'user-789',
      email: '[email protected]',
      firstName: 'Partner',
      lastName: 'Demo',
      authorized: true
    },
    walletConfig: {
      showBanner: true,
      showCashbackChip: true,
      showRedeemedValue: true,
      showCategoryNotMerchantLogo: false,
      showShareWithFriend: true
    },
    uiuxOverride: {
      'welcome-modal': {
        enabled: true,
        pages: [
          {
            title: 'Welcome!',
            copyText: 'Start saving with local offers.',
            pageOrder: 1
          }
        ]
      }
    }
  });
};

Summary

Initial Setup: Use Kigo.onReady to configure context during SDK load.
Async Updates: Use Kigo.setContext anytime during runtime.
Deep Merging: Partial updates preserve previous settings.
Modular Flexibility: Configure components, branding, user, and UX overrides.

The KigoContext empowers partners to deliver a branded, dynamic, and feature-rich experience through the Kigo TOP SDK, tailored to each program or hosted site.