<div class="chat-container">
<div class="chat-box" id="chat-box">
<div class="bot-message">
Welcome to Yash Dada's Bot😇<br>How can I help you today?<br><br>
Please select an option from below:
<div class="options">
<div class="option" onclick="handleOption(1)">1. MHTCET Result Date</div>
<div class="option" onclick="handleOption(2)">2. Coding Course Enquiry</div>
<div class="option" onclick="handleOption(3)">3. Personal Counselling Admission</div>
<div class="option" onclick="handleOption(4)">4. Documents Required for Engineering</div>
<div class="option" onclick="handleOption(5)">5. Engineering Fees Required</div>
</div>
</div>
</div>
<div class="chat-input-container">
<input type="text" id="chat-input" class="chat-input" placeholder="Type your option">
<button class="send-button" id="send-button" onclick="handleSend()">Send</button>
</div>
</div>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background: #f0f0f0;
}
.chat-container {
width: 100%;
max-width: 600px;
height: 100%;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-box {
flex-grow: 1;
padding: 20px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.chat-input-container {
padding: 10px;
background: #eee;
display: flex;
}
.chat-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.send-button {
padding: 10px 20px;
border: none;
background: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
}
.send-button:disabled {
background: #ccc;
}
.user-message, .bot-message, .loader {
margin: 10px 0;
padding: 10px;
border-radius: 10px;
animation: fadeIn 0.5s;
}
.user-message {
align-self: flex-end;
background: #daf8da;
}
.bot-message {
align-self: flex-start;
background: #e1f5fe;
}
.options {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.option {
background: #007bff;
color: white;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin: 5px 0;
animation: fadeIn 0.5s;
}
.option:hover {
background: #0056b3;
}
.loader {
display: flex;
justify-content: center;
align-items: center;
background: #e1f5fe;
}
.loader::after {
content: "";
width: 10px;
height: 10px;
margin: 5px;
border-radius: 50%;
background: #007bff;
animation: loader 0.6s infinite alternate;
}
@keyframes loader {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0.5;
}
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<script>
let currentStage = 'main';
let subStage = '';
document.getElementById('chat-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
handleSend();
}
});
function handleSend() {
const userInput = document.getElementById('chat-input').value.trim();
if (userInput) {
addMessage('user', userInput);
processInput(userInput);
document.getElementById('chat-input').value = '';
}
}
function handleOption(option) {
addMessage('user', option);
processInput(option);
}
function addMessage(sender, message) {
const chatBox = document.getElementById('chat-box');
const messageDiv = document.createElement('div');
messageDiv.className = sender === 'user' ? 'user-message' : 'bot-message';
messageDiv.innerHTML = message;
chatBox.appendChild(messageDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}
function showLoader() {
const chatBox = document.getElementById('chat-box');
const loaderDiv = document.createElement('div');
loaderDiv.className = 'loader';
loaderDiv.id = 'loader';
chatBox.appendChild(loaderDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}
function hideLoader() {
const loader = document.getElementById('loader');
if (loader) {
loader.parentNode.removeChild(loader);
}
}
function processInput(input) {
showLoader();
setTimeout(() => {
hideLoader();
let botResponse = '';
const mainOptions = `
<div class="options">
<div class="option" onclick="handleOption(1)">1. MHTCET Result Date</div>
<div class="option" onclick="handleOption(2)">2. Coding Course Enquiry</div>
<div class="option" onclick="handleOption(3)">3. Personal Counselling Admission</div>
<div class="option" onclick="handleOption(4)">4. Documents Required for Engineering</div>
<div class="option" onclick="handleOption(5)">5. Engineering Fees Required</div>
</div>`;
if (currentStage === 'main') {
switch (input) {
case '1':
case 1:
botResponse = 'According to the latest circular, the MHT-CET results will be displayed on June 10, 2024, on the official CET Cell website.';
break;
case '2':
case 2:
botResponse = 'Coding Course Enquiry: Our next coding course starts on July 1st. For more details, visit our courses page.';
break;
case '3':
case 3:
botResponse = `The admissions for Personal Counselling will open soon on June 10th (as soon as CET results are displayed). Are you interested in Personal Counselling Admissions?<br>
<div class="options">
<div class="option" onclick="handleOption('A')">A. Yes</div>
<div class="option" onclick="handleOption('B')">B. Go Back</div>
</div>`;
currentStage = 'personalCounselling';
break;
case '4':
case 4:
botResponse = 'Documents Required for Engineering: Please select your category:<br>\
<div class="options">\
<div class="option" onclick="handleOption(\'A\')">A. OPEN</div>\
<div class="option" onclick="handleOption(\'B\')">B. SC/ST</div>\
<div class="option" onclick="handleOption(\'C\')">C. VJ/NT</div>\
<div class="option" onclick="handleOption(\'D\')">D. OBC</div>\
<div class="option" onclick="handleOption(\'E\')">E. EWS</div>\
</div>';
currentStage = 'documents';
break;
case '5':
case 5:
botResponse = 'Engineering Fees Required: The fees for the engineering program are detailed on our website. Please visit the fees section for more information.';
break;
default:
botResponse = 'Sorry, I did not understand that. Please select a valid option.' + mainOptions;
}
} else if (currentStage === 'personalCounselling') {
if (input === 'A') {
botResponse = `We have created a priority group for interested students. Many students are eagerly waiting for Personal Counselling.
As you know, a few days back, we started pre-registration for Personal Counselling, and all the seats were filled within a few hours!
Our Personal Counselling Admission will open soon! We are adding you to the Priority Group for Admission. As per your request, we will surely give priority to you when admission opens.
Join using the link below:
<a href="https://chat.whatsapp.com/CmPHgUO7JRe3RTAcjrzgNv" target="_blank">Join WhatsApp Group</a>`;
currentStage = 'main';
} else if (input === 'B') {
botResponse = 'Returning to the main menu.' + mainOptions;
currentStage = 'main';
} else {
botResponse = 'Sorry, I did not understand that. Please select a valid option.';
}
} else if (currentStage === 'documents') {
switch (input) {
case 'A':
botResponse = `Documents required for Open category:
1. Receipt-cum-Acknowledgement of Seat Acceptance
2. Allotment Letter Printout from CET Cell Website
3. Receipt-cum-Acknowledgement from Facilitation Centre
4. MHT-CET 2023 Score Card
5. JEE (Main) 2023 (Paper-I) Score Card
6. SSC (Std X) mark sheet
7. HSC (Std XII) mark sheet
8. School Leaving / Transfer Certificate (HSC)
9. Income Certificate
10. Nationality Certificate
11. Domicile Certificate
12. Aadhaar Card
13. Passport Size Photo
Please carry Xerox/Photocopy of all the above documents.`;
break;
case 'B':
botResponse = `Documents required for SC/ST category:
1. Receipt-cum-Acknowledgement of Seat Acceptance
2. Allotment Letter Printout from CET Cell Website
3. Receipt-cum-Acknowledgement from Facilitation Centre
4. MHT-CET 2023 Score Card
5. JEE (Main) 2023 (Paper-I) Score Card
6. SSC (Std X) mark sheet
7. HSC (Std XII) mark sheet
8. School Leaving / Transfer Certificate (HSC)
9. Caste Certificate
10. Income Certificate
11. Nationality Certificate
12. Domicile Certificate
13. Aadhaar Card
14. Passport Size Photo
Please carry Xerox/Photocopy of all the above documents.`;
break;
case 'C':
botResponse = `Documents required for VJ/NT category:
1. Receipt-cum-Acknowledgement of Seat Acceptance
2. Allotment Letter Printout from CET Cell Website
3. Receipt-cum-Acknowledgement from Facilitation Centre
4. MHT-CET 2023 Score Card
5. JEE (Main) 2023 (Paper-I) Score Card
6. SSC (Std X) mark sheet
7. HSC (Std XII) mark sheet
8. School Leaving / Transfer Certificate (HSC)
9. Caste Certificate
10. Income Certificate
11. Nationality Certificate
12. Domicile Certificate
13. Aadhaar Card
14. Passport Size Photo
Please carry Xerox/Photocopy of all the above documents.`;
break;
case 'D':
botResponse = `Documents required for OBC category:
1. Receipt-cum-Acknowledgement of Seat Acceptance
2. Allotment Letter Printout from CET Cell Website
3. Receipt-cum-Acknowledgement from Facilitation Centre
4. MHT-CET 2023 Score Card
5. JEE (Main) 2023 (Paper-I) Score Card
6. SSC (Std X) mark sheet
7. HSC (Std XII) mark sheet
8. School Leaving / Transfer Certificate (HSC)
9. Caste Certificate
10. Non-Creamy Layer Certificate
11. Income Certificate
12. Nationality Certificate
13. Domicile Certificate
14. Aadhaar Card
15. Passport Size Photo
Please carry Xerox/Photocopy of all the above documents.`;
break;
case 'E':
botResponse = `Documents required for EWS category:
1. Receipt-cum-Acknowledgement of Seat Acceptance
2. Allotment Letter Printout from CET Cell Website
3. Receipt-cum-Acknowledgement from Facilitation Centre
4. MHT-CET 2023 Score Card
5. JEE (Main) 2023 (Paper-I) Score Card
6. SSC (Std X) mark sheet
7. HSC (Std XII) mark sheet
8. School Leaving / Transfer Certificate (HSC)
9. EWS Certificate
10. Income Certificate
11. Nationality Certificate
12. Domicile Certificate
13. Aadhaar Card
14. Passport Size Photo
Please carry Xerox/Photocopy of all the above documents.`;
break;
default:
botResponse = 'Sorry, I did not understand that. Please select a valid option.';
}
currentStage = 'main';
}
addMessage('bot', botResponse);
}, 1000);
}
</script>
Leave a Reply