```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced AI Chat Widget</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
#chat-toggle {
position: fixed;
right: 20px;
bottom: 20px;
width: 65px;
height: 65px;
background: #0078ff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
z-index: 9999;
}
#chat-box {
position: fixed;
right: 20px;
bottom: 95px;
width: 380px;
max-width: 95%;
background: white;
border-radius: 18px;
box-shadow: 0 8px 30px rgba(0,0,0,0.25);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 9999;
}
#chat-header {
background: #0078ff;
color: white;
padding: 15px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
#chat-messages {
height: 320px;
overflow-y: auto;
padding: 15px;
background: #f5f7fb;
}
.message {
margin-bottom: 12px;
padding: 10px 14px;
border-radius: 12px;
max-width: 85%;
line-height: 1.5;
font-size: 14px;
word-wrap: break-word;
}
.user {
background: #0078ff;
color: white;
margin-left: auto;
}
.bot {
background: #e4e6eb;
color: black;
}
.typing {
display: inline-block;
font-style: italic;
color: #555;
}
.dots::after {
content: '';
animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
#quick-options {
padding: 12px;
border-top: 1px solid #ddd;
background: white;
display: flex;
flex-direction: column;
gap: 8px;
}
.option-btn {
width: 100%;
text-align: left;
padding: 12px;
border: none;
border-radius: 8px;
background: #eef4ff;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.option-btn:hover {
background: #dce9ff;
}
#chat-input-area {
display: flex;
border-top: 1px solid #ccc;
}
#chat-input {
flex: 1;
padding: 12px;
border: none;
outline: none;
font-size: 14px;
}
#send-btn {
background: #0078ff;
color: white;
border: none;
padding: 0 18px;
cursor: pointer;
}
#enquiry-btn {
display: block;
text-align: center;
background: #28a745;
color: white;
padding: 12px;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div id="chat-toggle">💬</div>
<div id="chat-box">
<div id="chat-header">AI Support Chat</div>
<div id="chat-messages">
<div class="message bot">
Hello! Please choose one option below.
</div>
</div>
<div id="quick-options">
<button class="option-btn" onclick="quickAsk('admission')">• Admission</button>
<button class="option-btn" onclick="quickAsk('fees')">• Fees</button>
<button class="option-btn" onclick="quickAsk('courses')">• Courses</button>
<button class="option-btn" onclick="quickAsk('contact')">• Contact</button>
<button class="option-btn" onclick="quickAsk('location')">• Location</button>
<button class="option-btn" onclick="quickAsk('timings')">• Timings</button>
</div>
<div id="chat-input-area">
<input type="text" id="chat-input" placeholder="Type your question...">
<button id="send-btn">Send</button>
</div>
<a href="#enquiry" id="enquiry-btn">Go to Enquiry Section</a>
</div>
<script>
const chatToggle = document.getElementById("chat-toggle");
const chatBox = document.getElementById("chat-box");
const sendBtn = document.getElementById("send-btn");
const chatInput = document.getElementById("chat-input");
const chatMessages = document.getElementById("chat-messages");
const quickOptions = document.getElementById("quick-options");
chatToggle.onclick = () => {
chatBox.style.display = chatBox.style.display === "flex" ? "none" : "flex";
};
const responses = {
"admission": "Admissions are currently open. Please visit the enquiry section for complete admission guidance and registration details.",
"fees": "Our fee structure depends on the selected course. Kindly visit the enquiry section for updated fee details.",
"courses": "We offer multiple diploma, degree, and professional courses. Visit our courses section for complete information.",
"contact": "You can contact our support team through official mail or use the enquiry section for direct assistance.",
"location": "Our institution location and directions are available in the contact section of the website.",
"timings": "Office timings are Monday to Saturday from 9:00 AM to 5:00 PM."
};
function addMessage(text, sender, isTyping = false) {
const msg = document.createElement("div");
msg.classList.add("message", sender);
if (isTyping) {
msg.innerHTML = '<span class="typing">Typing<span class="dots"></span></span>';
msg.id = "typing-indicator";
} else {
msg.textContent = text;
}
chatMessages.appendChild(msg);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function removeTyping() {
const typing = document.getElementById("typing-indicator");
if (typing) typing.remove();
}
function botReply(userText) {
addMessage("", "bot", true);
setTimeout(() => {
removeTyping();
const lowerText = userText.toLowerCase();
let found = false;
for (let key in responses) {
if (lowerText.includes(key)) {
addMessage(responses[key], "bot");
found = true;
break;
}
}
if (!found) {
addMessage(
"Please select one of the available support topics below.",
"bot"
);
quickOptions.style.display = "flex";
}
}, 4000);
}
function handleChat() {
const userText = chatInput.value.trim();
if (!userText) return;
addMessage(userText, "user");
chatInput.value = "";
quickOptions.style.display = "none";
botReply(userText);
}
function quickAsk(topic) {
addMessage(topic, "user");
quickOptions.style.display = "none";
botReply(topic);
}
sendBtn.onclick = handleChat;
chatInput.addEventListener("keypress", function(e) {
if (e.key === "Enter") {
handleChat();
}
});
</script>
</body>
</html>
```