Embed on Hydrogen, Next.js, Astro and Remix

On a headless storefront the widget is the same single script, but where you mount it matters so you don’t fight SSR or hydration. The pattern is consistent: render a placeholder, load the script lazily, keep it in a leaf component.

Next.js (App Router)

import Script from "next/script"

export function IdukkiGallery({ bguid, guid }: { bguid: string; guid: string }) {
  return (
    <>
      <div data-ugc="idukki" data-bguid={bguid} data-guid={guid} data-retarget="false" />
      <Script src="https://idukki-cdn.com/version/script_0" strategy="lazyOnload" />
    </>
  )
}

Hydrogen, Astro and Remix

Use the same approach: place the placeholder div and the script in a leaf component, and load the script after hydration. In Hydrogen, a client-only wrapper avoids an SSR mismatch; in Astro, a client directive on the island does the same; in Remix, mount it in a component that only runs on the client.