Embed SDK.

The embed SDK is a single dependency-free file that registers one custom element, <buyary-widget>. Each widget renders inside Shadow DOM — your page’s CSS can’t break it and it can’t leak into your page — reserves its height before it hydrates so it never shifts your layout, and hydrates lazily as it approaches the viewport. See every widget live on a demo storefront →

Install

<script src="https://buyary.com/embed/v1/buyary.js"
        data-key="pk_live_…" async></script>

<buyary-widget type="score"></buyary-widget>

Product resolution

A widget resolves which product it’s standing next to in this order — on a well-marked-up PDP you don’t pass anything:

1. Its own product attribute (plus optional brand).
2. window.BuyaryProduct — set it server-side when you render the page.
3. The page’s JSON-LD Product markup.
4. og:title, as a last resort.

Platform connectors pass stronger identifiers as data attributes — GTIN/barcode, SKU, an explicit Buyary product-ID mapping — and matching runs server-side, strongest signal first. If Buyary hasn’t published an evaluation for the product, the widget says exactly that: nothing is shown rather than something invented.

Widget types

type selects the experience: score · consensus · quotes (attributed review cards, rotating) · fit · claims · tradeoffs · verdict (headline + editorial summary) · ingredients (per-ingredient analysis, category-aware) · badge (compact dark surface, rotating quotes) · strip (single-row score + bars + review video) · comparison (add compare="…") · ask-ari · generative (add brief="…" — see generative widgets).

Theming

Presentation is yours; conclusions are not. Set it per widget with attributes, or site-wide with Buyary.theme() — per-widget attributes always win. Play with every option in the Widget Studio on the demo storefront →

<buyary-widget type="score" theme="dark" accent="#D9623C"
  font="editorial" size="l" radius="soft" layout="bare"></buyary-widget>

Buyary.theme({ font: "buyary", size: "m", accent: "#0F62FE" });

buyary-widget { --by-accent: #0F62FE; --by-radius: 8px; }

• theme="light|dark" flips the surface; layout="bare" drops the card chrome.
• font="inherit|modern|editorial|mono|buyary" — inherit (default) blends into your store’s typography; editorial/buyary opt into brand faces (loaded once, only when requested).
• size="s|m|l" scales the whole widget; radius="none|soft|round" sets corners.
• CSS custom properties (--by-accent, --by-radius, --by-font) cross the shadow boundary for finer control.

Score colors are the one thing you can’t restyle — the green means what it means everywhere Buyary appears.

Performance contract

• One file, no dependencies, loaded async — it never blocks first paint.
• Reserved height per widget type before hydration — layout shift is 0 by construction.
• IntersectionObserver hydration — below-the-fold widgets cost nothing until approached.
• One cached JSON lookup per product — responses are CDN-cached and shared across widgets on the page.
• Full prefers-reduced-motion coverage — count-ups, sweeps, and typing indicators all respect it.

Events

Widgets emit bubbling DOM events you can hook analytics onto: buyary:ready (hydrated, with detail.type and detail.product) and buyary:limited (no published evaluation). Buyary.refresh() re-hydrates every widget after client-side navigation.

Structured data