Next.js (App Router)

Add the script to your root layout

Open your root layout file (app/layout.tsx) and add the script using next/script:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://localbot.io/api/widget/YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

React (Vite, Create React App, etc.)

Add the script to index.html

Open your index.html file and add the script before the closing </body> tag:

<script src="https://localbot.io/api/widget/YOUR_WIDGET_ID" async></script>
</body>

Targeting a specific component

To render the widget inside a specific React component, add a target div:

export function ContactSection() {
  return (
    <section>
      <div id="localbot-contact" />
    </section>
  );
}

The localbot script automatically finds #localbot-contact and renders inside it.

Verify

Start your dev server and open the page. The form should appear. Submit a test message and check your phone.

If your Next.js app sets a Content-Security-Policy header (via next.config.ts or middleware), you must allow https://www.localbot.io in both script-src and connect-src. Without this, the browser silently blocks the widget.

// next.config.ts
const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: [
              "default-src 'self'",
              "script-src 'self' 'unsafe-inline' https://www.localbot.io",
              "connect-src 'self' https://www.localbot.io",
            ].join("; "),
          },
        ],
      },
    ];
  },
};

script-src is required for the widget to load. connect-src is required for form submissions to reach /api/widget/submit.

Troubleshooting

Widget doesn't appear in development: The widget fetches from localbot.io. Make sure you have internet access and your widget ID is correct.
Widget script request shows as blocked or returns no response: Check your CSP header. See the "Content Security Policy" section above.
Hydration warnings: The widget injects DOM after React hydration. This is expected and does not affect functionality. Using #localbot-contact as a target avoids body-level injection.

Last updated: 2026-05-23. Maintained by Benjam Indrenius.

React / Next.js Installation