# salla-verified-review (https://docs.salla.dev/twilight/react/web-components/salla-verified-review)



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

A card on the product page that invites a signed-in customer to rate the product. If they bought it, it shows a
"Verified purchase" badge with the order number and date, plus the loyalty points they earn for a review when the store gives any.
Otherwise it invites them to share their experience. Place it once on the product page.
It renders nothing for guests, or when the rating API says the customer cannot review this product (for example it is already rated).
The button opens `salla-rating-modal` (created in the page if missing). If the customer reached the daily limit for
reviewing products they did not buy, the button opens a modal with that message instead.
After the product is rated (`rating::products-rated` event) the card hides itself.

## Use it [#use-it]

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

```tsx
import { SallaVerifiedReview } from '@salla.sa/twilight-components-react/verified-review';
```

## Example [#example]

```tsx
import { SallaVerifiedReview } from '@salla.sa/twilight-components-react/verified-review';

export function Example() {
  return (
    <SallaVerifiedReview productId="123" />
  );
}
```

```html
<salla-verified-review product-id="123"></salla-verified-review>
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                            | Type               | Default |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `productId` | `product-id` | Id of the product to check review eligibility for. Use `product-id` in markup. Falls back to the `data-product-id` attribute, then to the current page id (`page.id`). | `number \| string` |         |

## Related [#related]

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