Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developers.loyaltylion.com/llms.txt

Use this file to discover all available pages before exploring further.

Loyalty panel and widget are 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

​
Guest view

Loyalty Panel - Guest view

​
Customer view

Loyalty Panel - Customer view

​
Embed panel 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.

​
Open 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 (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 opens the Loyalty Panel in a modal on click.