Install on Next.js

Replace bw_pk_… with your project's public key from the dashboard's Install page. The key only identifies the project; there is no secret in the page.

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.backwire.io/v1/widget.js" strategy="lazyOnload" data-backwire="bw_pk_…" />
      </body>
    </html>
  );
}

Content-Security-Policy

script-src  'self' https://cdn.backwire.io https://challenges.cloudflare.com;
connect-src 'self' https://api.backwire.io;
frame-src   https://challenges.cloudflare.com;

No style-src 'unsafe-inline' is needed: the widget styles itself inside a closed shadow root with constructable stylesheets.

Single-page apps

Route changes made with pushState are detected automatically. From code: window.backwire.open(), window.backwire.close(), window.backwire.identify({ email }) for signed-in users.