Getting Started

This guide will help you integrate the Kigo TOP Web SDK into your application, allowing you to provide a seamless TOP experience for your users.

Step 1: Include the SDK via CDN

To begin, add the following script tag to your HTML file. This includes the Kigo TOP Wallet Web SDK in your project:

<script src="https://d1rp7meewdhinj.cloudfront.net/kigo-top-sdk/latest/kigo-top-sdk.iife.js"></script>

Step 2: Obtain API Tokens

Before you can use the SDK, you need to obtain the necessary API session token and account token. These tokens will authenticate your application and user sessions. For detailed instructions, refer to the following resources:

Step 3: Set Up the SDK in Your HTML

Next, integrate the SDK into your HTML by including the CDN script tag, initializing the SDK, and adding the <kigo-top-wallet> web component:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kigo TOP Web SDK Example</title>
</head>
<body>
    <!-- Add the kigo-top-wallet web component to your page -->
    <kigo-top-sdk></kigo-top-sdk>
  
    <script>
      function setupKigo() {

        window.Kigo.onReady = function (kigo) {
          kigo.initialEntries = ['/home']; // keep this default to /home for home page. If you want to go direct to an offer change ['/offers/[offer_id]']
          kigo.setAuthorizationToken('your-session-token');

          // Handle authorization errors by requesting a new token from your backend
          kigo.onAuthorizationError = function (error) {
            fetch('/api/your-backend-endpoint', {
              method: 'POST'
            })
              .then(response => response.json())
              .then(data => {
              // Update the authorization token with the new token
              kigo.setAuthorizationToken(data.token);
            });
          };

          kigo.setContext({
            theme: {
              palette: {
                primary: '#your-primary-hex-color',
                secondary: '#your-secondary-hex-color',
                fontAccentColor: '' // optional. This is use for our button links. ex. Return to offers, estimated savings
              },
              typography: { // Optional - Not required. You don't need to pass this if you don't want custom fonts
                fontSources: [
                  {
                    family: 'Inter',
                    url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap',
                  },
                ],
                fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
                titleFontFamily:
                  'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
                // Override specific variants to test
                titleXl: {
                  fontFamily: 'Inter, sans-serif',
                  fontSize: '48px',
                  fontWeight: 800,
                  letterSpacing: '-0.02em',
                  lineHeight: '1.1',
                },
                titleLg: {
                  fontFamily: 'Inter, sans-serif',
                  fontSize: '36px',
                  fontWeight: 700,
                  letterSpacing: '-0.01em',
                  lineHeight: '1.2',
                },
                bodyMd: {
                  fontFamily: 'Inter, sans-serif',
                  fontSize: '16px',
                  fontWeight: 400,
                  letterSpacing: '0em',
                  lineHeight: '1.5',
                },
                bodySm: {
                  fontFamily: 'Inter, sans-serif',
                  fontSize: '14px',
                  fontWeight: 400,
                  letterSpacing: '0.01em',
                  lineHeight: '1.4',
                },
              },
            },
            provider: {
              externalProgramId: 'your-external-program-id-registered-in-kigo',
              programName: 'name-of-your-program',
              partnerId: 'partner-uuid',
	      nationalDealsCatalogFilterId: 'UUID' // UUID of catalog filter id for the national deals section
            },
            uiuxOverride: {
              'welcome-modal': {
                enabled: true, // optional - boolean
              },
              'estimated-savings-count': {
                enabled: true, // optional - boolean
              },
              'wallet-icon': {
                enabled: true, // optional - boolean
              },
              'wallet-icon-url': {
                url: '', // optional - string
              },   
              'national-deals': {
                title: '', // optional - string // This will add the national deals section on the home page. If this is added, provider.nationalDealsCatalogFilterId is required.
              },  
              'share-with-friend': {
                enabled: true/false, // optional - boolean // This will hide show the "Share with friend" button in the offer details page
              },                   
            },
            redemption?: {
            clickThroughUrlTarget?: "_self", // optional // This will determine if you want online offer links to not open a new tab. - Default is "_blank"
            clickThroughURLPrefix?: "app://" // optional // This will will add prefix to the clickthroughUrl example "app://https://kigo.io"

          	},
            location: {
              // Set address if you want to auto set the address. Address can be full address, city, state, or zip code. 
              // ex: "Minnesota"
              // ex: "55432"
              // ex: "Minneapolis"
              // ex: "60 E Broadway, Bloomington, MN 55425"
              address: '',
            },
          });
        };
      }
    </script>
  
    <!-- Include the TOP API UI SDK script PROD -->
    <script
      src="https://d1rp7meewdhinj.cloudfront.net/kigo-top-sdk/latest/kigo-top-sdk.iife.js"
      onload="setupKigo()"
      crossorigin="anonymous"
    ></script>
  
        <!-- Include the TOP API UI SDK script STAGING-->
        <!-- <script -->
        <!-- src="https://d3td6rmpnfkvdh.cloudfront.net/kigo-top-sdk/latest/kigo-top-sdk.iife.js" -->
        <!-- onload="setupKigo()" -->
        <!-- crossorigin="anonymous" -->
      <!-- ></script> -->
    
       <!-- Include the TOP API UI SDK script TEST -->
      <!-- <script -->
        <!-- src="https://dmrwebtzvxfpk.cloudfront.net/kigo-top-sdk/latest/kigo-top-sdk.iife.js" -->
        <!-- onload="setupKigo()" -->
        <!-- crossorigin="anonymous" -->
      <!-- ></script> -->
</body>
</html>

Step 4: Confirm Your Integration

After following these steps, the Kigo TOP SDK should be successfully rendered in your application. You can now begin exploring the SDK’s features and customizing the user experience.