AI Chat Bot - WordPress Plugin

A modern, professional AI-powered chatbot widget for WordPress. Fully customizable, responsive, and easy to integrate with any WordPress website.

✨ Features

• 🎨 Fully Customizable - Match your brand colors and style
• 💬 Smart Interactions - Typing indicators, quick replies, and smooth animations
• 📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile
• ⚡ Lightning Fast - Optimized for performance with minimal footprint
• 🔌 AI Integration - Easy integration with OpenAI, Dialogflow, or custom APIs
• 🌍 Translation Ready - Built with i18n support for multilingual sites
• ♿ Accessible - WCAG compliant and keyboard-friendly
• 🛡️ Secure - Built following WordPress security best practices

🚀 Quick Start

Installation

Method 1: WordPress Admin (Recommended)

1. Download the ai-chatbot-v1.0.0.zip file
2. Log in to your WordPress admin panel
3. Navigate to Plugins → Add New → Upload Plugin
4. Choose the downloaded ZIP file
5. Click Install Now and then Activate

Method 2: Manual Installation

1. Download and extract the ZIP file
2. Upload the ai-chatbot folder to /wp-content/plugins/
3. Activate the plugin through the Plugins menu in WordPress

Configuration

1. Go to AI Chat Bot in your WordPress admin menu
2. Enable the chatbot using the toggle switch
3. Customize the bot name and welcome message
4. Choose your brand colors
5. (Optional) Add your AI API credentials
6. Save settings and visit your website!

📖 Usage

Basic Configuration

The plugin works out of the box with predefined responses. Simply activate it and customize the basic settings:

Bot Name: AI Assistant
Welcome Message: 👋 Hi there! How can I help you today?
Primary Color: #667eea
Secondary Color: #764ba2

AI Integration

To enable AI-powered responses:

1. Get an API key from your AI provider (OpenAI, Dialogflow, etc.)
2. Enter the API key in AI Chat Bot Settings
3. Add your API endpoint URL
4. Save settings

The chatbot will automatically use AI responses when configured.

🎨 Customization

Colors

Customize the chatbot colors from the admin settings page:

• Primary Color: Main gradient color and button colors
• Secondary Color: Secondary gradient color

Messages

Customize all messages:

• Bot name displayed in header
• Welcome message shown when chat opens
• Quick reply buttons (edit in templates/chatbot-widget.php)

Advanced Customization

For developers who want deeper customization:

CSS: Edit css/chatbot.css to modify styles JavaScript: Edit js/chatbot.js to modify behavior Template: Edit templates/chatbot-widget.php to modify HTML structure

🔌 API Integration

The plugin supports integration with various AI platforms:

OpenAI (ChatGPT)

API Endpoint: https://api.openai.com/v1/chat/completions
API Key: Your OpenAI API key

Google Dialogflow

API Endpoint: Your Dialogflow webhook URL
API Key: Your Dialogflow service account key

Custom API

Any REST API that accepts JSON and returns text responses.

🛠️ Development

File Structure

ai-chatbot/
├── ai-chatbot.php          # Main plugin file
├── readme.txt              # WordPress.org readme
├── README.md               # This file
├── css/
│   └── chatbot.css         # Chatbot styles
├── js/
│   └── chatbot.js          # Chatbot JavaScript
└── templates/
    ├── admin-page.php      # Admin settings page
    └── chatbot-widget.php  # Frontend chatbot widget

Building for Production

Run the PowerShell build script:

.\build-production.ps1

This will create a production-ready ZIP file with:

• Optimized CSS (demo styles removed)
• Production JavaScript
• All necessary templates and files

🧪 Testing

Frontend Testing

1. Visit any page on your website
2. Look for the chat button in the bottom-right corner
3. Click to open and test the chat interface
4. Try sending messages and using quick replies

Admin Testing

1. Go to AI Chat Bot settings
2. Test enabling/disabling the chatbot
3. Change colors and messages
4. Verify settings save correctly

📱 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🐛 Troubleshooting

Chat button doesn't appear

• Verify the plugin is activated
• Check that "Enable Chat Bot" is ON in settings
• Clear your browser cache
• Check browser console for JavaScript errors

Messages not sending

• Check your API credentials
• Verify your API endpoint is correct
• Check WordPress debug log for errors

Styling issues

• Clear WordPress cache (if using a cache plugin)
• Check for CSS conflicts with your theme
• Try disabling other plugins temporarily

🤝 Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues.

📄 License

This plugin is licensed under the GPL v2 or later.

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

🙏 Credits

• Icons by Font Awesome
• Inspired by modern chat interfaces

📞 Support

For support, feature requests, or bug reports:

• Open an issue on GitHub
• Contact through WordPress.org plugin support forum

🗺️ Roadmap

• Multi-language support with .po/.mo files
• Chat history and analytics
• File upload support
• Integration with popular CRM systems
• Pre-built templates for common industries
• Advanced AI conversation flows

---

Made with ❤️ for the WordPress community