Skip to main content

Creating a Chatbot with HTML Code

Image
By
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.
Chatbot
Hi there! How can I assist you today?
Labels:

Comments

Post a Comment

Popular posts from this blog

Sunita Williams Smiles as She Returns Home After 286 Days in Space

By
  Sunita Williams Smiles As She Returns Home After 286 Days. Sunita Williams, a renowned NASA astronaut, has made headlines once again with her remarkable journey in space. After spending an extended period of 286 days orbiting Earth, Williams has finally returned home, marking the end of a mission initially planned for just 10 days. This extraordinary feat showcases her resilience and highlights the complexities and challenges of space exploration. The Mission Williams, along with fellow astronaut Butch Wilmore, embarked on the first crewed mission of Boeing's Starliner spacecraft in June 2024. The mission was intended to be a brief test flight to demonstrate Starliner's capability to carry astronauts to and from the International Space Station (ISS). However, due to unforeseen technical issues, the duo found themselves extending their stay on the ISS for nearly nine months 6 7 . The Challenges The Starliner mission faced several setbacks, including malfunctioning thrusters th...
Post a Comment
Read more

Summary of A Matter of Husbands by Ferenc Molnar class 12 English

By
 Who is 'A Matter of Husbands' writer, Ferenc Molnar? Widely regarded as Hungary’s most celebrated and controversial playwright, Ferenc Molnár’s (1878–1952) primary aim was to entertain people by transforming his personal experiences into literary works of art. Out of his many plays, The Devil (1907), Lilion (1909), The Guardsman (1910), The Swan (1920), and The Play’s the Thing (1926) endure as classics. He immigrated to the United States to escape persecution of Hungarian Jews during World War II and later adopted American citizenship. Molnár’s plays continue to be relevant and are performed all over the world. Main Summary Published in 1923, A Matter of Husband sheds light on the basic function of actors: to make the audience believe in illusion  Word Meanings of this essay poised (adj.): in a state of balance gilt (adj.): gold, or something resembling gold, applied to a surface in a thin layer palpably (adv.): noticeably or clearly  boudoir (n.): a woman’s bedroom or ...
Post a Comment
Read more

On Libraries Exercise : Questions Answers class 12 English

By
 Understanding the text  Answer the following questions.  a. Where could the author be found when he was late for lunch or dinner? = The author was the voracious reader and fond of reading books. His only time pass was to study books. He used to go to library in his spare time. That's why he could be found in the library if he was ever late for the dinner. b. What are his first memories? = When author was a child, he was introduced to books and library since his parents were fond of books, specially his mother. So, we can say that books and libraries are the first memories of the author. c. Why did he dislike school? = Theoretical and obligatory teachings methods of the school were not liked by the author. Studying becomes easier and matter of interest when student studies with his/her own genuine interest, not by any obligation or instruction. Since, the school was not as he thought, he disliked it. d. What did he feel about at the library? = Library was silent, providin...
Post a Comment
Read more