Add a video bubble to your Next.js and React site

Load the script once in your root layout. CornerHello follows client-side route changes on its own, so page rules keep working in single-page apps.

Before you start

Access to your app’s code and a deploy.
Your site key (Dashboard → Install).

The code

Replace YOUR_SITE_KEY with the key from Dashboard → Install.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cornerhello.com/w/l.js" data-site="YOUR_SITE_KEY" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Steps

1
Open your root layout (app/layout.tsx in the App Router, or pages/_app.tsx).
2
Add the Script component from next/script with strategy “afterInteractive”, as below.
3
Deploy, then open the site in a private window.

Check that it works

Open your site in a private window and wait a few seconds: the bubble slides into the corner. In your dashboard, Install → Verify confirms that the line is found. Nothing showing? Check that the page matches your funnel’s page rules and that the funnel is published.

In other React setups (Vite, Create React App, Remix), paste the plain script line into index.html before </body>.
Don’t add the script inside components that remount; once in the root is enough.

FAQ

CornerHello on Next.js and React

Does it work with client-side navigation?

Yes. CornerHello listens for route changes and shows or hides the bubble according to your page rules.

Will it clash with my styles?

No. The bubble renders inside its own shadow DOM, so your CSS and ours don’t touch each other.

Other platforms

WordPress Shopify Webflow Wix Squarespace Kajabi Thinkific Teachable Google Tag Manager Any website

What to say in your video

Say hello to every visitor.

We’re opening CornerHello in small groups. Leave your email and we’ll let you in soon.