Agent Widget Embed Test

This page loads the built widget bundle via a single <script> tag and customizes it via window.AgentWidgetConfig.

Run npm run build then npm run preview, and open this page at /embed-test.html.

Use via jsDelivr (CDN)

  1. Add config before the script 
    <script>
window.AgentWidgetConfig = {
  position: "bottom-right",
  theme: {
    primaryColor: "#4F46E5",
    backgroundColor: "#ffffff",
    textColor: "#111827",
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif"
  },
  agent: { name: "HelperBot", avatar: "" },
  enableVoice: true,
  languageOptions: ["en", "hi", "es"],
  context: "You are a front-end expert"
};

// Optional: point the widget to your API base (defaults to same origin)
// window.__AGENT_WIDGET_API_BASE__ = ""; // same origin (e.g. Netlify with redirect)
// window.__AGENT_WIDGET_API_BASE__ = "https://your-site.netlify.app";
// window.__AGENT_WIDGET_API_BASE__ = "https://api.yourdomain.com";
</script>
  2. Load the IIFE bundle (not a module)

    Pinned version:

    <script src="https://cdn.jsdelivr.net/npm/ai-chat-widget-react@1.0.1"></script>

    Latest (auto-updates):

    <script src="https://cdn.jsdelivr.net/npm/ai-chat-widget-react@latest"></script>

    Do not use type="module" for this IIFE bundle.

  3. Configure the API path

    Netlify Functions (recommended, same-origin):

    <script>
window.__AGENT_WIDGET_API_BASE__ = ""; // same origin; ensure redirect /api/* -> /.netlify/functions/:splat
</script>

    External backend:

    <script>
window.__AGENT_WIDGET_API_BASE__ = "https://api.yourdomain.com";
</script>
  4. Programmatic control (optional) 
    <script>
// window.AgentWidget.open();
// window.AgentWidget.close();
// window.AgentWidget.toggle();
</script>

Minimal full example

<!doctype html>
<html>
  <head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /></head>
  <body>
    <script>
      window.AgentWidgetConfig = {
        position: "bottom-right",
        theme: { primaryColor: "#4F46E5", backgroundColor: "#ffffff", textColor: "#111827" },
        agent: { name: "HelperBot", avatar: "" },
        enableVoice: true,
        languageOptions: ["en", "hi", "es"],
        context: "You are a front-end expert",
      };
      window.__AGENT_WIDGET_API_BASE__ = ""; // same origin (e.g. Netlify)
    </script>
    <script src="https://cdn.jsdelivr.net/npm/ai-chat-widget-react@1.0.2"></script>
  </body>
</html>

Gotchas: Load as a plain script (no type="module"), define window.AgentWidgetConfig (and optional window.__AGENT_WIDGET_API_BASE__) before the CDN script, and ensure CORS allows cross-origin POST if calling an external backend.