Aicatbot is a simple, lightweight chatbot interface built using pure HTML and the BotPress web chat widget. This project demonstrates how easy it is to integrate a conversational AI chatbot into a website without any complex backend setup.
Perfect for beginners learning web development and AI integration!
- No Backend Required: Just HTML and BotPress widget
- Easy to Understand: Simple, clean code
- Quick Setup: Get running in minutes
- Fully Functional: Real AI conversations
- Beginner Friendly: Great for learning
- 🤖 AI-Powered Chat: Intelligent responses using BotPress
- 💬 Simple Interface: Clean, user-friendly design
- 📱 Responsive: Works on all devices
- ⚡ Fast Loading: Lightweight HTML structure
- 🎨 Customizable: Easy to modify styles and appearance
📄 HTML5 - Structure
🎨 CSS3 - Styling
⚡ JavaScript - Interactivity
🤖 BotPress Widget - AI Chat Functionality
📦 Aicatbot/
│
├── 📜 index.html # Main HTML file
├── 📜 README.md # Documentation
└── 📜 .gitignore # Git ignore file
Simple and straightforward! 🎉
All you need is:
- A web browser (Chrome, Firefox, Safari, etc.)
- A text editor (VS Code, Notepad++, etc.)
- Internet connection (for BotPress widget)
-
Clone the repository
git clone https://github.com/Ujjwal-Kumar6/Aicatbot.git cd Aicatbot -
Open the file
- Simply open
index.htmlin your web browser - That's it! No installation needed 🎉
- Simply open
-
Start chatting
- The chatbot will load automatically
- Click the chat icon to start a conversation
The project uses the BotPress web chat widget, which is embedded in the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Aicatbot</title>
</head>
<body>
<!-- Your page content -->
<!-- BotPress Chat Widget -->
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script>
window.botpressWebChat.init({
botId: "your-bot-id",
hostUrl: "https://cdn.botpress.cloud/webchat/v1",
messagingUrl: "https://messaging.botpress.cloud",
clientId: "your-client-id"
});
</script>
</body>
</html>The widget handles all the AI functionality - you just need HTML! 🚀
You can customize the chat widget by modifying the init parameters:
window.botpressWebChat.init({
botId: "your-bot-id",
hostUrl: "https://cdn.botpress.cloud/webchat/v1",
messagingUrl: "https://messaging.botpress.cloud",
clientId: "your-client-id",
// Customization options
botName: "Aicatbot",
botAvatar: "https://your-avatar-url.com/image.png",
backgroundColor: "#6C63FF",
textColorOnBackground: "#ffffff"
});Add CSS to style your page:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}- Open the website
- Click the chat icon (usually bottom-right)
- Type your message
- Get instant AI responses!
- Fork this repository
- Modify
index.htmlwith your own BotPress bot credentials - Customize the design and layout
- Deploy to GitHub Pages or any hosting service
- Go to your repository settings
- Scroll to "Pages" section
- Select main branch as source
- Click Save
- Your site will be live at:
https://username.github.io/Aicatbot/
- Netlify: Drag and drop deployment
- Vercel: Connect your GitHub repo
- Any Web Server: Just upload the HTML file
Building this project taught me:
- ✅ How to integrate third-party widgets
- ✅ Basic HTML structure
- ✅ Working with CDN scripts
- ✅ Deploying static websites
- ✅ Creating interactive web interfaces
- ✅ Understanding AI chatbot integration
- Add custom styling and themes
- Create landing page design
- Add multiple language support
- Include loading animations
- Add chat history feature
- Create mobile app version
- Add voice input capability
Want to make this project better? Contributions are welcome!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Start Simple: This project is perfect for beginners
- Experiment: Try changing colors, fonts, and layouts
- Learn by Doing: Modify the code and see what happens
- Ask Questions: Check the Issues section for help
- Share Your Work: Deploy it and show your friends!
Q: Do I need to know programming?
A: Basic HTML knowledge is enough! The AI is handled by BotPress.
Q: Is this free to use?
A: Yes! Both the code and BotPress widget have free tiers.
Q: Can I use my own bot?
A: Yes! Just replace the bot credentials with your own.
Q: Does this work offline?
A: No, it needs internet to connect to BotPress servers.
This project is open source and available under the MIT License.
Class 10 Student | Web Developer | AI Enthusiast
Building cool projects while learning web development
I'm a Class 10 student passionate about technology and AI. This is one of my projects where I'm exploring how to integrate AI chatbots into websites. I believe in learning by building, and I hope this project inspires other students to start coding!
- Thanks to BotPress for the amazing free widget
- Inspired by modern chatbot interfaces
- Built while learning HTML and web development
- Thanks to the developer community for support
- GitHub: @Ujjwal-Kumar6
- Issues: Report a bug or request a feature
- Email: your.email@example.com
