Creating a Chatbot with HTML Code
Chatbots have become an essential part of modern-day communication, making it easy to interact with customers, provide support, and automate tasks. In this article, we will create a simple chatbot using HTML code and JavaScript.
Prerequisites
To create a chatbot with HTML code, you need to have basic knowledge of HTML and JavaScript. You should also have a text editor or an integrated development environment (IDE) installed on your computer.
Step 1: Setting up the HTML Code
The first step is to create an HTML file and set up the basic structure. Here's a simple code to get started:
```
<!DOCTYPE html>
<html>
<head>
<title>Chatbot</title>
</head>
<body>
<div id="chatbot-container">
<div id="chatbot-output"></div>
<input type="text" id="chatbot-input" placeholder="Type your message here...">
</div>
<script src="app.js"></script>
</body>
</html>
```
In this code, we have created a basic structure of an HTML page. We have also created a container for the chatbot, which consists of an output area and an input area for the user to type their messages. We have also linked a JavaScript file called app.js to the HTML file.
Step 2: Writing the JavaScript Code
Now, let's create the app.js file and write the code for our chatbot. Here's the code:
```
const output = document.getElementById("chatbot-output");
const input = document.getElementById("chatbot-input");
const chatbot = [
{
question: "Hello, how can I help you today?",
answer: "I need help with my order.",
},
{
question: "What is your order number?",
answer: "My order number is 12345.",
},
{
question: "What seems to be the problem with your order?",
answer: "I received the wrong item.",
},
{
question: "We apologize for the inconvenience caused. We will process a refund for you.",
answer: "Thank you for your assistance.",
},
];
let currentQuestion = 0;
function askQuestion() {
output.innerHTML += "<div class='question'>" + chatbot[currentQuestion].question + "</div>";
}
function respond() {
output.innerHTML += "<div class='answer'>" + chatbot[currentQuestion].answer + "</div>";
currentQuestion++;
}
input.addEventListener("keydown", function (event) {
if (event.keyCode === 13) {
output.innerHTML += "<div class='user-message'>" + input.value + "</div>";
askQuestion();
respond();
input.value = "";
}
});
```
In this code, we have created an array called chatbot, which contains a list of questions and answers. We have also created functions called askQuestion() and respond() to display the questions and answers on the output area.
The input area is also listening for a keydown event, and when the user presses the enter key, the user's message is displayed on the output area, and the chatbot's response is displayed based on the current question.
Step 3: Styling the Chatbot
Finally, let's add some CSS to style our chatbot. Here's the code:
```
#chatbot-container {
width: 300px;
height: 400px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
margin: 0 auto;
margin-top: 50px;
}
#chatbot-output {
height: 80%;
padding: 10px;
overflow-y: scroll;
}
#chatbot-input {
width: 100%;
height: 20%;
padding: 10px;
border: none;
outline: none;
}
.user-message {
text-align: right;
margin-top: 10px;
margin-right: 10px;
}
.question {
text-align: left;
margin-top: 10px;
margin-left: 10px;
font-weight: bold;
}
.answer {
text-align: left;
margin-top: 10px;
margin-left: 10px;
}
```
In this code, we have added some basic styling to our chatbot container, output area, and input area. We have also styled the user's message, chatbot's question, and chatbot's answer.
Conclusion
In this article, we have learned how to create a simple chatbot using HTML code and JavaScript. You can customize this chatbot by adding more questions and answers, changing the styling, and adding more functionality. With this chatbot, you can provide support, automate tasks, and make communication more efficient.
Posts
0 Comments