Install Relay in
Next.js or React.

1. Create the signed slot

In Dashboard → Products, create a recommendation slot and save the exact production route that will render the component.

2. Render the slot and load the script

For Next.js, use next/script with the dashboard-recommended afterInteractive strategy. This loads the widget after hydration without blocking the route.

import Script from "next/script";

export function RelayRecommendation() {
  return (
    <>
      <div data-project-relay-slot="YOUR_SLOT_TOKEN" />
      <Script
        src="https://relaymyproject.com/widget/v1.js"
        data-slot="YOUR_SLOT_TOKEN"
        strategy="afterInteractive"
      />
    </>
  );
}

Render <RelayRecommendation /> at the intended location. If a shared layout can render more than once, keep the script in the layout and render only the signed container in each route.

React without Next.js

Render the signed container in your component and load the dashboard-generated script once from your document template or application shell. Avoid injecting a raw script tag during every component render.

3. Deploy the exact route

Deploy the application and open the saved path over public HTTPS. Confirm that redirects settle on the same page recorded in Relay and that authentication, preview protection, or middleware does not block it.