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

Choice : Vast Meaning { Opinion }

By
  We all know that choice is an option between two or more things. A choice may create conflict and misunderstanding between people if the choices are wrong. Its deep meaning is not just an option. It is more than that. What if you unintentionally broke your friends' water bottles and the teachers asked who did it? Now you have two options, whether to tell the truth or to say nothing. This is also a choice between right or wrong. In such a situation, if you tell the truth, then Of course, You must pay the price of a water bottle to your friends. If you remain quiet, then no one will know that you have broken water bottle and no one will ask for money from you But In our Life Sometimes bad choices will also make us happy, but they may also cause great harm in the future. But in that case, some choices may be saying sorry too.  I believe that the most difficult thing to say is to say "sorry," and I also believe that. Sometimes I feel it needs a big heart to say it's OK ...
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