@ecodrix/chatbot
Advanced tools
A lightweight, dependency-free JavaScript SDK for embedding the ECODrIx Chatbot widget into any website or framework — with elegance, speed, and full customization.
The ECODrIx SDK makes it effortless to drop an AI-powered chatbot onto your site.
With a few lines of JavaScript, you can add a floating chat bubble that opens an iframe chat window — beautifully animated, mobile-friendly, and fully customizable.
✅ No dependencies
✅ Works with React, Vue, Next.js, static HTML
✅ Custom bubble colors, tooltips, and icons
✅ Responsive iframe and smooth animations
✅ Auto-open timer & click-outside-to-close behavior
You can install the SDK using npm or a CDN link.
npm install @ecodrix/chatbot
<script src="https://cdn.jsdelivr.net/npm/@ecodrix/chatbot/dist/index.umd.js"></script>
import { ECODrIx } from "@ecodrix/chatbot";
ECODrIx.init({
botUrl: "https://app.ecodrix.com/widget-frame",
bubbleIcon: "💬",
bubbleColor: "#4f46e5",
bubbleSize: 60,
bubblePosition: "bottom-right",
iframeWidth: 350,
iframeHeight: 500,
iframeBorderRadius: 10,
autoOpen: 10, // auto-open after 10 seconds
});
<script src="https://cdn.jsdelivr.net/npm/chatbot/dist/index.umd.js"></script>
<script>
ECODrIx.init({
botUrl: "https://app.ecodrix.com/widget-frame",
bubbleIcon: "💬",
bubbleColor: "#4f46e5",
autoOpen: 8,
});
</script>
ECODrIx.show(); // Open the iframe
ECODrIx.hide(); // Hide the iframe
ECODrIx.destroy(); // Remove the widget completely
| Option | Type | Default | Description |
|---|---|---|---|
| botUrl | string | — | URL of the chatbot iframe (required) |
| bubbleIcon | string | "💬" | Emoji, SVG string, or image URL |
| bubbleColor | string | "#4f46e5" | Base color for the chat bubble |
| iconColor | string | "#ffffff" | Color for icon inside bubble |
| pulseColor | string | "#34d399" | Pulse/ripple effect color |
| tooltipText | string | "Chat with us!" | Hover tooltip text |
| tooltipColor | string | "#333333" | Tooltip text color |
| tooltipBgColor | string | "#ffffff" | Tooltip background color |
| bubbleSize | number | 56 | Diameter of bubble in pixels |
| bubblePosition | "bottom-left", "bottom-right", "top-left", "top-right" | "bottom-right" | Screen corner position |
| iframeWidth | number | 340 | Width of chat iframe |
| iframeHeight | number | 500 | Height of chat iframe |
| iframeBorderRadius | number | 8 | Iframe border radius in px |
| shadow | string | "0 25px 50px -12px rgba(0,0,0,0.4)" | Shadow under iframe |
| bubbleShadow | string | "0 10px 40px rgba(0,0,0,0.2)" | Shadow under bubble |
| ripple | boolean | true | Enable ripple animation |
| rippleSpeed | number | 1.5 | Ripple speed multiplier |
| autoOpen | number | 0 | Seconds before iframe auto-opens |
| closeClickOutside | boolean | true | Close iframe on outside click |
import { ECODrIx } from "@ecodrix/chatbot";
const chatbot = ECODrIx.init({
botUrl: "https://app.ecodrix.com/widget-frame",
bubbleIcon: "<svg>...</svg>",
bubbleColor: "#9333ea",
tooltipText: "Need help?",
tooltipBgColor: "#111827",
tooltipColor: "#ffffff",
shadow: "0 15px 40px rgba(0,0,0,0.3)",
autoOpen: 5,
});
// Dynamically update configuration
chatbot.updateConfig({
bubbleColor: "#2563eb",
tooltipText: "Chat is live!",
});
import { useEffect } from 'react';
import { ECODrIx } from '@ecodrix/chatbot';
export default function App() {
useEffect(() => {
ECODrIx.init({
botUrl: "https://app.ecodrix.com/widget-frame",
bubbleColor: "#4f46e5",
});
}, []);
return <YourApp />;
}
import { ECODrIx } from '@ecodrix/chatbot';
export default {
mounted() {
ECODrIx.init({
botUrl: "https://app.ecodrix.com/widget-frame",
bubbleColor: "#4f46e5",
});
}
}
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@ecodrix/chatbot/dist/index.umd.js"></script>
<script>
ECODrIx.init({
botUrl: "https://app.ecodrix.com/widget-frame",
bubbleIcon: "💬",
autoOpen: 5,
});
</script>
</body>
</html>
Under the hood, the SDK:
Creates a floating bubble button Preloads the iframe chatbot for instant open Animates bubble hover + ripple pulse Handles window resizing & postMessage events for iframe control Exposes control methods (init, show, hide, destroy) globally or as module exports
It's pure vanilla JavaScript — no React, no external dependencies, no heavy bundle. Perfect for embedding on any platform or CMS.
Released under the MIT License.
Built and maintained by the ECODrIx Team, crafting elegant automation tools for modern businesses.
Ready to enhance user engagement? Install the SDK and start chatting with your visitors in minutes! 🚀
FAQs
ECODrIx Chatbot SDK - lightweight widget integration
We found that @ecodrix/chatbot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.