Getting started

This guide will help you integrate the Kigo Loyalty Wallet Web SDK into your application, allowing you to provide a seamless loyalty 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 Loyalty Wallet Web SDK in your project:

<script src="https://dmrwebtzvxfpk.cloudfront.net/kigo-loyalty-wallet-sdk/latest/kigo-loyalty-wallet-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-loyalty-wallet> web component:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kigo Loyalty Wallet Web SDK Example</title>

    <!-- Include the Wallet API UI SDK script -->
    <script src="https://dmrwebtzvxfpk.cloudfront.net/kigo-loyalty-wallet-sdk/latest/kigo-loyalty-wallet-sdk.iife.js" crossorigin="anonymous"></script>

    <script>
        // The Kigo object becomes available globally after the script is loaded.

        // Kigo.onReady is called once the kigo-loyalty-wallet component is initialized.
        Kigo.onReady = function (kigo) {
            // Set the authorization token (see step 2 for details on obtaining this token)
            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);
                });
            };

            // Additional customization can be applied via kigo.setContext (see the Customization section for more details)
            kigo.setContext({
              user: {
                name: "Alex"
              }
            });
        };
    </script>
</head>
<body>
    <!-- Add the kigo-loyalty-wallet web component to your page -->
    <kigo-loyalty-wallet></kigo-loyalty-wallet>
</body>
</html>

Step 4: Confirm Your Integration

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