You might have noticed those helpful chatbots on websites – they’re becoming a must-have! If you’re not familiar, a chatbot is like a virtual assistant on a computer that can understand what you ask and give you useful answers.
For beginner web developers, making a chatbot is a hands-on way to practice using HTML, CSS, and JavaScript – the essential tools for real-world projects. In this blog post, I’ll walk you through creating your own chatbot using these technologies.
In this chatbot, users can ask questions and get quick answers. It’s designed to look good and work smoothly on different devices. Just keep in mind that this chatbot uses the OpenAI API for generating responses, and the best part is it’s free!
Let’s set up a structure for our chatbot first, follow the structure below:
- Folder Creation:
- Begin by creating a new folder. Choose any name that suits your preference.
- File Setup:
- Inside the created folder, generate three essential files:
- Create an
index.htmlfile. Ensure the filename is “index” with the extension “.html”. - Create a
style.cssfile. Name it “style” with the “.css” extension. - Create a
script.jsfile. Name it “script” with the “.js” extension.
- Create an
- Inside the created folder, generate three essential files:
- HTML Structure:
- Open the
index.htmlfile and insert the following HTML code:- This code establishes the structure for your chatbot. It includes a chatbot header, an unordered list (ul) acting as the chatbox, and an input field for user messages. Initially, a greeting message appears as the first chat item (“li”). Additional chat details will be dynamically added using JavaScript.
- Open the
<!DOCTYPE html>
<!-- Coding By CodeMagnet -->
<html lang="en" dir="ltr">
<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">
<!-- Google Fonts Link For Icons -->
<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 there 👋<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>Now, in the next step add the following CSS codes to your style.css file to apply visual styling to your chatbot. Now, if you load the web page in your browser, you will only see the chatbot toggle button at the bottom right corner. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
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;
}
}Finally, its time for most crucial step add the following JavaScript code to your script.js file: This script code will make your chatbot functional, which means now you can ask your questions, show or hide the chatbot by clicking the bottom right toggle button, and more.
Watch Video Tutorial
const chatbotToggler = document.querySelector(".chatbot-toggler");
const closeBtn = document.querySelector(".close-btn");
const chatbox = document.querySelector(".chatbox");
const chatInput = document.querySelector(".chat-input textarea");
const sendChatBtn = document.querySelector(".chat-input span");
let userMessage = null; // Variable to store user's message
const API_KEY = "PASTE-YOUR-API-KEY"; // Paste your API key here
const inputInitHeight = chatInput.scrollHeight;
const createChatLi = (message, className) => {
// Create a chat <li> element with passed message and className
const chatLi = document.createElement("li");
chatLi.classList.add("chat", `${className}`);
let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-outlined">smart_toy</span><p></p>`;
chatLi.innerHTML = chatContent;
chatLi.querySelector("p").textContent = message;
return chatLi; // return chat <li> element
}
const generateResponse = (chatElement) => {
const API_URL = "https://api.openai.com/v1/chat/completions";
const messageElement = chatElement.querySelector("p");
// Define the properties and message for the API request
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{role: "user", content: userMessage}],
})
}
// Send POST request to API, get response and set the reponse as paragraph text
fetch(API_URL, requestOptions).then(res => res.json()).then(data => {
messageElement.textContent = data.choices[0].message.content.trim();
}).catch(() => {
messageElement.classList.add("error");
messageElement.textContent = "Oops! Something went wrong. Please try again.";
}).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
}
const handleChat = () => {
userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace
if(!userMessage) return;
// Clear the input textarea and set its height to default
chatInput.value = "";
chatInput.style.height = `${inputInitHeight}px`;
// Append the user's message to the chatbox
chatbox.appendChild(createChatLi(userMessage, "outgoing"));
chatbox.scrollTo(0, chatbox.scrollHeight);
setTimeout(() => {
// Display "Thinking..." message while waiting for the response
const incomingChatLi = createChatLi("Thinking...", "incoming");
chatbox.appendChild(incomingChatLi);
chatbox.scrollTo(0, chatbox.scrollHeight);
generateResponse(incomingChatLi);
}, 600);
}
chatInput.addEventListener("input", () => {
// Adjust the height of the input textarea based on its content
chatInput.style.height = `${inputInitHeight}px`;
chatInput.style.height = `${chatInput.scrollHeight}px`;
});
chatInput.addEventListener("keydown", (e) => {
// If Enter key is pressed without Shift key and the window
// width is greater than 800px, handle the chat
if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
e.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 note that your chatbot is currently unable to retrieve responses to your questions because you have not provided your API key in the AP_KEY variable. To get a free API key from OpenAI, sign up for an account at https://platform.openai.com/account/api-keys.
”Remember that when you sign up for OpenAI, you’ll get a free $5 credit for your API usage. If your account is older than 3 months or the credit runs out, you’ll need a paid account or create a new one with a new number to keep using the API. Your API usage and expiration date can be found on the account’s usage page.
The above code provided follows a simple flow. First, it displays the user’s message in the chatbox and uses the OpenAI API to generate an appropriate response to the message. While waiting for the API response, a “Thinking…” message is shown. Once the response is received, it replaces the “Thinking…” message in the chatbox.
Developing a functional chatbot enables you to put your skills into practice in a real-world scenario. I trust that by following the instructions outlined in this post, you’ve effectively crafted your personalized chatbot using HTML, CSS, and JavaScript.
Lets Break Down Javascript code given above and understand it:
const chatbotToggler = document.querySelector(".chatbot-toggler");: Selects the HTML element with the class “chatbot-toggler” and stores it in the variablechatbotToggler. This is likely a button or icon that toggles the chatbot.const closeBtn = document.querySelector(".close-btn");: Selects the HTML element with the class “close-btn” and stores it in the variablecloseBtn. This is likely a button to close the chatbot.const chatbox = document.querySelector(".chatbox");: Selects the HTML element with the class “chatbox” and stores it in the variablechatbox. This is the container where the chat messages will be displayed.const chatInput = document.querySelector(".chat-input textarea");: Selects the HTML textarea inside an element with the class “chat-input” and stores it in the variablechatInput. This is where the user enters their messages.const sendChatBtn = document.querySelector(".chat-input span");: Selects the HTML span inside an element with the class “chat-input” and stores it in the variablesendChatBtn. This is likely a button or icon to send the user’s message.let userMessage = null;: Initializes a variableuserMessageto store the user’s message. It’s initially set tonull.const API_KEY = "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";: Sets a constant variableAPI_KEYwith the OpenAI API key. This key is essential for making requests to the OpenAI service.const inputInitHeight = chatInput.scrollHeight;: Sets a constant variableinputInitHeightto the initial height of the chat input textarea.const createChatLi = (message, className) => { ... }: Defines a functioncreateChatLithat creates a chat message element (<li>) based on the passed message and class name.const generateResponse = (chatElement) => { ... }: Defines a functiongenerateResponsethat sends a request to the OpenAI API and updates the chat message with the AI’s response.const handleChat = () => { ... }: Defines a functionhandleChatthat processes the user’s input, adds it to the chat, and triggers the AI response.- Event listeners are set up for various user interactions, like input changes, key presses, and button clicks. These listeners call the respective functions to handle the chat interaction.
Leave a Reply