Installing the widgets

Everything Evident renders on your storefront comes from one script and a container element per widget.

The script

Storefront → Install & Theme has your copy of this, with your store environment ID filled in. Add it once, anywhere — theme footer, app shell, root layout.

<script
  src="https://app.evidentugc.com/widgets/evident-sdk.min.js"
  data-store-env-id="YOUR_STORE_ENV_ID"
></script>

It loads its own stylesheet, fetches your theme settings, and mounts every container it finds. It also watches the DOM, so containers your framework renders later are mounted too, and re-mounted if a re-render blows one away.

The store environment ID is not a secret — it identifies a store, it does not authorise anything. What controls who may call the API from a browser is the origin allow-list under Settings → Store, which is enforced by CORS. A domain that is not on the list gets nothing.

The widgets

Place a container wherever you want output. The widget type goes in data-evident-widget.

star-badge

The compact rating summary — stars, average, count. Goes on product cards and near the product title.

<div data-evident-widget="star-badge" data-product-id="PRODUCT_ID"></div>

Options: data-show-count, data-size, data-scroll-target (a CSS selector to jump to when clicked — point it at your review list).

review-list

The full review list for one product, with sorting and pagination.

<div data-evident-widget="review-list" data-product-id="PRODUCT_ID"></div>

Options: data-layout, data-limit, data-show-distribution, data-show-sorting, data-show-images, data-show-helpful, data-show-date, data-show-form.

review-form

A standalone submission form. Most stores do not need this — the hosted form linked from review request emails covers the normal path — but it is there for “write a review” on the page itself.

<div data-evident-widget="review-form" data-product-id="PRODUCT_ID"></div>

Options: data-allow-images, data-max-images.

review-carousel

Store-wide reviews, rotating. For a homepage or a landing page. Takes no product ID.

<div data-evident-widget="review-carousel"></div>

Options: data-autoplay, data-autoplay-interval, data-carousel-arrows, data-carousel-dots, data-limit, data-show-product-name.

gallery

A curated gallery, by slug.

<div
  data-evident-widget="gallery"
  data-gallery-slug="customer-photos"
  data-columns="3"
></div>

Options: data-display-mode, data-grid-columns, data-caption-position, data-show-title, data-show-description, data-show-submissions, and the data-lead-form-* family if the gallery captures leads.

faq

FAQs for a target. data-target-type is product, category, page or blog, and the ID attribute follows from it — data-product-id, data-category-id, or data-page-id.

<div
  data-evident-widget="faq"
  data-target-type="product"
  data-product-id="PRODUCT_ID"
></div>

Options: data-layout (accordion, dual-column, list), data-limit, data-no-global to suppress the store-wide FAQs that otherwise cascade in.

loyalty

The customer’s loyalty panel — balance, tier, ways to earn, rewards.

<div data-evident-widget="loyalty" data-email="CUSTOMER_EMAIL"></div>

Options: data-show-rewards, data-show-earning-rules, data-show-referral-code, data-show-favorites.

Product IDs

data-product-id is your platform’s product ID — the same value Evident synced or you pushed. On BigCommerce that is {{product.id}}; on Shopify, {{ product.id }}. On a headless store it is whatever you sent as platformProductId.

Getting this wrong is the usual cause of a widget rendering nothing at all: the container mounts, asks for a product that does not exist, and shows an empty state.

Performance

The script is async and does not block rendering. Widgets render their own content and reserve their space, so adding one does not push your page around after load.

If you enforce a Content Security Policy, allow app.evidentugc.com for script-src and style-src, and cdn.evidentugc.com for img-src.

Programmatic control

The SDK exposes an API on window.Evident for frameworks that would rather mount explicitly than rely on DOM watching: init(), refresh(), mount(el) and unmount(el). All are safe to call more than once. See Headless storefronts for the React pattern.