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



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

A banner for a product page that offers to exchange loyalty points for that product as a free item.
It renders nothing unless the store has the loyalty system enabled and the product has a loyalty prize.
Clicking the button opens the login dialog for guests, otherwise a modal with the exchange form.
The product is taken from the `data-product-id` attribute, or from the current page id when it is missing.

## Use it [#use-it]

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

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

## Example [#example]

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

export function Example() {
  return (
    <SallaLoyaltyBanner dataProductId="123456" />
  );
}
```

```html
<salla-loyalty-banner data-product-id="123456"></salla-loyalty-banner>
```

## Related [#related]

Renders: [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-reward-exchange>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-exchange).