🛠️ Step-by-Step: WordPress Plugin for AI Chat
1. 📁 Create Your Plugin Folder and File
-
Go to
/wp-content/plugins/ -
Create a new folder:
ai-chat-plugin -
Inside that folder, create a file:
ai-chat-plugin.php
Example content for ai-chat-plugin.php:
<?php
/**
* Plugin Name: AI Chat Plugin
* Description: A simple AI chat widget using a custom API or service like ChatGPT.
* Version: 1.0
* Author: Your Name
*/
add_action('wp_footer', 'ai_chat_plugin_script');
function ai_chat_plugin_script() {
?>
<div id="ai-chat-widget" style="position:fixed;bottom:20px;right:20px;width:300px;height:400px;background:white;border:1px solid #ccc;border-radius:8px;padding:10px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:9999;">
<div id="chat-messages" style="height:320px;overflow-y:auto;margin-bottom:10px;"></div>
<input type="text" id="chat-input" placeholder="Type a message..." style="width:80%;">
<button onclick="sendChatMessage()">Send</button>
</div>
<script>
async function sendChatMessage() {
const input = document.getElementById('chat-input');
const message = input.value;
if (!message) return;
const chatBox = document.getElementById('chat-messages');
chatBox.innerHTML += `<div><b>You:</b> ${message}</div>`;
input.value = '';
const response = await fetch('https://your-ai-endpoint.com/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// Add authorization headers if needed
},
body: JSON.stringify({ message })
});
const data = await response.json();
chatBox.innerHTML += `<div><b>AI:</b> ${data.reply}</div>`;
chatBox.scrollTop = chatBox.scrollHeight;
}
</script>
<?php
}
2. 🤖 Set Up the AI Backend
You need an API endpoint (https://your-ai-endpoint.com/chat in the above example) that accepts a message and returns a reply.
If using ChatGPT API:
Example backend (Node.js or PHP or Python) should take the user's message, send it to the OpenAI API, and return the response.
3. ✅ Activate Your Plugin
-
Go to the WordPress Admin Dashboard
-
Navigate to Plugins → Installed Plugins
-
Find AI Chat Plugin and click Activate
4. 🧪 Test It
Go to your site and check the bottom right corner. The chat box should be there!
💡 Bonus Features to Add Later
-
Chat history
-
User authentication
-
Typing indicators
-
Styling improvements (use Tailwind or CSS frameworks)
-
Chatbot personality settings
Startup/Small Business
Website Development Package
₹ 15,000 / 180 USD
EXCLUSIVE OF ALL TAXES
10 to 15 Pages
Logo
Slider
Dynamic Website
Domain-1st Year Free (.com or .in )
Hosting Free For 1st Year
2 Email – 500 MB Quota Each
1 Contact Form
Free SSL
Testimonials
Gallery Section
Chat Feature
Content - 1 Rs per word
Social Profile Link
Click to Call/Email
Mobile Responsive
Login Details Will Be Given
Delivery in 7 Days
Renewal – Hosting + Domain Price Plus GST $ 100/Y
Free 4 Hours Support
Support – 5 $/Hr
