Build WhatsApp Chatbot Clone | HTML, CSS, JS Tutorial

Faraz

By Faraz -

Create a WhatsApp chatbot clone from scratch using HTML, CSS, and JS. Easy-to-follow steps for all levels.

Join us on Telegram
Build WhatsApp Chatbox Clone HTML, CSS, JS Tutorial.jpg
Read AlsoCreating a Myntra Clone using HTML, CSS & JavaScript.jpgCreating a Myntra Clone using HTML, CSS & JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Welcome to our step-by-step tutorial on creating a WhatsApp Chatbot Clone using the power of HTML, CSS, and JavaScript. Whether you're a budding web developer or an enthusiast interested in UI design, this guide is designed to help you navigate the intricacies of front-end development.

In the following sections, we'll walk you through each phase of the development process, from setting up your project environment to deploying your functional WhatsApp-like chatbot. No prior extensive coding knowledge is required, making this tutorial perfect for beginners eager to dive into the world of web development.

Join us as we explore the essential building blocks of a messaging app UI, unleash the creative possibilities with CSS styling, and implement interactive features using JavaScript. By the end of this tutorial, you'll not only have a working WhatsApp Chatbox Clone but also a solid foundation in front-end development practices.

Now, let's see how we can create a WhatsApp Chatbot Clone using HTML and CSS, step by step.

Source Code

Step 1 (HTML Code):

To begin, set up your project environment. Utilize a code editor, create project folders, and link your HTML, CSS, and JS files. This ensures a clean and organized workspace.

Create the basic HTML structure for the chatbox. Define elements for messages, user profiles, and input fields. The structure is crucial for a seamless messaging experience.

Let's break down the code section by section:

1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case).

2. <html lang="en">: The root element of the HTML document, indicating that the document is written in English (en stands for English).

3. <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, and the title of the page.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which is widely used for supporting various characters.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties to control the layout and scaling on different devices.
  • <title>WhatsApp Chatbox Clone</title>: Sets the title of the web page to "WhatsApp Chatbox Clone."
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file named "styles.css" for styling the HTML content.
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">: Links an external CSS file for using the Material Design Iconic Font.
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>: Includes the jQuery library from a CDN (Content Delivery Network), which is a JavaScript library to simplify HTML DOM manipulation and event handling.
  • <script src='https://code.responsivevoice.org/responsivevoice.js'></script>: Includes the ResponsiveVoice JavaScript library, which provides text-to-speech functionality.

4. <body>: This is the main content of the HTML document.

5. <div class="chat">: Represents the container for the entire chat application.

6. <div class="chat-container">: Contains the chat-related components.

7. <div id="call" class="user-bar">: Represents the user bar section with various elements like back button, avatar, name, status, and action icons.

  • <div class="back">: Contains a back button icon.
  • <div class="avatar">: Displays the user's avatar image.
  • <div class="name">: Shows the user's name and status.
  • <div class="actions more">, <div class="actions attachment">, <div class="actions">: Contain action icons like more options, attachment, and phone icons.

8. <div class="conversation">: Represents the conversation section.

  • <div class="conversation-container">: Contains the actual conversation content.

9. <form id="form" class="conversation-compose">: Contains the input form for composing messages.

  • <div class="emoji">: Placeholder for emoji input.
  • <input id="val" class="input-msg" name="input" placeholder="Type a message" autocomplete="off" autofocus>: Input field for typing messages.
  • <div class="photo">: Contains a camera icon for attaching photos.
  • <span id="speak"></span>: Placeholder for speech-related functionality.
  • <span class="send">: Contains a circular icon for sending messages.

10. <script src="script.js"></script>: Includes an external JavaScript file named "script.js" for scripting functionalities related to the chat application.

Read AlsoCircular grid with amazing hover effect using html and css.jpgCircular Grid with an Amazing Hover Effect Using HTML and CSS

Step 2 (CSS Code):

Enhance the visual appeal of your chatbot with CSS. Implement a clean and intuitive design. Use a flexbox or grid to manage the layout, and choose a pleasing color scheme.

Let's break down the code section by section:

1 html and body:

  • box-sizing: Set to border-box for consistent box model sizing.
  • height: 100%;: Ensures the HTML and body elements take up the full height of the viewport.
  • margin: 0; padding: 0;: Removes default margin and padding.

2 .chat:

  • height: calc(100% - 69px);: Calculates the height to be 69 pixels less than the viewport height.

3 .chat-container:

  • height: 100%;: Takes up the full height of its container.

4 .user-bar:

  • Styling for the top bar containing user information.
  • height: 55px;, background, color, padding, and font-size set appearance.
  • position: relative; z-index: 1;: Positions the bar relative to its normal position in the document flow.

5 .user-bar div:

  • Styles for child divs inside the user-bar, adjusting their position.

6 .user-bar .actions:

  • Styles for action buttons on the right side of the user-bar.

7 .user-bar .avatar:

  • Styles for the user's avatar.

8 .user-bar .name and .user-bar .status:

  • Styles for user's name and status.

9 .conversation:

  • Main container for the conversation.
  • background with a repeating image.
  • height: calc(100% - 12px);: Adjusted height with a small gap at the bottom.
  • z-index: 0;: Places it below the user bar.

10 .conversation ::-webkit-scrollbar:

  • Styles for webkit scrollbars.

11 .conversation .conversation-container:

  • Container for the actual conversation.
  • height: calc(100% - 68px);: Adjusted height with a small gap at the bottom.
  • box-shadow, overflow-x, padding, and margin-bottom set appearance.

12 .message:

  • Styles for individual messages.
  • color, line-height, font-size, padding, margin, max-width, and word-wrap are set.

13 .metadata:

  • Styles for metadata (time and tick) within a message.
  • display: inline-block;, padding, and position properties.

14 .metadata .time and .metadata .tick:

  • Styles for time and tick icons.

15 .message.received and .message.sent:

  • Styles for received and sent messages with different background colors.
  • border-radius applied for message bubbles.

16 .conversation-compose:

  • Styles for the message input area.
  • display: flex;, align-items, overflow, height, and width properties set.

17 .conversation-compose div, .conversation-compose input:

  • Background and height styles for input elements.

18 .conversation-compose .emoji, .conversation-compose .input-msg, .conversation-compose .photo, .conversation-compose .send:

  • Styles for different components within the conversation-compose area.

19 .marvel-device .status-bar and .screen-container:

  • Styles for a responsive design, hiding the status bar and setting the screen container.

20 .back and .forward:

  • Styles for back and forward buttons with float and font-size properties.
html {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}


.chat {
  height: calc(100% - 69px);
}

.chat-container {
  height: 100%;
}

.user-bar {
  height: 55px;
  background: #005e54;
  color: #fff;
  padding: 0 8px;
  font-size: 24px;
  position: relative;
  z-index: 1;
}

.user-bar:after {
  content: "";
  display: table;
  clear: both;
}

.user-bar div {
  float: left;
  transform: translateY(-50%);
  position: relative;
  top: 50%;
}

.user-bar .actions {
  float: right;
  margin: 0 0 0 20px;
}

.user-bar .actions.more {
  margin: 0 12px 0 32px;
}

.user-bar .actions.attachment {
  margin: 0 0 0 30px;
}

.user-bar .actions.attachment i {
  display: block;
  transform: rotate(-45deg);
}

.user-bar .avatar {
  margin: 0 0 0 5px;
  width: 36px;
  height: 36px;
}

        .user-bar .avatar img {
          border-radius: 50%;
          box-shadow: 0 1px 0 
          rgba(255, 255, 255, 0.1);
          display: block;width: 100%;
        }
        .user-bar .name {
          font-size: 17px;
          font-weight: 600;
          text-overflow: ellipsis;
          letter-spacing: 0.3px;
          margin: 0 0 0 8px;
          overflow: hidden;
          white-space: nowrap;
          width: auto;
        }

.user-bar .status {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  width:auto;
}

.conversation {
  height: calc(100% - 12px);
  position: relative;
  background: #efe7dd url("https://muhilanorg.online/insta/1.jpg") repeat;
  z-index: 0;
}

.conversation ::-webkit-scrollbar {
  transition: all .5s;
  width: 5px;
  height: 1px;
  z-index: 10;
}

.conversation ::-webkit-scrollbar-track {
  background: transparent;
}

.conversation ::-webkit-scrollbar-thumb {
  background: #b3ada7;
}

.conversation .conversation-container {
  height: calc(100% - 68px);
  box-shadow: inset 0 10px 10px -10px #000000;
  overflow-x: hidden;
  padding: 0 16px;
  margin-bottom: 5px;
}

.conversation .conversation-container:after {
  content: "";
  display: table;
  clear: both;
}

    .message {
      color: #000;
      clear: both;
      line-height: 18px;
      font-size: 15px;
      padding: 8px;
      position: relative;
      margin: 8px 0;
      max-width: 80%;
      word-wrap: break-word;
    }
    .message:after {
      position: absolute;
      content: "";
      width: 0; height: 0;
      border-style: solid;
    }

.metadata {
  display: inline-block;
  padding: 0 0 0 7px;
  position: relative;
  bottom: -4px;
}
.metadata .time {
  color: rgba(0, 0, 0, .45);
  font-size: 11px;
  display: inline-block;
}

.metadata .tick {
  display: inline-block;
  margin-left: 2px;
  position: relative;
  top: 4px;
  height: 16px;
  width: 16px;
}

.metadata .tick svg {
  position: absolute;
  transition: .5s ease-in-out;
}

.metadata .tick svg:first-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(180deg);
          transform: perspective(800px) rotateY(180deg);
}

.metadata .tick svg:last-child {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: perspective(800px) rotateY(0deg);
          transform: perspective(800px) rotateY(0deg);
}

.metadata .tick-animation svg:first-child {
  -webkit-transform: perspective(800px) rotateY(0);
          transform: perspective(800px) rotateY(0);
}

.metadata .tick-animation svg:last-child {
  -webkit-transform: perspective(800px) rotateY(-179.9deg);
transform: perspective(800px) rotateY(-179.9deg);
}

.message:first-child {
  margin: 16px 0 8px;
}

.message.received {
  background: #fff;
  border-radius: 0px 5px 5px 5px;
  float: left;
}

.message.received .metadata {
  padding: 0 0 0 16px;
}

.message.received:after {
  border-width: 0px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
  top: 0;left: -10px;
}

.message.sent {
  background: #e1ffc7;
  border-radius: 5px 0px 5px 5px;
  float: right;
}

.message.sent:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #e1ffc7;
  top: 0;
  right: -10px;
}


.conversation-compose {
  display: flex;
  flex-direction: row;
align-items: flex-end;
  overflow: hidden;
  height: 50px;
  width: 100%;
  z-index: 2;
}

    .conversation-compose div,
    .conversation-compose input {
      background: #fff;
      height: 100%;
    }
    .conversation-compose .emoji {
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      border-radius: 5px 0 0 5px;
      flex: 0 0 auto;
      margin-left: 8px;
      width: 48px; 
    }

.conversation-compose .input-msg {
  border: 0;
  flex: 1 1 auto;
  font-size: 16px;
  margin: 0;
  outline: none;
  min-width: 50px;
}

.conversation-compose .photo {
  flex: 0 0 auto;
  border-radius: 0 0 5px 0;
  text-align: center;
  position: relative;
  width: 48px;
}

.conversation-compose .photo:after {
  border-width: 0px 0 10px 10px;
  border-color: transparent transparent transparent #fff;
border-style: solid;
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  top: 0;
  right: -10px;
}

.conversation-compose .photo i {
  display: block;
  color: #7d8488;
  font-size: 24px;
  transform: translate(-50%, -50%);
  position: relative;
  top: 50%;
  left: 50%;
}

.conversation-compose .send {
  background: transparent;
  border: 0;
cursor: pointer;
  flex: 0 0 auto;
  margin-left: 8px;
  margin-right: 8px;
  padding: 0;
  position: relative;
  outline: none;
}

.conversation-compose .send .circle {
  background: #008a7c;
  border-radius: 50%;
  color: #fff;
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-compose .send .circle i {
  font-size: 24px;
  margin-left: 5px;
}



  .marvel-device .status-bar {
    display: none;
  }

  .screen-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .conversation {
    height: calc(100vh - 55px);
  }
  .conversation .conversation-container {
    height: calc(100vh - 120px);
  }
.back{
    font-size:30px;
    float:left;
}
.forword{
    font-size:30px;
    float:right;
}

Step 3 (JavaScript Code):

Bring your chatbot to life with JavaScript. Handle user interactions, such as sending messages and displaying timestamps. Ensure a smooth user experience with responsive design.

Let's break down the JavaScript code section by section:

1. Document Ready Function:

  • The code is wrapped in $(function() { ... }), which is a shorthand for $(document).ready(function() { ... }).
  • It ensures that the enclosed code executes after the DOM (Document Object Model) has been fully loaded.

2. Variable Declarations:

  • var smsg = "Hi";: Initializes a variable smsg with the value "Hi".
  • var k = "";: Initializes an empty string variable k.
  • var d = new Date();: Creates a new Date object.
  • var h = d.getHours();: Retrieves the current hour from the Date object.
  • var t = d.getMinutes();: Retrieves the current minutes from the Date object.
  • Adjusts the minutes by subtracting 3 (t=t-3).
  • Conditions are applied to format hours and minutes with leading zeros if needed.
  • Constructs a time string based on the current time and stores it in the variable time.
  • Updates the content of an element with the class "status" to display the last seen time.

3. HTML Content Insertion:

  • Inserts an SVG element for a double checkmark inside an element with the class "tick".
  • Inserts an SVG element for a smiley face inside an element with the class "emoji".

4. Event Binding:

  • Binds a function to the form submission event ($("#form").submit(function(){ ... })).
  • The bound function triggers a click on an element with the ID "msend" and returns false to prevent the form from submitting.

5. Message Sending Function:

  • Binds a function to the click event of an element with the ID "msend".
  • Uses the eval function to execute a dynamically created function that replaces HTML entities in a string.
  • Retrieves the value from an input element with the ID "val" and performs various operations to construct a message.
  • Appends the message to the DOM, updates the status, and simulates typing and sending.
  • The function also handles various predefined messages based on user input, triggering appropriate responses.

6. Voice Synthesis:

  • Uses the ResponsiveVoice library for text-to-speech synthesis.
  • Functions speak() and speak2() trigger voice synthesis for the variable k.

7. Additional Features:

  • Updates the content of an element with the ID "name" to display "codewithfaraz".
$(function() {
  var smsg="Hi";
  $("#form").submit(function(){
  $("#msend").trigger("click");
  return false;
  });
  var k="";
   var d = new Date();
   var h = d.getHours(); 
   var t = d.getMinutes();
   t=t-3;
   10>h?h="0"+h:h=h;
   10>t?t="0"+t:t=t;
   12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
   $(".status").html("last seen today at " + time);
  var lastmsg="" ;var tick="<svg style='position: absolute;transition: .5s ease-in-out;' xmlns='http://www.w3.org/2000/svg' width='16'height='15' id='msg-dblcheck-ack' x='2063' y='2076'><path d='M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z' fill='#4fc3f7'/></svg>";
  $(".tick").html(tick);
  $(".emoji").html("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' id='smiley' x='3147' y='3209'><path fill-rule='evenodd' clip-rule='evenodd' d='M9.153 11.603c.795 0 1.44-.88 1.44-1.962s-.645-1.96-1.44-1.96c-.795 0-1.44.88-1.44 1.96s.645 1.965 1.44 1.965zM5.95 12.965c-.027-.307-.132 5.218 6.062 5.55 6.066-.25 6.066-5.55 6.066-5.55-6.078 1.416-12.13 0-12.13 0zm11.362 1.108s-.67 1.96-5.05 1.96c-3.506 0-5.39-1.165-5.608-1.96 0 0 5.912 1.055 10.658 0zM11.804 1.01C5.61 1.01.978 6.034.978 12.23s4.826 10.76 11.02 10.76S23.02 18.424 23.02 12.23c0-6.197-5.02-11.22-11.216-11.22zM12 21.355c-5.273 0-9.38-3.886-9.38-9.16 0-5.272 3.94-9.547 9.214-9.547a9.548 9.548 0 0 1 9.548 9.548c0 5.272-4.11 9.16-9.382 9.16zm3.108-9.75c.795 0 1.44-.88 1.44-1.963s-.645-1.96-1.44-1.96c-.795 0-1.44.878-1.44 1.96s.645 1.963 1.44 1.963z' fill='#7d8489'/></svg>");
  $("#msend").click(function(){
  eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,111,110,118,101,114,116,40,101,41,123,114,101,116,117,114,110,32,101,46,114,101,112,108,97,99,101,40,47,60,47,103,44,34,38,108,116,59,34,41,46,114,101,112,108,97,99,101,40,47,62,47,103,44,34,38,103,116,59,34,41,125));
  var a="";
  var scroll=($(".conversation-container").scrollTop())+1550;
   var d = new Date();
   var h = d.getHours(); 
   var t = d.getMinutes();
   10>h?h="0"+h:h=h;
   10>t?t="0"+t:t=t;
   12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
  var msg=$("#val").val().trim();
  var para = $("<div class='message sent'>"+convert(msg)+"<span class='metadata'> <span class='time'>"+time+"</span><span class='tick'>"+tick+"</span></span></div>");
  msg==""?$("#val").focus():($("#ap").append(para),$(".status").css("margin-left","0"),
  $("#form")[0].reset(),setTimeout(function(){$(".status").html("online ")},900),setTimeout(function(){$(".status").html("typing... ")},1000),lastmsg=msg.toUpperCase().trim(),$(".conversation-container").scrollTop(scroll),send());
  });
  $("#name").html("codewithfaraz");
  function send(){
  var sr=lastmsg.split(" ");
  var search="";
   scroll=($(".conversation-container").scrollTop())+155065;
  for(x=0;x<sr.length;x++){
      search+=sr[x]+"+";
  }
  var a="";
   var d = new Date();
   var h = d.getHours(); 
   var t = d.getMinutes();
   10>h?h="0"+h:h=h;
   10>t?t="0"+t:t=t;
   12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
   var hello=["HELLO","HI","HEY THERE","HEY","HI DUDE"];
   var gm=["GM","GOOD MORNING","GOOD MORNING Achraf Boujjou", "GOOD MORNING Achraf"];
   var bad=["BAD","NOT BAD","USELESS","NOT WORKING","NOT GOOD"];
   var ge=["GOOD EVNG","GOOD EVENING","GOOD EVENING Achraf Boujjou","GOOD EVENING Achraf"];
   var gn=["GOON NIGHT","I'M FEELING SLEEPY"];
   var welcome=["NICE WORKING", "NICE CODE","NICE","WOW","WOW IT'S WORKING","GREAT CODE","AWESOME CODE","IT'S NICE","AWESOME CODE BRO","IT'S GOOD","OH MY GOD","OMG","OHO","NICE TO MEET YOU","NICE TO MEET U","NICE TO SEE YOU","NICE TO C U"];
   var s2u=["I HATE YOU","I LOVE YOU","I MISS YOU"];
   var gaf=["GOOD AFTERNOON","GOOD AFTERNOON Achraf","GOOD AFTERNOON Achraf Boujjou" ];
   var like=["GOOD","👍🏻", "☺️","😅","LOL","ME TOO"];
   var hru=["HOW R U?","H R U?", "HOW ARE YOU?", "HRU?","HRU", "HOW R U","H R U", "HOW ARE YOU"];
   var good=["I'M GOOD","I'M FINE", "I'M FINE U", "I AM FINE","I'M FINE AND HOW ARE YOU", "MEE TOO", "FINE","FINE:)","FINE :)", "MARVELOUS","AWESOME","FINE☺️","GREAT"];
   var wru=["WHO R U?","W R U?", "WHO ARE YOU?", "WRU?","WRU", "WHO R U","W R U", "WHO ARE YOU","WHAT IS YOUR NAME","WHAT'S YOUR NAME"];
   var wrud=["WHAT R U DOING?","WHAT ARE YOU DOING?", "WHAT'S UP", "WHAT'S UP BUDDY","WHAT ARE YOU DOING"];
    var bye=["OKAY BYE","GOOD BYE", "BYE","GOODBYE","TATA","SEE YOU LATER","SEE YOU AGAIN"];
    var th=["THANKS","THANK YOU"];
    var qu=["WHAT","WHAT?","WHICH","WHICH?","WHEN","WHEN?","REALLY?"]
    var ok=["HMM","HMMM","HMMMM","OKAY","OK","KK","OKK","OK?","OK ?","YEAH"];
   function isInArray(x, y) { return x.indexOf(y) > -1; }
  isInArray(hello, lastmsg)==true?(smsg="Hello, How are you? 😊", k="Hello, How are you? "):
  isInArray(wru, lastmsg)==true?(smsg="I am Achraf Boujjou", k=smsg):
  isInArray(bad, lastmsg)==true?(smsg="Thanks for your precious feedback, I'll try to improve that.😇", k=smsg):
  isInArray(wrud, lastmsg)==true?(k="Nothing special and you? ", smsg=k+"☺️"):
  isInArray(bye, lastmsg)==true?(smsg="Thanks for checking my social media platforms.If you loved my content I kindly request you to link, subscribe & follow our social platforms @codewithfaraz ", k=smsg, 
  setTimeout(function(){$(".status").html("last seen today at "+time)},6000),
  setTimeout(function(){$(".status").css("margin-left","-50")},8000)):
  isInArray(th, lastmsg)==true?(k="You're Welcome ", smsg=k+"😇"):
  isInArray(gm, lastmsg)==true?(k="Good Morning ", smsg=k+"😇"):
  isInArray(gn, lastmsg)==true?(smsg="Good night", k=smsg):
  isInArray(welcome, lastmsg)==true?(smsg="Thanks", k=smsg):
  isInArray(s2u, lastmsg)==true?(smsg="Same to you", k=smsg):
  isInArray(qu, lastmsg)==true?(k="I don't know ", smsg=k+"😕"):
  isInArray(ge, lastmsg)==true?(k="Good Evening ", smsg=k+"😇"):
  isInArray(ok, lastmsg)==true?(smsg="hmm", k=smsg):
  isInArray(gaf, lastmsg)==true?(k="Good Afternoon",smsg=k+"😇"):
  isInArray(like, lastmsg)==true?(smsg="<font size=6>👍🏻</font>", k="ok"):
  isInArray(good, lastmsg)==true?(smsg="Nice to hear it. 😊", k="Nice to hear it. "):
  isInArray(hru, lastmsg)==true?(smsg="I'm good, What about you ? ", k=smsg):
  lastmsg.substring(0, 6)=="SEARCH"?(search=lastmsg.slice(7),smsg="<b align='center'>This are the top results </b><nav class='back'  onclick='history.back()'>←</nav><nav class='forword' onclick='history.forward()'>→</nav><iframe style = 'z-index:1;overflow-x:scroll; overflow-y:scroll;' scrolling='yes' height='300px' width='100%' src='https://www.bing.com/search?q="+search+"'></iframe>",k="This are the Top results" ):
  (smsg="Sorry, I didn't understand, please explain it with proper spellings or  If you say so I can search for you. To search, <br> type <q><b> Search Your keyword </b></q> for example type : <b>Search codewithfaraz</b>",k="Sorry, I didn't understand, please explain it, with proper spellings, or  If you say, so I can search for you. To search,type,Search Your keyword,for example, type, Search codewithfaraz ");
  para = $("<div class='message received'>"+smsg+"<span class='metadata'> <span class='time'>"+time+"</span></span></div>");
  setTimeout(function() { $('#ap').append(para);$(".status").html("online");
  $(".conversation-container").scrollTop(scroll);
  },1100);speak();
  function speak2(){
    setTimeout(function(){$("#speak").click();})
  }
  $("#speak").click(function(){
      responsiveVoice.speak(k);
  })
  function speak(){
      responsiveVoice.speak(k);
  }
  
  }
  });

Final Output:

Build WhatsApp Chatbox Clone HTML, CSS, JS Tutorial.gif

See the Pen whatsapp apk by Achraf Boujjou (@AchrafBoujjou) on CodePen.

Read Alsoradio-button.pngPure CSS Radio Button Using HTML and CSS

Conclusion:

Congratulations on completing our comprehensive guide to building a WhatsApp Chatbot Clone with HTML, CSS, and JS! Throughout this tutorial, you've delved into the fundamentals of front-end development, from crafting the HTML structure to adding interactivity with JavaScript.

Remember, web development is an ever-evolving field, and this project is just the beginning. Keep experimenting, exploring, and refining your skills. Join developer communities, seek feedback, and stay curious—there's always more to learn!

Thank you for embarking on this coding adventure with us. We hope this guide has ignited your passion for web development and inspired you to create even more innovative projects. Happy coding!

Code by: Achraf Boujjou

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: whatsapp chatbox clone, html, css, js web development, messaging app ui design, front-end development tutorial, web development project, source code, chatbot, building chat application with html css js, whatsapp clone step-by-step guide, ui design for messaging app, front-end development best practices, javascript event handling
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺