LoyaltyLion

LoyaltyLion integration for Shogun Frontend.

Power your ecommerce growth by building a better understanding of what will drive longer-lasting relationships and use those insights to create a loyalty program as unique as your brand.

LoyaltyLion website →

Installation

yarn add @frontend-sdk/loyaltylion

or

npm install @frontend-sdk/loyaltylion

Initial setup

1. Send your LoyaltyLion Site Token and LoyaltyLion Secret to [email protected] via One Time Secret. These will be used on our backend for customer authentication.

2. In Shogun Frontend, call the useLoyaltyLion hook at the top level, so that the script is injected only once, and all LoyaltyLion components can utilize it. This hook injects and initializes the LoyaltyLion script.

import { useLoyaltyLion } from '@frontend-sdk/loyaltylion'
import { useCustomerState } from 'frontend-customer'
import { useRouter } from 'frontend-router'

const App = () => {
  const { id, email, isLoggedIn } = useCustomerState()
  const customer = { id, email, isLoggedIn }
  const router = useRouter()

  useLoyaltyLion(loyaltyLionSiteToken, customer, router)
}

How to find required values

You can find your LoyaltyLion Site Token and LoyaltyLion Secret here.

To find this page manually: log in to https://app.loyaltylion.com > click on "Manage" in the top nav bar > scroll down to the "Configurations" section in the left nav bar and click "Settings" > scroll down to the bottom of the page to see your token and secret.

Limitations

Not supported

• The free product seamless and in-cart rewards LoyaltyLion components are not supported, and must not be present in your LoyaltyLion admin portal.

Partially supported

• The free product voucher and product discount voucher redemption LoyaltyLion components try to add a product directly to the cart. This action is not supported and fails silently. One possible workaround is to use CSS to apply display: none to the parts of the LoyaltyLion component that mention adding directly to the cart. See LoyaltyLion's CSS customization guide.

• The referee welcome modal has a button to automatically "apply discount". This action is not supported. The customer must manually enter the code at checkout. Again, a possible workaround is to use CSS to hide the button.

• To use LoyaltyLion's custom rewards, your developers will need to set up a custom webhook.

• Rewards are not automatically added to cart upon redemption. To redeem voucher rewards, customers must manually input the voucher code into the discount code input on the checkout page.

LoyaltyLion Components

Prerequisite: Make sure you've followed the steps in initial setup above.

Go to your LoyaltyLion admin portal to activate and customize the LoyaltyLion components you'd like to use.

Each LoyaltyLion component will provide you with a string of HTML. E.g. <div data-lion-component-name></div>.

Paste the provided HTML into the Shogun Frontend section where you'd like the LoyaltyLion component to appear. Note that some HTML code may need to be manually converted to JSX to work properly. E.g. The <input> tag in HTML is written as <input /> in JSX.

Call the useLoyaltyLionRefresh hook from the Shogun Frontend section. This will be invoked once upon React component mount, and is required for the LoyaltyLion component to properly render upon client side navigation to that page.

Loyalty Page

In your LoyaltyLion admin portal, navigate to https://app.loyaltylion.com/sites/YourLoyaltyLionSiteId/manage/design/app-integrated (Manage > Customize > Loyalty Page), customize as you like, and set to visible.

In Shogun Frontend, create a new section and page, and paste the following snippet.

<div data-lion-integrated-page></div>

Note: Make sure this is the only element with a data-lion... attribute on this page.

Source: https://help.loyaltylion.com/en/articles/4385100-loyalty-page

Example

import { useLoyaltyLionRefresh } from '@frontend-sdk/loyaltylion'

export const LoyaltyPage = () => {
  useLoyaltyLionRefresh()

  return (
    <>
      <div data-lion-integrated-page></div>
    </>
  )
}

Other LoyaltyLion Components

A full list of LoyaltyLion's components and their code snippets can be found here. There are components that are embeddable in the page, and others that are rendered in a modal. All will follow the same general format of pasting the provided HTML into Shogun Frontend. All require useLoyaltyLionRefresh to be called within that section to properly render upon client-side navigation.

Some LoyaltyLion components are partially supported or not supported at all. See Limitations for more detail.

Resources

LoyaltyLion Help Centre