> ## Documentation Index
> Fetch the complete documentation index at: https://dev.smile.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Deep links

Deep links allow you to open the loyalty panel to specific pages programmatically. This enables customers to seamlessly navigate to particular sections of the loyalty panel from links, menu items, or buttons embedded directly on your website or app pages.

## Supported deep links

The following deep links are currently supported and available for general use:

| Deep link                  | Description                                                                                                                                                                                                                                                                       |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `home`                     | If a customer is currently logged-in, displays their loyalty program status based on which programs the account has setup (points, referrals, VIP). If no customer is currently logged-in, displays general loyalty program information.                                          |
| `points_activity_rules`    | Displays a list of ways that a customer can earn points.                                                                                                                                                                                                                          |
| `points_product:{id}`      | If a customer is currently logged in, displays the redemption screen for the points product whose ID is provided (replace `{id}` with a valid points product ID). If no customer is currently logged-in, displays the list of rewards that customers can redeem their points for. |
| `points_products`          | Displays a list of rewards that a customer can redeem their points for.                                                                                                                                                                                                           |
| `referral_program_details` | Displays information about the referral program. If a customer is currently logged-in, this includes their referral URL.                                                                                                                                                          |

## Using deep links

There are 4 different ways you can use deep links.

### Query parameter

Just add a `smile_deep_link` query parameter to the URL of any link. e.g.

```html theme={null}
https://store.example.com/?smile_deep_link=points_products
```

<Tip>
  This is the recommended approach for scenarios where you want to both open a new page AND open the rewareds panel once the page has loaded.
</Tip>

### JavaScript method

Call the [`SmileUI.openPanel()`](/ui/panel/open) method from within your JavaScript code and pass a `deep_link` parameter as part of the `options` object. e.g.

```javascript JavaScript theme={null}
SmileUI.openPanel({ deep_link: "points_products" });
```

### HTML attribute

Add a `data-smile-deep-link` attribute to any `<a>` (link) element. e.g.

```html HTML theme={null}
<a href="#" data-smile-deep-link="points_products">Redeem your points!</a>
```

<Info>
  HTML attributes can only be used to open the loyalty panel from a page that the user already has open.
</Info>

### Anchor tag

This method differs slightly from the others. For this method, the deep links are prefixed with `smile-` and are dasherized instead of underscored. For example, the `points_products` deep link becomes `smile-points-products`.

```html theme={null}
https://store.example.com/#smile-points-products
```

<Info>
  Anchor tags can only be used to open the loyalty panel from a page that the user already has open.
</Info>