The single-file SDK is the simplest way to put a widget anywhere. It is one self-contained script that renders a collection into a placeholder element, mounts on first scroll-in and stays isolated from the rest of your page.
<div data-ugc="idukki" data-bguid="YOUR_BGUID" data-guid="YOUR_COLLECTION_GUID" data-retarget="false"></div>
<script src="https://idukki-cdn.com/version/script_0" async></script>On a product page, add filter-pid with the product id from your store so the widget only shows posts tagged with that product. Several ids can be comma-separated, and the widget re-fetches if the attribute changes after load.
<!-- On a product page, pass the product id so only posts tagged with it show -->
<div data-ugc="idukki" data-bguid="YOUR_BGUID" data-guid="YOUR_COLLECTION_GUID" filter-pid="PRODUCT_ID" data-retarget="false"></div>
<script src="https://idukki-cdn.com/version/script_0" async></script>Why it stays out of the way
- It renders into a placeholder you control, so you decide where it lives and how much space it gets.
- It mounts interactivity only when the widget scrolls into view, keeping first load light.
- It doesn’t reach into your framework’s state, so it won’t cause hydration mismatches.
