Next.js (App Router or Pages) - Client only

Ensure the widget runs only on the client by using a client component and useEffect. Add the script via next/script or in _document:

// app/layout.tsx (App Router)
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Script
          src="<https://glyph-core.s3.us-east-1.amazonaws.com/test/Glyph-unified-bundle.js>"
          strategy="afterInteractive"
        />
        {children}
      </body>
    </html>
  );
}

// app/page.tsx (client component)
"use client";

import { useEffect } from "react";

export default function Page() {
  useEffect(() => {
    (async () => {
      await window.Glyph?.initWidget({
        theme: {
          primaryColor: "#fc6432",
          placement: "bottom-right",
          theme: "dark",
        },
        supportedChains: ["ethereum", "polygon"],
      });
    })();

    return () => {
      window.Glyph?.destroyReactIframe?.();
    };
  }, []);

  return <main>Home</main>;
}
PreviousReact (CRA/Vite, CSR)NextAngular

Last updated