React & Next.js 15 Integration

Integrate the WeaveDesk AI widget into Next.js App Router or standard React SPAs.

Next.js (App Router) Integration

Create a client component at components/SupportWidget.tsx:

"use client";

import { useEffect } from "react";

export default function SupportWidget({ 
  appId = process.env.NEXT_PUBLIC_WEAVEDESK_APP_ID || "wd_live_sample",
  theme = "#6366f1" 
}) {
  useEffect(() => {
    if (document.querySelector("script[data-weavedesk-script]")) return;

    const script = document.createElement("script");
    script.src = "https://your-domain.com/widget.js";
    script.setAttribute("data-app-id", appId);
    script.setAttribute("data-theme", theme);
    script.setAttribute("data-weavedesk-script", "true");
    script.async = true;

    document.body.appendChild(script);

    return () => {
      const existing = document.querySelector("script[data-weavedesk-script]");
      if (existing) existing.remove();
    };
  }, [appId, theme]);

  return null;
}

Add it to your Root Layout (app/layout.tsx):

import SupportWidget from "@/components/SupportWidget";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <SupportWidget />
      </body>
    </html>
  );
}