Add an AI Chatbot to Your React App

import { useEffect, useRef } from "react";

const CDN = "https://cdn.cortexvia.in";
const CHATBOT_KEY = "ctx-cb-xxxxxxxxxxxxxxxx";

/* One shared promise, so the CDN files are requested once per page even if the
 * component mounts twice (React StrictMode does exactly that in development). */
let sdkReady: Promise<unknown> | null = null;

function loadSdk() {
  if (sdkReady) return sdkReady;

  sdkReady = new Promise((resolve, reject) => {
    if ((window as any).ChatbotSDK) {
      resolve((window as any).ChatbotSDK);
      return;
    }

    const css = document.createElement("link");
    css.rel = "stylesheet";
    css.href = CDN + "/chatbotsdk-web.css";
    document.head.appendChild(css);

    const script = document.createElement("script");
    script.src = CDN + "/chatbotsdk-web.iife.js";
    script.async = true;
    script.onload = () => resolve((window as any).ChatbotSDK);
    script.onerror = () => reject(new Error("Cortexvia SDK failed to load"));
    document.head.appendChild(script);
  });

  return sdkReady;
}

export default function CortexviaChat() {
  const mountNode = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let cancelled = false;
    let handle: { unmount: () => void } | null = null;

    loadSdk().then((sdk: any) => {
      // The effect can be torn down before the CDN responds.
      if (cancelled || !mountNode.current || !sdk?.mount) return;

      handle = sdk.mount(mountNode.current, {
        chatbotKey: CHATBOT_KEY,
        config: { mode: "chatbot", position: "bottom-right" },
      });
    });

    return () => {
      cancelled = true;
      handle?.unmount();
    };
  }, []);

  return <div ref={mountNode} />;
}

<script>
  window.cvChatHandle = window.ChatbotSDK.mount("#cv-chat", {
    chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
    config: {
      mode: "chatbot"
    }
  });
</script>