# DOM attributes
> All data-review-* attributes used by the Sayproof component, which your CSS rules and scripts can rely on.
Source: /en/reference/dom-attributes/
These attributes are a contract (version 3): within the same version they are not removed and their meanings do not change; new attributes may be added. Write your CSS rules and scripts against these attributes. For usage examples, see [Layout and CSS selectors](/en/customize/css-hooks.md).
## Container configuration
These attributes are added to the container (`data-review-mount`). For a value that is not on the container, the value on the script tag is used. When one of these attributes changes, the component refreshes itself.
| Attribute | Value |
|---|---|
| `data-review-mount` | Marks the element as a review container. A page can have more than one container. |
| `data-review-site-key` | The site key. It is read only from the script tag or from the `Sayproof.mount()` options; a value on the container is ignored, so content added to the page later cannot point the reviews at another channel. |
| `data-review-base` | The Sayproof API address. It is read only from the script tag or from the `Sayproof.mount()` options; a value on the container is ignored, so content added to the page later cannot send what the customer types in the form to another server. |
| `data-review-product` | The product code: a variant or group code |
| `data-review-scope` | `variant` (default) or `group` |
| `data-review-product-name` | The product name. It is read but is not currently used in the display; it is reserved for future use. |
| `data-review-locale` | `tr` or `en`. If it is given neither on the container nor on the script tag, the `` value is used, and failing that the channel's language. |
| `data-review-layout` | `list` (default) or `grid` |
| `data-review-style` | `cards` or `sidebar`: the layout. If omitted, the layout chosen for the channel in the panel is used. |
| `data-review-theme` | `warm`, `trust`, `editorial`, `minimal`, `soft`, `bold`, `natural` or `night`: the built-in design. If omitted or not recognised, the design chosen for the channel in the panel is used. |
| `data-review-mode` | `headless`: the script builds no summary, list or sorting; it only runs the review writing flow |
| `data-review-gate` | The CSS selector of the element in which the review writing area is shown. If no element matches, the area is shown inside the container. |
| `data-review-viewer` | `pending`: the signed-in customer's status is awaited; the review writing area is not shown until the answer arrives |
## Container state
| Attribute | Meaning |
|---|---|
| `data-review-ready` | The component is ready; `Sayproof.write(container)` can now open the flow. When the product changes, it is removed until the new content is ready. |
| `data-review-failed` | The reviews could not be loaded; the rest of the page is not affected |
## Root element
| Attribute | Meaning |
|---|---|
| `data-review-root` | The component's root element; the style scope starts at this element |
| `data-review-version` | The contract version (`3`) |
| `data-review-style` | The layout in use: `cards` or `sidebar` |
| `data-review-theme` | The built-in design in use: `warm`, `trust`, `editorial`, `minimal`, `soft`, `bold`, `natural` or `night`; the design's variable values depend on this attribute |
| `data-review-market` | The market the reviews belong to |
| `data-review-product` | The product code whose reviews are shown |
| `data-review-layout` | Also added to the root element: `list` or `grid` |
| `data-review-busy` | A request is in progress |
| `data-review-ssr` | A root element rendered on the server; the script takes it over |
| `data-review-stylesheet` | The `` at the start of the server-rendered HTML; it loads the component's base styles before the script |
| `data-review-state` | The `
```
### Changing the product when a variant is selected
Changing the `data-review-product` value is sufficient; the script detects the change and loads the new product's reviews. No additional call is needed.
```html
```
### Variant and group reviews on the same page
```html
Reviews for this size
Reviews for all sizes
```
### Keeping your own button disabled until the component is ready
```html
```
### Reviews on the order page
The content of the `data-review-order-state` tag is the answer your server received from the `GET /v1/viewer/order` call, as it is; escape the `<`, `>` and `&` characters when writing it into the tag. The script finds the element and replaces its content with the review section; the site key and the API address are taken from the script tag.
```html