# salla-loyalty-program (https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

The full loyalty program page content: a hero with the customer's points (or a login button for guests), a
"how to start" section, the ways to earn points, and the rewards that can be redeemed, grouped into tabs. Use it
once on the theme's loyalty program page; it has no props and loads everything from the store's loyalty
program. Clicking a reward opens a details modal, and redeeming opens an exchange modal. Points and rewards
reload after the `loyalty::exchange.succeeded` event. A guest's login button dispatches `login::open`. If loading the
program fails, a short error message is shown instead.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-loyalty-program>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaLoyaltyProgram } from '@salla.sa/twilight-components-react/loyalty-program';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaLoyaltyProgram } from '@salla.sa/twilight-components-react/loyalty-program';

export function Example() {
  return (
    <SallaLoyaltyProgram />
  );
}
```

```html
<salla-loyalty-program></salla-loyalty-program>
```

## Related [#related]

Renders: [`<salla-loyalty-hero>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-hero), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-loyalty-point>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-point), [`<salla-tabs>`](https://docs.salla.dev/twilight/react/web-components/salla-tabs), [`<salla-tab-header>`](https://docs.salla.dev/twilight/react/web-components/salla-tab-header), [`<salla-tab-content>`](https://docs.salla.dev/twilight/react/web-components/salla-tab-content), [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider), [`<salla-reward-card>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-card), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-reward-details>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-details), [`<salla-reward-exchange>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-exchange).