Add Product Overviews to any website
Whether you're on WooCommerce, Magento, a headless build, or a plain HTML page — the widget figures out which product it's on automatically. In most cases you don't touch the SKU at all.
How the widget finds the product
The widget tries three sources in order, stopping as soon as it finds a match. You only need to set up whichever one fits your platform.
Most e-commerce platforms already output a <script type="application/ld+json"> block with product data on every product page. If yours does, you don't need to configure anything — the widget reads the sku field automatically.
Platforms that output this by default: WooCommerce, Magento, BigCommerce, most headless storefronts built with Next.js or Nuxt.
<!-- Example: what your platform likely already outputs -->
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Wireless Headphones Pro",
"sku": "WHP-2024-BLK",
"description": "..."
}
</script>
<!-- That's it. Paste the widget script below and you're done. -->
<div id="po-widget"></div>
<script
src="https://api.productoverviews.com/widget/v1.js?v=product-reasoning-1"
data-brand-id="your-brand-id"
data-api-base="https://api.productoverviews.com"
data-mount="po-widget">
</script>application/ld+json. If you see a block with "@type": "Product" and a "sku" field, you're already good to go.Set window.__PO_PRODUCT__ before the widget script loads. Your server or template renders the SKU into this variable — the same pattern the Shopify snippet uses.
<!-- Your backend/template renders the SKU here -->
<script>
window.__PO_PRODUCT__ = {
product_key: "{{ your_platform_sku_variable }}"
};
</script>
<div id="po-widget"></div>
<script
src="https://api.productoverviews.com/widget/v1.js?v=product-reasoning-1"
data-brand-id="your-brand-id"
data-api-base="https://api.productoverviews.com"
data-mount="po-widget">
</script>Replace {{ your_platform_sku_variable }} with however your platform exposes the current product's SKU — for example, {{ product.sku }} in Liquid, <?= $product->sku ?> in PHP, or {product.sku} in a JS template.
You can hardcode the SKU directly in the script tag using data-product-key. Only practical for a single product on a landing page — you'd need a different snippet on every product page otherwise.
<div id="po-widget"></div>
<script
src="https://api.productoverviews.com/widget/v1.js?v=product-reasoning-1"
data-brand-id="your-brand-id"
data-api-base="https://api.productoverviews.com"
data-product-key="WHP-2024-BLK"
data-mount="po-widget">
</script>Publish your product in the Studio
Before the widget shows anything, the product needs to be published. In the Product Overviews Studio, open the product, generate its reasoning, and click Publish.
The SKU in the Studio must exactly match what your platform outputs — same casing, same hyphens, same format. If your store uses WHP-2024-BLK, that's what you publish under in the Studio.
Copy your embed snippet from the Studio
Open the Studio, find your product, and click Export / Embed. Switch to the Manual tab. Copy the snippet and paste it into your product page template — once, in the right place, and it covers every product automatically via schema.org or your platform variable.
Verify it's working
Load a product page in your browser. If the widget appears with your product's name and suggested questions, you're done.
If nothing appears:
- →Open DevTools → Console and look for a warning from the widget. It logs when it can't find a product key.
- →View Page Source and search for
application/ld+json. If there's no"sku"field in the Product block, use option 2 (the JS variable) instead. - →Confirm the product is marked Published in the Studio — the widget hides itself silently for unpublished products.
- →Check that the SKU in the Studio exactly matches what the page is outputting (casing matters:
WHP-2024-blk≠WHP-2024-BLK).