Here’s how to set up everything step-by-step in VS Code:
✅ Step 1: Open Your Project in VS Code
• Launch VS Code.
• Click File → Open Folder and select your project folder.
✅ Step 2: Create the CSS File for Chatbot
1. Inside your project, create a new folder: assets/css (if it doesn’t exist).
2. Inside assets/css , create a new file named: chatbot.css .
3. Copy the CSS code provided (from the previous section) and paste it into chatbot.css .
4. Save the file (Ctrl+S).
✅ Step 3: Create the JavaScript File for Chatbot
1. Create a folder assets/js (if it doesn’t exist).
2. Inside assets/js , create a file named: chatbot.js .
3. Copy the JavaScript code I will provide next (it controls opening/closing the chatbot and sending
messages).
4. Save the file.
✅ Step 4: Link CSS and JS in index.html
1. Open index.html in VS Code.
2. Before the closing </body> tag, add:
<link rel="stylesheet" href="assets/css/chatbot.css">
<script src="assets/js/chatbot.js" defer></script>
✅ Step 5: Add Chatbot HTML Snippet
Paste this inside index.html before </body> :
<div class="cb-fab">💬</div>
<div class="cb-panel">
<div class="cb-header">AI Assistant</div>
1
<div class="cb-messages"></div>
<div class="cb-footer">
<textarea placeholder="Type a message..."></textarea>
<button>Send</button>
</div>
</div>
✅ Step 6: Write the JavaScript Logic
Open chatbot.js and paste:
const fab = document.querySelector('.cb-fab');
const panel = document.querySelector('.cb-panel');
const messages = document.querySelector('.cb-messages');
const textarea = document.querySelector('.cb-footer textarea');
const sendBtn = document.querySelector('.cb-footer button');
fab.addEventListener('click', () => {
panel.classList.toggle('open');
});
sendBtn.addEventListener('click', async () => {
const text = textarea.value.trim();
if (!text) return;
addMessage('You', text);
textarea.value = '';
// Call AI API (replace with your backend endpoint)
const res = await fetch('http://localhost:8787/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: text })
});
const data = await res.json();
addMessage('AI', data.reply || 'No response');
});
function addMessage(sender, text) {
const div = document.createElement('div');
div.textContent = `${sender}: ${text}`;
messages.appendChild(div);
messages.scrollTop = messages.scrollHeight;
}
2
✅ Step 7: Create a Simple Backend (Optional but Recommended)
1. Inside your project folder, create a folder ai-server .
2. Inside it, create server.js and add Express code (I will give you the exact code next).
3. Install Node.js and run:
cd ai-server
npm init -y
npm install express cors dotenv
4. Add your OpenAI or Gemini API key in a .env file.
5. Start the server:
node server.js
Now your chatbot will: - Float on every page. - Open when clicking the bubble. - Send questions to your AI
backend.
👉 Do you want me to give you the full backend code for VS Code now or keep it frontend only (chatbot
UI)?
