Chatbots are a useful tool for businesses and organizations, allowing them to communicate with customers and users in a quick and efficient manner. In this tutorial, we will be building a basic chatbot design using HTML, CSS, and JavaScript.
Play with demo => https://akashthoriya.github.io/chatbot/
GitHub => https://github.com/AkashThoriya/chatbot
First, let’s take a look at the HTML code. We start by declaring the document type and setting the language to English. Next, we have the head element, which includes some metadata about the page. We also include a link to the CSS file, which we will examine later.
In the body of the HTML, we have a div with a class of “chatbot-container”. This div will hold the chatbot interface. Inside it, we have a div for the header, which will contain the chatbot’s name. We also have a div for the chatbot itself, which will include the conversation and the input form.
The conversation is represented by another div, with an id of “conversation”. This div contains a div for each message, with a class of “chatbot-message”. Each message has a p element with a class of “chatbot-text”, which holds the actual message.
The input form has an id of “input-form”, and it contains a message container, an input field for the user’s message, and a submit button. The submit button has a class of “submit-button” and an img element for the send icon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chatbot-container">
<div id="header">
<h1>Chatbot</h1>
</div>
<div id="chatbot">
<div id="conversation">
<div class="chatbot-message">
<p class="chatbot-text">Hi! 👋 it''s great to see you!</p>
</div>
</div>
<form id="input-form">
<message-container>
<input id="input-field" type="text" placeholder="Type your message here">
<button id="submit-button" type="submit">
<img class="send-icon" src="send-message.png" alt="">
</button>
</message-container>
</form>
</div>
</div>
<script src="chatbot.js"></script>
</body>
</html>
Now, let’s move on to the CSS code.
The CSS code in this tutorial is responsible for styling the chatbot and its various elements. It sets the body element to display flex and justify-content to center, which centers the chatbot on the page. The chatbot-container has a width of 500 pixels and is given a background color, border, border radius, and box shadow.
The chatbot itself is given similar styling, with a background color, border, border radius, and box shadow. The header has a dark grey background color and white text, and the message container has a white background and is set up to display flex and align items to the center.
The conversation is given a height of 500 pixels and is set up to have a scrollable area. The messages have some basic styling for the font size, line height, border radius, and word wrap. The user’s messages are aligned to the right, while the chatbot’s messages are aligned to the left.
The input form has a border at the top and is set up to display flex and align items to the center. The input field has a height of 60 pixels and is given a border, and the submit button has a background color and border radius.
body {
display: flex;
justify-content: center;
}
.chatbot-container {
width: 500px;
margin: 0 auto;
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#chatbot {
background-color: #f5f5f5;
border: 1px solid #eef1f5;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
#header {
background-color: darkslategrey;
color: #ffffff;
padding: 20px;
font-size: 1em;
font-weight: bold;
}
message-container {
background: #ffffff;
width: 100%;
display: flex;
align-items: center;
}
#conversation {
height: 500px;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
}
@keyframes message-fade-in {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chatbot-message {
display: flex;
align-items: flex-start;
position: relative;
font-size: 16px;
line-height: 20px;
border-radius: 20px;
word-wrap: break-word;
white-space: pre-wrap;
max-width: 100%;
padding: 0 15px;
}
.user-message {
justify-content: flex-end;
}
.chatbot-text {
background-color: white;
color: #333333;
font-size: 1.1em;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#input-form {
display: flex;
align-items: center;
border-top: 1px solid #eef1f5;
}
#input-field {
flex: 1;
height: 60px;
border: 1px solid #eef1f5;
border-radius: 4px;
padding: 0 10px;
font-size: 14px;
transition: border-color 0.3s;
background: #ffffff;
color: #333333;
border: none;
}
.send-icon {
margin-right: 10px;
cursor: pointer;
}
#input-field:focus {
border-color: #333333;
outline: none;
}
#submit-button {
background-color: transparent;
border: none;
}
p[sentTime]:hover::after {
content: attr(sentTime);
position: absolute;
top: -3px;
font-size: 14px;
color: gray;
}
.chatbot p[sentTime]:hover::after {
left: 15px;
}
.user-message p[sentTime]:hover::after {
right: 15px;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
The JavaScript code in this tutorial handles the chatbot’s functionality. It is responsible for sending the user’s message to the chatbot and displaying the response. It may also include logic for handling different types of messages and determining the appropriate response.
// Get chatbot elements
const chatbot = document.getElementById(''chatbot'');
const conversation = document.getElementById(''conversation'');
const inputForm = document.getElementById(''input-form'');
const inputField = document.getElementById(''input-field'');
// Add event listener to input form
inputForm.addEventListener(''submit'', function(event) {
// Prevent form submission
event.preventDefault();
// Get user input
const input = inputField.value;
// Clear input field
inputField.value = '';
const currentTime = new Date().toLocaleTimeString([], { hour: ''2-digit'', minute: "2-digit" });
// Add user input to conversation
let message = document.createElement(''div'');
message.classList.add(''chatbot-message'', ''user-message'');
message.innerHTML = `<p class="chatbot-text" sentTime="${currentTime}">${input}</p>`;
conversation.appendChild(message);
// Generate chatbot response
const response = generateResponse(input);
// Add chatbot response to conversation
message = document.createElement(''div'');
message.classList.add(''chatbot-message'',''chatbot'');
message.innerHTML = `<p class="chatbot-text" sentTime="${currentTime}">${response}</p>`;
conversation.appendChild(message);
message.scrollIntoView({behavior: "smooth"});
});
// Generate chatbot response function
function generateResponse(input) {
// Add chatbot logic here
const responses = [
"Hello, how can I help you today? 😊",
"I''m sorry, I didn''t understand your question. Could you please rephrase it? 😕",
"I''m here to assist you with any questions or concerns you may have. 📩",
"I''m sorry, I''m not able to browse the internet or access external information. Is there anything else I can help with? 💻",
"What would you like to know? 🤔",
"I''m sorry, I''m not programmed to handle offensive or inappropriate language. Please refrain from using such language in our conversation. 🚫",
"I''m here to assist you with any questions or problems you may have. How can I help you today? 🚀",
"Is there anything specific you''d like to talk about? 💬",
"I''m happy to help with any questions or concerns you may have. Just let me know how I can assist you. 😊",
"I''m here to assist you with any questions or problems you may have. What can I help you with today? 🤗",
"Is there anything specific you''d like to ask or talk about? I''m here to help with any questions or concerns you may have. 💬",
"I''m here to assist you with any questions or problems you may have. How can I help you today? 💡",
];
// Return a random response
return responses[Math.floor(Math.random() * responses.length)];
}
That''s it for this topic. Thank you for reading!