All data-review-* attributes used by the Sayproof component, which your CSS rules and scripts can rely on.
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.
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 <html lang> 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
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 <link> at the start of the server-rendered HTML; it loads the component’s base styles before the script
data-review-state
The <script type="application/json"> tag that carries the server response; the script builds the initial display from this data without a network request
data-review-frame
The layout frame inside the root element; two columns in a wide area in the side panel layout
data-review-aside
The summary and the review writing area; the left column in the side panel layout
data-review-main
The AI summary (arrives with v2; currently not drawn), photo strip, filters, toolbar, results line, list and the “More reviews” button
The average rating block and, inside it, the group with the stars, the review count and the verified review count
data-review-average
The average rating
data-review-stars
Always five star characters (★★★★★). The filled part is shown in the star colour according to the data-review-fill value and the rest in the --review-track colour; in the summary it fills to the average. The text equivalent is in aria-label.
data-review-count
The number of reviews
data-review-verified-count
The number of verified reviews; its value is the number itself, and it is shown only when greater than zero
data-review-shared-count
The number of reviews from other markets shown in the list (“Reviews from other markets: 3”); its value is the number itself. Added only when reviews from other markets are shown; these reviews are not included in the average. Cannot be hidden.
data-review-imported-count
The share of reviews imported from marketplaces (“3 of 4 reviews imported from Trendyol”); its value is the number of imported reviews. Added only when there are imported reviews; these reviews count in the average. Cannot be hidden.
data-review-distribution
The rating breakdown list (<ol>, from 5 stars to 1 star)
data-review-star, data-review-star-count
The row of a star level in the breakdown and the number of reviews at that level
data-review-star-filter
The button in the row; its value is the star level. When clicked, the list is limited to reviews with that rating; clicking again removes the filter. When selected, aria-pressed="true"; if there are no reviews at that level, disabled.
The star label on the button (5★), the bar and the count
data-review-fill
The fill of the stars and of a bar, or the position of a scale marker: between 0 and 100, in multiples of 5. On the stars it is the rating’s share of 5, rounded to the nearest multiple of 5 (4.3 → 85). The bar of a star level that has reviews is at least 5.
data-review-aspects-group, data-review-aspects
The summary of stepped-scale rating topics (a <dl> inside role="group"); shown when at least one topic has been rated
data-review-aspect
A topic in the summary: <div data-review-aspect="<key>"><dt>topic</dt><dd>scale · names of the ends · nearest step and number of ratings</dd></div>
data-review-scale, data-review-scale-marker
The line of a stepped scale and the marker on it; the marker’s position is in the data-review-fill value
data-review-scale-ends
The names of the steps at the two ends of the scale
data-review-aspect-value
The text value of the topic: in the summary the nearest step and the number of ratings, in a review the chosen step
The review summary card (arrives with v2; currently not drawn) is shown as the first item of data-review-main, before the photo strip, when the brand has the review summary on and the product has at least 10 reviews. Filters do not change it. The HTML prepared on the server and the script produce the same structure:
<pdata-review-ai-summary-note>Summarised by AI from 10 reviews · 12 October 2026 · <adata-review-ai-summary-linkhref="…"target="_blank"rel="noopener">How is it made?</a></p>
</section>
Attribute
Meaning
data-review-ai-summary
The card of the review summary written by AI (<section>) (arrives with v2; currently not drawn). Cannot be hidden.
data-review-ai-summary-title
The “What customers say” heading
data-review-ai-summary-text
The summary text
data-review-ai-topics
The list of main topics; not added when no review has a topic
data-review-ai-topic, data-review-ai-sentiment
A topic and the sentiment of most reviews on it. The topic is fit (Fit), quality (Quality), delivery (Delivery) or packaging (Packaging); the sentiment is positive, negative or neutral. At most the 4 most mentioned topics are shown; the text is the topic name and the number of reviews that mention it. The sentiment is written for screen readers inside data-review-sr: “mostly positive”, “mostly negative” or “mixed views”.
data-review-ai-summary-note
The bottom line: how many reviews the summary was made from and on which day
data-review-ai-summary-link
The “How is it made?” link to the method statement; opens in a new tab
The strip of the newest photos and videos from the product’s reviews (up to 12); shown when there is at least one file. Filters do not affect it.
data-review-gallery-title
The title of the strip (“Photos and videos”)
data-review-gallery-list
The horizontally scrolling list
data-review-gallery-item
The button of a file; it carries data-review-media-kind (image or video) and data-review-media-index (its position in the strip, starting at 0) and opens the photo viewer
Filters are combined: when one changes, the others are kept and the list is reloaded from the first page; the summary, the photo strip and the filter buttons stay in place. The filter buttons and the toolbar are shown only when the product has at least one review.
Attribute
Meaning
data-review-filters
The group of filter buttons (role="group"); not added if there is no filter to show
data-review-filter
A filter button. verified: only reviews by verified buyers; shown when the number of verified reviews is greater than zero and less than the total. media: reviews with photos or video; shown when such a review exists. topic: reviews containing a frequently mentioned word. When selected, aria-pressed="true"; pressing it again removes the filter.
data-review-topics, data-review-topics-label
The group of topic buttons and the “Mentioned often” label
data-review-topic
The word of a topic button (on the data-review-filter="topic" element)
data-review-toolbar
The bar carrying the search section and the sort menu
The search field (up to 100 characters) and the “Search” button. A search runs with the Enter key or the button; clearing the field removes the search.
data-review-sort
The sort menu; shown when the market permits more than one sort order. Cannot be hidden.
data-review-sort-option
A permitted sort option
data-review-sort-default
The market’s default sort order
data-review-results, data-review-results-text
The results line and the “n reviews found” text; visible only when a filter or search is applied, otherwise hidden
data-review-clear
The “Clear filters” button, which removes all filters and the search
data-review-announce
The status text that announces the number of results to screen readers after filtering (role="status")
The label of a review that comes from another source; the kind is syndicated (from another of the brand’s markets; the label names the source market, such as “From the EU market”) or imported (imported from a marketplace; the label names the source, such as “Bought on Trendyol · Imported automatically from Trendyol”). On an imported review the label is an <a> (href, target="_blank", rel="noopener") when the address of the review at the source is known, otherwise it stays a <span>; these reviews carry no data-review-verified. Cannot be hidden.
data-review-experience
Value process: the label of a review describing the experience, up to that point, of a customer whose order was cancelled or who returned the item. Cannot be hidden.
data-review-stars
The review’s rating: five stars, the filled part is in data-review-fill
data-review-title, data-review-body
The title and the review text
data-review-long, data-review-open
On data-review-body: a text longer than 420 characters or 4 lines is cut at 4 lines; data-review-open is added when the visitor opens the text
data-review-translated
The line under the text of a translated review (arrives with v2; currently not drawn): “Translated” and the data-review-show-original button. When a review is not in the visitor’s language and has a translation into it, the title and text are shown translated. Cannot be hidden.
data-review-show-original
The “Show original” / “Show translation” button (aria-pressed) (arrives with v2; currently not drawn); while the original is shown, the title and text carry the review’s language in a lang attribute
data-review-expand
The “Read more” / “Show less” button (aria-expanded). It is visible only if the text really exceeds 4 lines; it is measured again when the component’s width changes.
data-review-item-aspects
The stepped-scale topic ratings given in the review (<dl>); each row carries data-review-aspect, and <dd> contains the scale and the name of the chosen step (data-review-aspect-value)
Photo and video previews; the kind is image or video
data-review-media-open, data-review-media-index
The preview button and the file’s position in the review (starting at 0); it opens the photo viewer
data-review-seller-response
The seller response, in the same stream as the review. Cannot be hidden.
data-review-resolution
The resolution, in the same stream as the review. Cannot be hidden.
data-review-reply-label
The label of the seller response or the resolution
data-review-actions
The row containing the vote group and the “Report” button
data-review-vote, data-review-vote-label
The vote group (role="group") and the “Helpful?” label
data-review-helpful, data-review-helpful-count
The “Yes” button and its vote count. The button contains a thumb icon (an inline <svg>) and the number; the full text (“Yes (n)”) is in aria-label. When selected, aria-pressed="true".
The “No” button and its vote count; the icon is shown upside down, and the full text (“No (m)”) is in aria-label. When selected, aria-pressed="true". Pressing the selected button again withdraws the vote; pressing the other one moves the vote to that side.
data-review-vote-count
The element inside a vote button that shows only the number
data-review-actions-message
The row’s status message (for example that the vote could not be saved)
Added as the last child of the root element (after data-review-frame) when the brand turns on questions and answers. The script loads this section as a separate part, only while questions and answers are on; the HTML prepared on the server carries the same structure.
The top line of the answer and the author’s name (the channel’s brand name on a brand answer)
data-review-answer-badge
The “Brand” label on a brand answer. A customer answer carries data-review-verified (“Verified buyer”) instead. Cannot be hidden.
data-review-answer-body
The answer text
data-review-answer-open, data-review-answer-form
The “Answer” button (aria-expanded) and the answer form; added only while the visitor has a purchase proof (an invitation link, order verification or a signed-in customer)
data-review-questions-empty
The message shown when there are no questions
data-review-questions-more
The button that loads the next page of questions
data-review-ask, data-review-question-form
The “Ask a question” button (aria-expanded) and the question form
data-review-question-asker
The line shown instead of the name and email fields for a signed-in customer: “You are asking as Ayşe K. We will email you when it is answered.”; without a name, “You are asking with your account. We will email you when it is answered.”
data-review-question-notify
The <label> carrying the “Email me when it is answered” checkbox in a guest’s form; when ticked, the email field appears and becomes required
data-review-question-notice
The information text in the form
data-review-privacy
The paragraph below the information text in the question and answer forms; its link (“Privacy notice on the processing of personal data”) opens the privacy notice set on the channel in a new tab (target="_blank", rel="noopener"). Not added if the channel has no privacy notice link.
data-review-questions-message
The section’s status message (role="status"): sent, a missing field or an error
The root element of the review writing area; it carries the same data-review-theme value as the root element
data-review-gate-state
pending (HTML prepared on the server, or the signed-in customer’s status is awaited), closed, open (form open), refused (no eligible order) or submitted (review submitted)
data-review-gate-info
The information text a visitor who is not signed in sees
data-review-gate-verify
The button that opens the order verification. In the pending state it is shown disabled until the script takes over.
data-review-gate-form
The order number and email form
data-review-gate-message
The single, general error message
data-review-gate-write
The “Write a review” button shown to a signed-in customer; only when the server has confirmed eligibility
data-review-viewer-state
can_write or written
data-review-own-standing
The status of the customer’s own review: published, pending, rejected or removed
The form opens in a dialog and is added to the body element. If the component is inside an open modal <dialog> element on the page, the form is added inside that dialog, so it does not end up underneath the top layer. Inside the dialog, the Tab key stops once on each star row and each step group; within a group, the arrow keys make the choice.
Attribute
Meaning
data-review-form-overlay, data-review-form-dialog
The backdrop layer and the dialog (role="dialog"; focus is kept inside the dialog and the Esc key closes it)
The name part below the item parts of the form: the optional name field (an input[type=text] inside a <label>) and the data-review-hide-name checkbox for hiding the name. In the correction form the fields come filled with the name and the choice already on the review. In the order detail rating, the part appears once below the item forms and is used for each item that is sent
data-review-hide-name
The <label> carrying the “Hide my name on the site” checkbox; it is in the review form, the question form and the answer form. When ticked, the name shows on the site as the first letter of every word followed by ***
data-review-form-prompts
When the product has rating topics, neutral questions under the text field (“You could mention: how was the Fit? …”); the field points to this line with aria-describedby. It contains no ready-made sentences or suggestions.
Rating topics; shown when topics are defined for the product. When there are topics both about the product and about delivery and service, the first are asked under “Detailed scores”, the second under “Delivery and service”, and data-review-form-aspects-title appears twice
Adding photos and videos: section, add button, list, single file, upload state (pending, ready, refused, and kept for earlier files in a correction) and message
data-review-form-media-remove
The button in the correction form that removes an earlier photo or video from the review (on the data-review-form-media-state="kept" element)
While a file is being prepared and uploaded (state pending): the progress text (“Preparing 42%”, then “Uploading 17%”) and the button that cancels this file; both leave the item when the work ends
data-review-form-notice, data-review-form-hint
The publication notice and helper text
data-review-privacy
The privacy notice link below the publication notice (an <a> inside a <p>, opens in a new tab); only if a privacy notice link is set on the channel
When a preview or a file in the photo strip is clicked, the file is enlarged in a dialog. The viewer is loaded as a separate chunk when it first opens and uses the same dialog structure as the review form (data-review-form-overlay, data-review-form-dialog, data-review-form-head, data-review-form-title, data-review-form-close). The title is “Photos and videos”; the description line (data-review-form-lede) gives the position of the file shown (“2 of 5”). Opened from the strip, it moves through all files in the strip; opened from a review, through that review’s files. If there is more than one file, the left and right arrow keys move to the previous and next file; while focus is on a video, the arrow keys are left to the video. The Esc key closes the dialog and focus returns to the button that opened it.
Attribute
Meaning
data-review-lightbox
The viewer dialog; it is on the data-review-form-dialog element
data-review-lightbox-stage
The area containing the file and the previous/next buttons
data-review-lightbox-figure
The enlarged file (<figure>): a photo, or a video with player controls
On the signed-in customer’s order detail page, a rating and review form is shown inside the page for each item of the order (no dialog opens). For the setup, see Signed-in customers › Order detail page.
Attribute
Meaning
data-review-order
The element you add to your page; its value is the order number. The script replaces this element’s content with the section it builds. As on a container, the site key, the API address and the design (data-review-theme) are read from the element’s own attributes, or failing that from the script tag; the texts are in the language of the order answer.
data-review-order-state
The <script type="application/json"> tag inside the element; it carries Sayproof’s order answer
data-review-order-root
The root element of the section; it carries data-review-theme
data-review-order-title
The section title (“Rate your items”)
data-review-order-lines, data-review-order-line
The item list and the row of one item; the row’s value is the ID of the order line (line_reference)
data-review-line-state
The row’s state: can_write, pending, published, rejected, removed, waiting or closed. After a review is sent it becomes pending.
data-review-order-form
The form in a row that can be reviewed. The item part carries the same fields as the review form (data-review-form-product, data-review-form-name, data-review-form-rating, data-review-form-body, data-review-form-media, data-review-form-aspects).
data-review-order-foot
The bottom line of the form: the message (data-review-form-message) and the row’s own Send button (data-review-form-submit)
data-review-order-status
The status text shown in a row that cannot be reviewed, or after sending (role="status")
data-review-form-notice
The publication notice; shown below the list if at least one row can be reviewed
data-review-privacy
The privacy notice link below the publication notice; shown if a privacy notice link is set on the channel and at least one row can be reviewed
The script loads its styles with three <style> tags: #sayproof-style (the default component), #sayproof-style-form (the review form, the order verification and the reviews on the order page; loaded when first opened) and #sayproof-style-lightbox (the photo viewer; loaded when first opened). #sayproof-style comes from a separate chunk that loads in parallel with the first review list request; it is not added in headless use. The nonce value on the script tag is added to all three tags. For CSS variables, see CSS variables.
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.