Embed reviews widgets

Reviews widgets show product and company reviews, star ratings and AI summaries on your storefront. They load through Cevoid's widget script, not the loyalty autoloader: one script per site, then one <cevoid-reviews> element per widget. You design each widget in Cevoid.

On Shopify, add reviews widgets as blocks in the theme editor through Cevoid's Reviews app for Shopify. Use the snippets below on any other platform and in headless storefronts.

• Reviews is part of your workspace's plan. Without it, widgets show no reviews.
• The widgets exist in Reviews → On-site widgets.
• Your publishable key, which starts with cev_pk_. The Embed widget dialog puts it in the script for you; it is also on Settings → Integrations → Cevoid API, see Storefront API authentication.

Paste the script right before the closing </head> tag, once per site, with your publishable key:

<script type="module" src="https://widget.cevoid.com/index.js" async data-cevoid-publishable-key="cev_pk_YOUR_KEY"></script>

The script loads nothing until a widget comes within 300 pixels of the viewport. It then loads the reviews code once for every reviews widget on the page, including widgets your app adds later.

Copy a widget's element from its Embed widget dialog: go to Reviews → On-site widgets, open the widget and choose Embed widget, then Embed with code.

<cevoid-reviews data-widget="w_4k8m2q7x1n5pza" data-product="auto"></cevoid-reviews>

The dialog adds the context attribute the widget needs. A widget made for a product, collection, category or brand renders nothing on an element without that attribute, and a widget made for a fixed selection of reviews renders nothing on an element with one.

You choose in Cevoid whether a widget shows product reviews or company reviews; the element is the same.

data-product accepts:

• auto: the product of the current page, matched by its URL, then by the last part of the URL path within the market.
• A Cevoid product or variant ID (prd_…, var_…).
• An absolute product URL, matched like auto.
• Your own identifier: a product or variant ID from your store (a Shopify numeric ID works), a SKU, a barcode or GTIN. When it matches more than one product, the widget shows nothing.

data-collection="auto" reads the collection from the page URL. data-category="auto" and data-brand="auto" read it from the URL, else from the product on the page.

Review forms open from a link, so there is no element to paste. Add the query string to a page that has the Cevoid script:

https://your-store.com/products/linen-shirt?cevoid.widget=reviews.product-review
https://your-store.com/?cevoid.widget=reviews.product-review&cevoid.product=LINEN-SHIRT-M
https://your-store.com/?cevoid.widget=reviews.company-review

• On a product page, leave out cevoid.product: the form reads the product from the URL. Elsewhere, set it to a SKU or a Cevoid catalog ID.
• cevoid.form opens a specific form (rfp_… for product reviews, rfc_… for company reviews) instead of your default one.
• rating=1 to rating=5 fills in the star rating.

Cevoid reads these from the query string only, not from a # fragment.

When Rating stars render, they dispatch a cevoid:widget-rendered event that bubbles up from the <cevoid-reviews> element:

document.addEventListener("cevoid:widget-rendered", (event) => {
  const { type, ratingValue, ratingCount } = event.detail
  if (type === "product-review-rating") console.log(ratingValue, ratingCount)
})

Rating stars and Rating summary also add Product JSON-LD with the rating to the page head, when the page shows one product with at least one review and has no product rating markup of its own. Search engines that do not run JavaScript miss it; to render the rating on your server, use server-rendered rich snippets.

Elements have no market or language attribute. Cevoid matches the page URL against the domains of your markets, else uses your default market, and the widget uses that market's language.