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.
Use the following code to embed the Loyalty Panel on a page:
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:
The embedded Loyalty Panel is only visible for programs that have been launched.
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)
<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.