chat-assistant-dit
v1.0.11
Published
A lightweight, customizable chat assistant widget for web and React apps.
Maintainers
asfakurReadme
🤖 Chat Assistant Widget
A lightweight, customizable chat assistant widget for your React applications. Quickly integrate a chatbot into any page with minimal configuration.
📦 Installation
Install via npm:
npm install chat-assistant-dit
🚀 Quick Start
✅ Option 1: Use as a React Module
If you are using a modern React project with module support:
1. Import and initialize the chat assistant:
js
Copy
Edit
// App.js
import React, { useEffect } from 'react';
import { initChatBot } from 'chat-assistant-dit';
import 'chat-assistant-dit/src/styles.css'; // Optional: use your own styles
function App() {
useEffect(() => {
initChatBot({
welcomeMessage: "👋 Hello! I'm your assistant. Ask me anything!",
themeColor: "#4A90E2",
});
}, []);
return (
<div className="App">
<h1>Welcome to My App</h1>
</div>
);
}
export default App;
✅ Option 2: Use as a Bundled Script (UMD Build)
You can also include the widget as a standalone script (for HTML or older setups):
1. Include the bundled JavaScript and CSS
html
Copy
Edit
<!-- index.html -->
<head>
<link rel="stylesheet" href="node_modules/chat-assistant-dit/src/styles.css" />
</head>
<body>
<div id="app"></div>
<script src="node_modules/chat-assistant-dit/dist/chatbot.bundle.js"></script>
<script>
window.ChatBot.initChatBot({
welcomeMessage: "👋 Hi there!",
themeColor: "#00BFA5"
});
</script>
</body>
Make sure your bundler (or dev server) supports static file imports if using a local path.