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 
          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',
              },
            },
            provider: {
              externalProgramId: 'your-external-program-id-registered-in-kigo',
              programName: 'name-of-your-program',
              partnerId: 'partner-uuid'
            },
          });
        };
      }
    </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.