LoyaltyLion for Developers

Loyalty Panel

Loyalty panel is a legacy interface, that we are slowly retiring. If you still use loyalty panel - we’ll be in touch with you, when it’s your time to upgrade.

If you’d like to make the change earlier and take advantage of our new UI, contact us at support@loyaltylion.com.

Please note that if you joined LoyaltyLion after 2022, you will not have access to this UI.

The Loyalty Panel is a monolithic, self-contained component which lets a customer interact with all aspects of the loyalty program, for example, viewing ways to earn points, redeeming rewards.

This is our “plug and play” component. Dropping this onto a page (or having it open in a modal) is the fastest way to get started with LoyaltyLion.

The Loyalty Panel is fully responsive and switches to a more compact, mobile friendly view on smaller screens.

When no customer is logged in, this component switches to rendering a simpler “Loyalty Splash” designed to introduce your program to guest shoppers.

Live preview

Embedding on a page

Use the following code to embed the Loyalty Panel on a page:

<div data-lion-account></div>

By default, the Loyalty Panel expands horizontally to fill the available space. For best results, don’t add anything to either side of the panel.

You can make the Loyalty Panel open on a specific page when it loads by including a tab parameter in the URL of the page containing the embedded component:

https://example.com/page/rewards?tab=help

The embedded Loyalty Panel is only visible for programs that have been launched.

Opening in a modal

You can open the Loyalty Panel in a modal by adding the data-lion-account-link attribute to any element. You can open it on a specific page by passing a value to this attribute.

The available pages you can open on are:

  • redeem (this is the default)
  • earn
  • refer
  • history
  • help
<a data-lion-account-link>Access your Rewards</a>

<!-- open on the help page -->
<a data-lion-account-link="help">About our Loyalty Program</a>

If you have the Loyalty Widget enabled, it also opens the Loyalty Panel in a modal on click.