Create a Chatbot by using HTML, CSS and JavaScript
Hi to all, in this article I am going to tell you all about how to create a beautiful designed working chatbot for your website easily by using HTML, CSS and JavaScript.
First of all you have to know what is chatbot? Basically chatbot is a program which activates and process human conversations through text or voice.
Now a days Users in both Business to consumers and Business to Business are using these chatbot virtual assistants to make support for their users visiting their website for seeking support or help.
Basically from the chatbot users can ask any question and will receive instant responses.
This chatbot is mobile friendly and has a seamless experience across various devices and to generate the responses to the user question, this chatbot uses API i.e. OpenAI.
Steps to Create Chatbot
First of all, you need to know what ere the needed items to build this responsive chatbot in your local machine:
- VS Code
- Live server
Step-1: First of all, you need to open vs code on you machine.
Step-2: Now you have to create a Folder and you can give any name to it.
Step-3: Here, inside the folder, you have to create three files and name those as index.html, style.css and script.js, and here also you can give any name but, extensions of the file should be same like html, css & js.
Step-4: Adding HTML Code
First of all, you have to open index.html file.
Now you need to copy below provided html code.
Paste the copied html code inside the .html file.
Save the index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chatbot in JavaScript</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
<script src="script.js" defer></script>
</head>
<body>
<button class="chatbot-toggler">
<span class="material-symbols-rounded">mode_comment</span>
<span class="material-symbols-outlined">close</span>
</button>
<div class="chatbot">
<header>
<h2>Chatbot</h2>
<span class="close-btn material-symbols-outlined">close</span>
</header>
<ul class="chatbox">
<li class="chat incoming">
<span class="material-symbols-outlined">smart_toy</span>
<p>Hi<br>How can I help you today?</p>
</li>
</ul>
<div class="chat-input">
<textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
<span id="send-btn" class="material-symbols-rounded">send</span>
</div>
</div>
</body>
</html>
Step-5: Adding CSS Code
Here you need to open style.css file.
And need to copy below provided css code.
Paste the copied css code inside the .css file.
Save the style.css file.
* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;}body {background: #E3F2FD;}.chatbot-toggler {position: fixed;bottom: 30px;right: 35px;outline: none;border: none;height: 50px;width: 50px;display: flex;cursor: pointer;align-items: center;justify-content: center;border-radius: 50%;background: #724ae8;transition: all 0.2s ease;}body.show-chatbot .chatbot-toggler {transform: rotate(90deg);}.chatbot-toggler span {color: #fff;position: absolute;}.chatbot-toggler span:last-child, body.show-chatbot .chatbot-toggler span:first-child {opacity: 0;}body.show-chatbot .chatbot-toggler span:last-child {opacity: 1;}.chatbot {position: fixed;right: 35px;bottom: 90px;width: 420px;background: #fff;border-radius: 15px;overflow: hidden;opacity: 0;pointer-events: none;transform: scale(0.5);transform-origin: bottom right;box-shadow: 0 0 128px 0 rgba(0,0,0,0.1), 0 32px 64px -48px rgba(0,0,0,0.5);transition: all 0.1s ease;}body.show-chatbot .chatbot {opacity: 1;pointer-events: auto;transform: scale(1);}.chatbot header {padding: 16px 0;position: relative;text-align: center;color: #fff;background: #724ae8;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}.chatbot header span {position: absolute;right: 15px;top: 50%;display: none;cursor: pointer;transform: translateY(-50%);}header h2 {font-size: 1.4rem;}.chatbot .chatbox {overflow-y: auto;height: 510px;padding: 30px 20px 100px;}.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {width: 6px;}.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {background: #fff;border-radius: 25px;}.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {background: #ccc;border-radius: 25px;}.chatbox .chat {display: flex;list-style: none;}.chatbox .outgoing {margin: 20px 0;justify-content: flex-end;}.chatbox .incoming span {width: 32px;height: 32px;color: #fff;cursor: default;text-align: center;line-height: 32px;align-self: flex-end;background: #724ae8;border-radius: 4px;margin: 0 10px 7px 0;}.chatbox .chat p {white-space: pre-wrap;padding: 12px 16px;border-radius: 10px 10px 0 10px;max-width: 75%;color: #fff;font-size: 0.95rem;background: #724ae8;}.chatbox .incoming p {border-radius: 10px 10px 10px 0;}.chatbox .chat p.error {color: #721c24;background: #f8d7da;}.chatbox .incoming p {color: #000;background: #f2f2f2;}.chatbot .chat-input {display: flex;gap: 5px;position: absolute;bottom: 0;width: 100%;background: #fff;padding: 3px 20px;border-top: 1px solid #ddd;}.chat-input textarea {height: 55px;width: 100%;border: none;outline: none;resize: none;max-height: 180px;padding: 15px 15px 15px 0;font-size: 0.95rem;}.chat-input span {align-self: flex-end;color: #724ae8;cursor: pointer;height: 55px;display: flex;align-items: center;visibility: hidden;font-size: 1.35rem;}.chat-input textarea:valid ~ span {visibility: visible;}@media (max-width: 490px) {.chatbot-toggler {right: 20px;bottom: 20px;}.chatbot {right: 0;bottom: 0;height: 100%;border-radius: 0;width: 100%;}.chatbot .chatbox {height: 90%;padding: 25px 15px 100px;}.chatbot .chat-input {padding: 5px 15px;}.chatbot header span {display: block;}}
Step-6: Adding JavaScript Code
Now you need to open the last file i.e. script.js
Need to copy below provided JavaScript code.
Paste the copied js code inside the .js file.
Save the script.js file.
const chatbotToggler=document.querySelector(".chatbot-toggler"),closeBtn=document.querySelector(".close-btn"),chatbox=document.querySelector(".chatbox"),chatInput=document.querySelector(".chat-input textarea"),sendChatBtn=document.querySelector(".chat-input span");let userMessage=null;const API_KEY="PASTE-YOUR-API-KEY",inputInitHeight=chatInput.scrollHeight,createChatLi=(t,e)=>{let n=document.createElement("li");n.classList.add("chat",`${e}`);let a="outgoing"===e?"<p></p>":'<span class="material-symbols-outlined">smart_toy</span><p></p>';return n.innerHTML=a,n.querySelector("p").textContent=t,n},generateResponse=t=>{let e=t.querySelector("p"),n={method:"POST",headers:{"Content-Type":"application/json",Authorization:"Bearer PASTE-YOUR-API-KEY"},body:JSON.stringify({model:"gpt-3.5-turbo",messages:[{role:"user",content:userMessage}]})};fetch("https://api.openai.com/v1/chat/completions",n).then(t=>t.json()).then(t=>{e.textContent=t.choices[0].message.content.trim()}).catch(()=>{e.classList.add("error"),e.textContent="Oops! Something went wrong. Please try again."}).finally(()=>chatbox.scrollTo(0,chatbox.scrollHeight))},handleChat=()=>{(userMessage=chatInput.value.trim())&&(chatInput.value="",chatInput.style.height=`${inputInitHeight}px`,chatbox.appendChild(createChatLi(userMessage,"outgoing")),chatbox.scrollTo(0,chatbox.scrollHeight),setTimeout(()=>{let t=createChatLi("Typing...","incoming");chatbox.appendChild(t),chatbox.scrollTo(0,chatbox.scrollHeight),generateResponse(t)},600))};chatInput.addEventListener("input",()=>{chatInput.style.height=`${inputInitHeight}px`,chatInput.style.height=`${chatInput.scrollHeight}px`}),chatInput.addEventListener("keydown",t=>{"Enter"===t.key&&!t.shiftKey&&window.innerWidth>800&&(t.preventDefault(),handleChat())}),sendChatBtn.addEventListener("click",handleChat),closeBtn.addEventListener("click",()=>document.body.classList.remove("show-chatbot")),chatbotToggler.addEventListener("click",()=>document.body.classList.toggle("show-chatbot"));
Please be aware that since you haven't entered your API key in the AP_KEY variable, your chatbot is presently unable to retrieve the answers to your inquiries. Register for an account at https://platform.openai.com/account/api-keys to receive a free API key from OpenAI.
Basically the provided code has a straightforward flow, it first shows the user's message in the chat box before using the OpenAI API to build a suitable reply.
The "Typing...." message is displayed while awaiting the API answer and the "Typing...." statement in the chat box gets replaced as soon as the response is received.
Conclusion
I hope that you all have followed above provided steps and you've successfully used HTML, CSS, and JavaScript to construct your own chatbot. and if you encounter with any issues, please mail us.
Chatbot
close-
smart_toy
Hi
How can I help you today?
