> ## 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

<Warning>
  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](mailto:support@loyaltylion.com).

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

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

<Frame>
  <img src="https://mintcdn.com/loyaltylion/mzpO03HW8a1K958n/images/sdk/loyalty-panel-guest-view.png?fit=max&auto=format&n=mzpO03HW8a1K958n&q=85&s=43e9dbe9ea38989dad1d351702c296d0" alt="Loyalty Panel - Guest view" width="1472" height="1206" data-path="images/sdk/loyalty-panel-guest-view.png" />
</Frame>

### Customer view

<Frame>
  <img src="https://mintcdn.com/loyaltylion/mzpO03HW8a1K958n/images/sdk/loyalty-panel-customer-view.png?fit=max&auto=format&n=mzpO03HW8a1K958n&q=85&s=f4fc9b63e16fa317cd6683377f30666c" alt="Loyalty Panel - Customer view" width="1472" height="992" data-path="images/sdk/loyalty-panel-customer-view.png" />
</Frame>

## Embed panel on a page

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

```html theme={null}
<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
```

<Note>
  The embedded Loyalty Panel is only visible for programs that have been
  launched.
</Note>

## 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`

```html theme={null}
<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](/sdk/simple-components/loyalty-widget/) enabled, it opens the Loyalty Panel in a modal on click.