Add ordering to Next.js

In Next.js, render the container div and load the script with next/script. App Router example:

import Script from 'next/script'

export default function OrderPage() {
  return (
    <>
      <div
        data-delitero-restaurant="your-restaurant"
        style={{ height: 640, maxWidth: 480 }}
      />
      <Script src="https://order.delitero.com/embed.js" strategy="afterInteractive" />
    </>
  )
}

The loader mounts every container it finds when it runs, and mounting is idempotent. One thing to know: on client-side navigation to a page whose container did not exist when the script first ran, mount it yourself:

useEffect(() => {
  const el = document.querySelector('[data-delitero-restaurant]')
  if (el) window.Delitero?.mount(el)
}, [])

The widget manages its own DOM inside a shadow root on the container div, so React does not try to reconcile it. Keep the div empty and unkeyed.

Works everywhere, or the link does

Whatever your website can or cannot embed, the hosted ordering page always works as a plain link. Sizing, isolation guarantees, and single-page-app notes are on the Add ordering to your site overview.