Next.js - Cuprice

Use the built-in Script component for optimal loading:

import Script from "next/script";

export default function PricingPage() {
  return (
    <section className="py-20 px-6">
      <div data-cuprice-id="YOUR_SHARE_ID"></div>
      <Script src="https://app.cuprice.io/embed.js" strategy="lazyOnload" />
    </section>
  );
}

Using environment variables

Store the Share ID in .env.local to keep it configurable:

CUPRICE_SHARE_ID=nTZ7axXQHU
NEXT_PUBLIC_CUPRICE_BASE=https://cuprice.io

import Script from "next/script";

export default function PricingPage() {
  return (
    <section>
      <div data-cuprice-id={process.env.CUPRICE_SHARE_ID}></div>
      <Script
        src={`${process.env.NEXT_PUBLIC_CUPRICE_BASE}/embed.js`}
        strategy="lazyOnload"
      />
    </section>
  );
}

strategy="lazyOnload" loads the script after the page is interactive — it never blocks rendering.