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



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

A short banner on a product page that tells the customer how many loyalty points they earn when they
buy the product. It has no props: it reads the product id from the `data-product-id` attribute,
or from the `page.id` store config value when the attribute is missing, and loads the points from
the loyalty API. Nothing is rendered when there is no product id or the product earns no points.

## Use it [#use-it]

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

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

## Example [#example]

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

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

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