Techiexpert.com
No Result
View All Result
  • Tech
  • Startup
  • Artificial Intelligence
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • Machine Learning
  • Blockchain
No Result
View All Result
  • Tech
  • Startup
  • Artificial Intelligence
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • Machine Learning
  • Blockchain
No Result
View All Result
Techiexpert.com
No Result
View All Result

How to make a chatbot using HTML

Srikanth by Srikanth
December 4, 2019
in Tech news
4
Chatbot using HTML
31
SHARES
419
VIEWS
Share on FacebookShare on Twitter

A chatbot is artificial intelligence (AI) software that can simulate a chat or a conversation with a user in natural language through websites, messaging applications, mobile apps, or through the telephone.

The importance of chatbot lies in the fact that it is often described as one of the most advanced, accurate, and pleasing expressions of interaction between humans and machines. However, from a technical point of view, a chatbot only represents the natural evolution of a Question-Answering system leveraging Natural Language Processing (NLP). Formulating responses to questions in a native language is one of the most typical examples of Natural Language Processing applied in various enterprises’ end-use applications.

Alternatively, there is always an option of building a chatbot yourself using a dedicated chatbot builders platform like SendPulse, Chatfuel, or Hubspot. 

Written below is the code to make a basic chatbot using HTML.

Happy chatting!

<html>

    <head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

        <title>My first bot</title>

    </head>

    <body  style="text-align:center;">         <textarea readonly="true" id="botChat" style="text-align:left; position:fixed; display:block; top:3vh; border:1px solid black; width:92.5vw; margin-left:1%; margin-right:2.25%; height:75vh; resize:none; font-family:Courier; overflow-y:auto; user-select:none; font-size:3vw;"></textarea>        <p style="position:absolute; border:1px solid black; top:78vh; left:12.25vw; width:75vw;">        <input type="text" placeholder="Ask a question" onKeypress="enterButton(event, document.getElementsByTagName('input')[0].value);" style="color:red; background-color:black; width:79%;">         <button onClick="answer(document.getElementsByTagName('input')[0].value)">Talk To Me</button></p>        <script>

var you = "Me";

botSays("Thanks for checking out my Simple chatBot.\nMy language knowledge is progressing. I recently learned 20 html tags. 6/11/17 \n\nType !name x where x = yourName to change your name.\nTo chat, click Talk to me or press Enter(pc) or Go(android)\nType help for a hint\n\n\n***")

            // Recognized Speech Patterns for Question Responses

var Hello = ["HI", "HEY", "HOWDY", "HEYA", "HOLA", "HELLO", "SUP", "KONNICHIWA", "ALOHA"]
var Goodbye = ["BYE", "SEE YA", "CYA", "LATER", "ADIOS", "SAYONARA", "SEEYA"]
var Greeting = ["WHAT'S UP", "HOW'S IT GOING", "HOW ARE YOU", "NICE DAY", "GOOD MORNING", "GOOD NIGHT"]

var Name = [ "WHAT IS YOUR NAME", "WHAT'S YOUR NAME", "WHO ARE YOU", "WHAT DO THEY CALL YOU", "COMO TE LLAMAS"]

var Actions = ["HELP", "DRINK", "CHALLENGE"]

var Questions = ["QUESTION", "QUIZ", "CODE", "ANSWER", "HTML", "CSS", "JAVASCRIPT"];

var HTMLTags1 = ["<P>", "<I>", "<SPAN>", "<DIV>", "<ARTICLE>", "<IFRAME>", "<A>", "<ABBR>","<ADDRESS>","<AUDIO>"];

        // Skip the CMD Line and learn HTML by reading my code!~~ LMAO, here have fun.

var HTMLTags2 = [

"<A>", //    Defines a hyperlink

"<ABBR>", //Defines an abbreviation or an acronym

"<ACRONYM>", //    Not supported in HTML5. Use <abbr> instead. Defines an acronym

"<ADDRESS>", //    Defines contact information for the author/owner of a document

"<APPLET>", //    Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet

"<AREA>", //    Defines an area inside an image-map

"<ARTICLE>", //    Defines an article

"<ASIDE>", //    Defines content aside from the page content

"<AUDIO>", //    Defines sound content

"<B>" // Defines bold text

]

var HTMLTags3 = [

"<BASE>", // Specifies the base URL/target for all relative URLs in a document

"<BASEFONT>", //    Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document

"<BDI>",    // Isolates a part of text that might be formatted in a different direction from other text outside it

"<BDO>",    //Overrides the current text direction

"<BIG>",    //Not supported in HTML5. Use CSS instead. Defines big text

"<BLOCKQUOTE>", //    Defines a section that is quoted from another source

"<BODY>",    //Defines the document's body

"<BR>",    //Defines a single line break

"<BUTTON>",    //Defines a clickable button

"<CANVAS>"    //Used to draw graphics, on the fly, via scripting (usually JavaScript)

]

var HTMLTags4 = [

"<CAPTION>",    //Defines a table caption

"<CENTER>", //    Not supported in HTML5. Use CSS instead. Defines centered text

"<CITE>", //Defines the title of a work

"<CODE>",    //Defines a piece of computer code

"<COL>",    //Specifies column properties for each column within a <colgroup> element 

"<COLGROUP>",    //Specifies a group of one or more columns in a table for formatting

"<DATALIST>",    //Specifies a list of pre-defined options for input controls

"<DD>",    //Defines a description/value of a term in a description list

"<DEL>",    //Defines text that has been deleted from a document

"<DETAILS>",    //Defines additional details that the user can view or hide

"<DFN>" //    Represents the defining instance of a term

]

var colors = ["BLUE", "RED", "GREEN", "YELLOW", "WHITE", "BLACK", "SILVER", "GRAY" ];

var Else = true;

var questions = [colors, HTMLTags4, HTMLTags3, HTMLTags2, HTMLTags1, Hello, Goodbye, Greeting, Name, Actions, Questions];



var reactions=[BotHello, BotGoodbye,BotGreeting];

var BotHello = ["HI", "HEY", "HOWDY", "HEYA", "HOLA", "HELLO", "SUP", "KONNICHIWA", "ALOHA"]

var BotGoodbye = ["BYE", "SEE YA", "CYA", "LATER", "ADIOS", "SAYONARA", "SEEYA"]

var BotGreeting = ["WHAT'S UP", "HOW'S IT GOING", "HOW ARE YOU", "NICE TO SEE YOU", "GOOD MORNING", "WELCOME"]

var BotPleasant = ["Thanks.", "Good job.", "Cool.", "I see.", "Anyway.", "right-o."]


function answer(x) {

    var botOut = botChat.value;

    document.getElementsByTagName("textarea")[0] = botChat

    //RESPONSES//


                document.getElementsByTagName("input")[0].value = ""

                if (x.charAt(0).includes("!") === false){

                youSay(x); botChat.scrollTop = botChat.scrollHeight;

                } 

                question = x.toUpperCase()

                for (i = 0; i < 10; i++) {

            /*          EMPTY RESPONSE          */                    

                if (question === "" || null) {

                    setTimeout( function() { botSays("\nBot : What? You shy?"); botChat.scrollTop = botChat.scrollHeight;}, 600);

                return; }

                /*          COMMAND MENU RESPONSES         */                    

                else if (question === "!MENU" ) {

                botSays("\n\n**Commands are !Name yourName, !Bgcolor backgroundColor, !Text textColor, !Menu, !Secrets, !Tutorial, !Botsay textSays, and !Me textDoes,. Play around."); botChat.scrollTop = botChat.scrollHeight;

                return;

                }else if (question.slice(0,9).includes("!BGCOLOR ") ) {

                    botSays("\n\n**Changed the background color to " + x.slice(9) ); botChat.scrollTop = botChat.scrollHeight; botChat.style.backgroundColor = x.slice(9);

                return;

                } else if (question.slice(0,6).includes("!TEXT ") ) {

                    botSays("\n\n**Changed the text color to " + x.slice(6) ); botChat.scrollTop = botChat.scrollHeight; botChat.style.color = x.slice(6);

                return;

                } else if (question.slice(0,6).includes("!NAME ") ) {

                    you = x.slice(6);

                    botSays("\n\n**Your name is " + you); botChat.scrollTop = botChat.scrollHeight;

                return;

                } else if (question.slice(0,9).includes("!SECRETS") ) {

                    botSays("\n\n**What? I don't have any secrets. I've got nothing to hide."); botChat.scrollTop = botChat.scrollHeight;

                return;

                }

                else if (question.slice(0,10).includes("!TUTORIAL") ) {

                    botSays("\n\n**What? I don't have a tutorial. Read my code, I'm not going to explain myself."); botChat.scrollTop = botChat.scrollHeight;

                return;

                }

                else if (question.slice(0,10).includes("!BOTSAY") ) {

                    botSays("\nBot : " + x.slice(8)); botChat.scrollTop = botChat.scrollHeight;

                return;

                } else if (question.slice(0,4).includes("!ME") ) {

                    youDo(x.slice(4)); botChat.scrollTop = botChat.scrollHeight;

                return;

                }

 /* Questions, Answers and Responses */

                if (question.includes(Goodbye[i])) {

                    Else = false;

                    setTimeout(botSays, 600, "\

                                 Bot : Godspeed. Leave an upvote?")

                } else if (question.includes(Name[i])) {

                    Else = false; setTimeout(botSays, 600, "\nBot : My name is BotOne. You can call me tonE.")

                } else if ( question.includes(HTMLTags1[i]) ) {

                    /*HTML Tag Definitions Courtesy of W3Schools.com*/

                    Else = false; if (HTMLTags1[i] === "<P>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<p>' Defines a paragraph.") } else if (HTMLTags1[i] === "<I>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<i>' Defines a part of text in an alternate voice or mood. Italics.") } else if (HTMLTags1[i] === "<SPAN>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<Span>' Defines a section in a document.") } else if (HTMLTags1[i] === "<A>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<Span>' Defines a section in a document.") }

                } else if ( question.includes(HTMLTags2[i]) ) {

                    /*HTML Tag Definitions Courtesy of W3Schools.com*/

                    Else = false; if (HTMLTags2[i] === "<ABBR>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<abbr>' Defines an abbreviation or acronym.") } else if (HTMLTags2[i] === "<ACRONYM>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<acronym>' Not supported in HTML5, use '<abbr>' instead.") } else if (HTMLTags2[i] === "<ADDRESS>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<address>' Defines contact information for the author/owner of a document.") } else if (HTMLTags2[i] === "<APPLET>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<applet>' Not supported in HTML5, use '<embed>' or '<object>' instead.") }else if (HTMLTags2[i] === "<AREA>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<area>' Defines an area inside an image map") } else if (HTMLTags2[i] === "<ARTICLE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<article>' Defines an article.") } else if (HTMLTags2[i] === "<ASIDE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<aside>' Defines content aside from the page content.") }  else if (HTMLTags2[i] === "<AUDIO>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<audio>' Defines sound content.") } else if (HTMLTags2[i] === "<B>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<B>' Defines bold text.") }

                } else if ( question.includes(HTMLTags3[i]) ) {

                    Else = false;

                    if (HTMLTags3[i] === "<BASE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<base>' Specifies the base URL/target for all relative URLs in a document") } else if (HTMLTags3[i] === "<BASEFONT>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<basefont>' Not supported in HTML5. Use CSS instead.  Specifies a default color, size, and font for all text in a document. ") } else if (HTMLTags3[i] === "<BDI>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<bdi>' Isolates a part of text that might be formatted in a different direction from other text outside it. ") } else if (HTMLTags3[i] === "<BDO>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<bdo>' Overrides the current text direction. ") } else if (HTMLTags3[i] === "<BIG>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<big>' Not supported in HTML5, use CSS instead. Defines big text. ") } else if (HTMLTags3[i] === "<BLOCKQUOTE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<blockquote>' Defines a section that is quoted from another source. ") } else if (HTMLTags3[i] === "<BODY>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<body>' Defines a document's body. ") } else if (HTMLTags3[i] === "<BR>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<br>' Defines a single line break. ") } else if (HTMLTags3[i] === "<BUTTON>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<button>' Defines a clickable button. ") } else if (HTMLTags3[i] === "<CANVAS>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<canvas>' Used to draw graphics, on the fly, via scripting. Usually Javascript. ") }         

                /*} else if ( question.includes(HTMLTags4[i]) ) {

                } else if ( question.includes(HTMLTags5[i]) ) {

                } else if ( question.includes(HTMLTags6[i]) ) {    */

                /*} else if ( question.includes(HTMLTags7[i]) ) {

                } else if ( question.includes(HTMLTags8[i]) ) {

                } else if ( question.includes(HTMLTags9[i]) ) {    */

                }else if (question.includes(Actions[i])) {

                    Else = false; if (question.includes("CHALLENGE")) { setTimeout(botSays, 600, "\nBot : Challenge my creator. Go for it.") } else { setTimeout(botSays, 600, "\nBot : How can I help?  Use my commands !Menu & !Tutorial to see what I can do.") }

                } else if (question.includes(Questions[i])) {

                    Else = false; if (Questions[i].includes("HTML")) { setTimeout(botSays, 600, "\nBot : Ask my creator. Go for it. Post your question in the comments, he'll try to help you. I'm just a code, I don't know HOW to code.") } else { setTimeout(botSays, 600, "\nBot : How can I help? Use my commands !Menu & !Tutorial to see what I can do.") }

                } else if ( question.includes(Greeting[i]) ) {

                    Else = false; if (Greeting[i].includes("HOW")&&Greeting[i].includes("YOU")) {

                    var reactHello = "How am I";

                    var reactGreeting = "I would say I am 40% complete." }

                    else {

                   num = Math.ceil(Math.random()*3)

                    var reactHello = Greeting[num]

                    reactHello = reactHello.toLowerCase();

                    reactHello = reactHello.charAt(0).toUpperCase() + reactHello.slice(1);

                    var reactGreeting = "Same old. Getting coded mostly.";

                    }

                    var reactPleasant = BotPleasant[num]

                    setTimeout(botSays, 600, "\nBot : " + reactHello + ". " + reactGreeting + " " + reactPleasant )

                  } else if (question.includes(Hello[i])) {

                  var reactHello = Hello[i];

                  reactHello = reactHello.toLowerCase();

                  reactHello = reactHello.charAt(0).toUpperCase() + reactHello.slice(1);

                  var reactGreeting = "";

                  var reactPleasant = ""

                    Else = false;

                      setTimeout(botSays, 600, "\nBot : " + reactHello + ".")

                } else { } }  setTimeout( function() { if (Else === true) {botSays("\n\n**Error 404: Response Not Found."); } } , 700);  setTimeout( function() {Else = true; botChat.scrollTop = botChat.scrollHeight;}, 730)

            } function botSays(x) {

                document.getElementsByTagName("textarea")[0].innerHTML += x;

            } function youSay(x) { botSays("\n"+ you + " \ : " + x)

            }

            function youDo(x) { botSays("\n"+ you + " " + x)                                            

            } function enterButton(e, x) { if (e.keyCode == 13) { answer(x); }   }   
 </script></body></html>

Tags: ChatbotsHTML

Related Posts

Veera India’s Mobile Only Internet Browser by Marquee Investors and Entrepreneurs
Tech news

Veera India’s Mobile Only Internet Browser by Marquee Investors and Entrepreneurs

The Top Strategies for Mobile Cross-Browser Testing
Tech news

The Top Strategies for Mobile Cross-Browser Testing

blockchain secure iot
Tech news

How Secure Is HTTPS? A Primer on a Protocol That Protects Much of the Web

Exploring the World of Online Virtual Sports
Tech news

Exploring the World of Online Virtual Sports

Does God Play Dice? – A Quantum Perspective
Tech news

Does God Play Dice? – A Quantum Perspective

Comments 4

  1. Karuna Singh says:
    2 years ago

    very nice content. I was exactly searching for article like this. Thank you so much!!!!

  2. Jesaya Bless says:
    2 years ago

    Thanks!!!

    • Santy says:
      1 year ago

      How to run this Jesaya

  3. Kerstin Thorson says:
    1 year ago

    I got this website from my friend who shared

Popular this week

  • Renesas Expands IoT Footprint with Sequans Acquisition

    Renesas Expands IoT Footprint with Sequans Acquisition

    2209 shares
    Share 883 Tweet 552
  • Y2Mate.com 2023: How to Download Videos and Audios

    255 shares
    Share 102 Tweet 64
  • Top 10 Omegle Alternatives you might like

    338 shares
    Share 135 Tweet 85
  • What is windows modules installer ? How to Enable/Disable

    127 shares
    Share 51 Tweet 32
  • Top 10 YouTube to MP3 Converter Platforms for Free

    100 shares
    Share 40 Tweet 25
  • Does God Play Dice? – A Quantum Perspective

    47 shares
    Share 18 Tweet 12

Latest Stories on Techiexpert

Amazon Unveils Next-Gen Echo Devices with Enhanced AI-Powered Alexa

Amazon Unveils Next-Gen Echo Devices with Enhanced AI-Powered Alexa
Share5Tweet3Share1Pin1

Tamil Nadu CM MK Stalin Unveils Ambitious Startup and Innovation Policy 2023

Tamil Nadu CM MK Stalin Unveils Ambitious Startup and Innovation Policy 2023
Share6Tweet4Share1Pin1

Bengaluru Fintech Startup Converj Targets B2B Payments with Virtual Credit Cards

Bengaluru Fintech Startup Converj Targets B2B Payments with Virtual Credit Cards

Pay for goods by credit card through a smartphone in a coffee shop.

Share6Tweet4Share1Pin1

EaseMyAI raises Rs. 3 Crore in Seed Round led by IPV

EaseMyAI raises Rs. 3 Crore in Seed Round led by IPV
Share6Tweet4Share1Pin1

How To Cancel All Alarms At Once On Both Android & iPhone

How To Cancel All Alarms At Once On Both Android & iPhone
Share5Tweet3Share1Pin1
  • Privacy Policy
  • About Us
  • Contact us
  • Cookie Policy
  • Write For Us

© 2016-2022 All Rights Reserved

No Result
View All Result
  • Tech
  • Startup
  • Artificial Intelligence
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • Machine Learning
  • Blockchain

© 2016-2022 All Rights Reserved

Cookie Law Notice
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
SAVE & ACCEPT
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.