๐ ️ 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
