How To Add 99minds Loyalty Widget On Your Website

LoyaltyWidget.init({
  platform: "NONE", // One of SHOPIFY, BIGCOMMERCE, WOOCOMMERCE, WORDPRESS, NONE
  client_id: '<API_KEY_HERE>',
  getCurrentCustomer: () => {}, // Should return a simple object containing current logged in customer data, i.e { id: 'xxxxx', email: '[email protected]', name: 'Jhon Doe' }. `id` is required.
  onCouponApply: () => {}, // Triggered when a customer clicks the Apply button next to a coupon or discount code. This function should apply the discount code to the cart. If this function is not provided, the Apply button will be hidden and a Copy to Clipboard option will be shown instead.
  onStoreCreditApply: () => {}, // Triggered when a customer clicks the Apply button next to a store credit. This function should apply the gift card code (store credits are stored as GC on Bigcommerce) to the cart. If this function is not provided, the Apply button will be hidden and a Copy to Clipboard option will be shown instead.
  onGiftcardApply: () => {}, // Triggered when a customer clicks the Apply button next to a gift card. This function should apply the gift card code to the cart. If this function is not provided, the Apply button will be hidden and a Copy to Clipboard option will be shown instead.
})

LoyaltyWidget.init({
  platform: "NONE", // One of SHOPIFY, BIGCOMMERCE, WOOCOMMERCE, WORDPRESS, NONE
  client_id: '<API_KEY_HERE>',
  
  // Customer Functions
  getCurrentCustomer: () => {}, // Should return a simple object containing current logged in customer data, i.e { id: 'xxxxx', email: '[email protected]', name: 'Jhon Doe' }. `id` is required.
  
  // Apply Functions
  onCouponApply: (couponCode) => {}, // Triggered when a customer clicks the Apply button next to a coupon or discount code. This function should apply the discount code to the cart. If not provided, Apply button is hidden and Copy to Clipboard is shown.
  onStoreCreditApply: (giftCardCode) => {}, // Triggered when a customer clicks the Apply button next to a store credit. This function should apply the gift card code to the cart. If not provided, Apply button is hidden and Copy to Clipboard is shown.
  onGiftcardApply: (giftCardCode) => {}, // Triggered when a customer clicks the Apply button next to a gift card. This function should apply the gift card code to the cart. If not provided, Apply button is hidden and Copy to Clipboard is shown.
  
  // Callback Functions
  onInit: () => {}, // Callback when the widget is initialized and finished loading.
  
  // Platform-specific Options
  channel_id: 6425, // Should be provided when using multistorefront on Bigcommerce
  myshopify_domain: 'your-store.myshopify.com', // Required for Shopify platform
  
  // Other options...
})

<script type="text/javascript">
  (function () {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = 1;
    s.src = 'https://assets.99minds.io/live/loyalty/bundle.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
    loyaltyWidgetLoaded = false;
    s.onload = s.onreadystatechange = function() {
      if ( !loyaltyWidgetLoaded && (!s.readyState || s.readyState == 'complete') ) {
        loyaltyWidgetLoaded = true;
        LoyaltyWidget.init({
          platform: "NONE",
          client_id: '<API_KEY_HERE>'
        })
      }
    };
  })();
</script>

LoyaltyWidget.init({
  platform: 'NONE',
  client_id: '<API_KEY_HERE>',
  getCurrentCustomer: () => {
    // Your custom customer object
    return {
      id: 'customer_unique_id',
      email: '[email protected]',
      name: 'Customer Name'
    };
  },
  onCouponApply: (couponCode) => {
    // Your custom logic to apply coupon
    console.log('Applying coupon:', couponCode);
    // Example: Call your cart API to apply the discount
  },
  onStoreCreditApply: (giftCardCode) => {
    // Your custom logic to apply store credit
    console.log('Applying store credit:', giftCardCode);
  },
  onGiftcardApply: (giftCardCode) => {
    // Your custom logic to apply gift card
    console.log('Applying gift card:', giftCardCode);
  }
})

onCouponApply: (couponCode) => {
  // couponCode: String - The discount code to be applied
  console.log('Coupon code to apply:', couponCode);
  
  // Your implementation to apply the coupon to cart
  applyDiscountToCart(couponCode);
}

onStoreCreditApply: (giftCardCode) => {
  // giftCardCode: String - The gift card code representing store credit
  console.log('Store credit code to apply:', giftCardCode);
  
  // Your implementation to apply store credit to cart
  // Note: Store credits are stored as gift cards in BigCommerce
  applyStoreCreditToCart(giftCardCode);
}

onGiftcardApply: (giftCardCode) => {
  // giftCardCode: String - The gift card code to be applied
  console.log('Gift card code to apply:', giftCardCode);
  
  // Your implementation to apply gift card to cart
  applyGiftCardToCart(giftCardCode);
}

onInit: () => {
  console.log('Loyalty widget has been initialized successfully');
  // Perform any post-initialization tasks
}

getCurrentCustomer: () => {
  // Must return an object with at least the customer id
  return {
    id: 'customer_unique_id',      // Required
    email: '[email protected]', // Optional but recommended
    name: 'John Doe'               // Optional
  };
}

import React, { useEffect } from 'react';

const LoyaltyWidgetComponent = ({ apiKey, platform = 'NONE' }) => {
  useEffect(() => {
    // Load the external script
    const script = document.createElement("script");
    script.src = "https://assets.99minds.io/live/loyalty/bundle.js";
    script.async = true;
    
    script.onload = () => {
      if (window.LoyaltyWidget) {
        window.LoyaltyWidget.init({
          platform: platform,
          client_id: apiKey,
          getCurrentCustomer: () => {
            // Return your customer data here
            // This could come from your app's state/context
            return {
              id: 'customer_123',
              email: '[email protected]',
              name: 'John Doe'
            };
          },
          onCouponApply: (couponCode) => {
            console.log('Applying coupon:', couponCode);
            // Your custom logic to apply coupon
          },
          onStoreCreditApply: (giftCardCode) => {
            console.log('Applying store credit:', giftCardCode);
            // Your custom logic to apply store credit
          },
          onGiftcardApply: (giftCardCode) => {
            console.log('Applying gift card:', giftCardCode);
            // Your custom logic to apply gift card
          }
        });
      }
    };
    
    document.body.appendChild(script);
    
    return () => {
      // Cleanup: remove script when component unmounts
      if (script.parentNode) {
        document.body.removeChild(script);
      }
    };
  }, [apiKey, platform]);
  
  return <div id="loyalty-widget-container"></div>;
}

export default LoyaltyWidgetComponent;

import LoyaltyWidgetComponent from './LoyaltyWidgetComponent';

function App() {
  return (
    <div className="app">
      <h1>My Loyalty Program</h1>
      <LoyaltyWidgetComponent 
        apiKey='<API_KEY>'
        platform='NONE'
      />
    </div>
  );
}

export default App;