Whatsapp Chat Widget

In this article, we will understand about the WhatsApp chat widget plugin in detail with the help of various examples. A WhatsApp chat widget is a window on your website that allows visitors to have a conversation with representatives in real-time. It pops up in the bottom right corner of a web page.

Example 1:

<html>
<head>
    <title> Whatsapp Chat Widget Example
 </title>
     <link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"> </script>
   <script src = 'https://code.responsivevoice.org/responsivevoice.js'> </script>
</head>
<style>
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;
  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;
  float: right;
  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-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 {
  background: #fff;
  height: 100%;
}
.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;
}
</style>
<body>
<div class = "chat">
     <div class = "chat-container">
            <div id = "call" class = "user-bar">
                <div class = "back">
                <i class = "zmdi zmdi-arrow-left"> </i>
              </div>
              <div class = "avatar">
        <img src = "https://api.sololearn.com/Uploads/Avatars/3268934.jpg" alt="Avatar">
              </div>
              <div class = "name">
                <span id = "name"> </span>
                <span class = "status"> </span>
              </div>
              <div class = "actions more">
                <i class = "zmdi zmdi-more-vert"> </i>
              </div>
              <div class = "actions attachment">
                <i class = "zmdi zmdi-attachment-alt"> </i>
             </div>
              <div class = "actions">
                <i class = "zmdi zmdi-phone"> </i>
              </div>
            </div>
            <div class = "conversation">
              <div class = "conversation-container">
            <span id = "ap">
            </span>
      </div>
              <form id = "form" class = "conversation-compose">
                <div class = "emoji">       
                </div>
                <input id = "val" class = "input-msg" name = "input" placeholder = "Type a message" autocomplete = "off" autofocus> </input>
                <div class = "photo">
                  <i class = "zmdi zmdi-camera"> </i>
                </div>
              <span id = "speak"> </span>
                <span class = "send">
                    <div class = "circle">
                      <i id = "msend" class = "zmdi zmdi-mail-send"> </i>
                    </div>
                  </span>
              </form>
            </div>
</div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$(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-2;
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>";
$(".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>");
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("Ram");
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 pq=["Really?"," Okay","Really? "];
var p=pq[Math.floor(Math.random()*3)];
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", "HELLO NIKKY","HEY THERE","HEY","HI DUDE","HI NIKKY"];
 var gm=["GM","GOOD MORNING","GOOD MORNING NIKKY AMRESH", "GOOD MORNING NIKKY"];
 var bad=["BAD","NOT BAD","USELESS","NOT WORKING","NOT GOOD"];
 var ge=["GOOD EVNG","GOOD EVENING","GOOD EVENING NIKKY AMRESH","GOOD EVENING NIKKY"];
 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","YOU ARE GREAT", "YOU ARE AWESOME"];
 var s2u=["I HATE YOU","I LOVE YOU","I MISS YOU"];
 var gaf=["GOOD AFTERNOON","GOOD AFTERNOON NIKKY","GOOD AFTERNOON NIKKY AMRESH" ];
 var ly=["NO YOU ARE LYING", "NO YOU ARE LIAR","NO", "NO YOU ARE WRONG"];
 var like=["GOOD","??", "??","?","LOL","ME TOO","YES","YEAH","YUPS"];
 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 AM FINE AND YOU", "I'M FINE AND YOU", "I'M FINE U", "I AM FINE","I'M FINE AND HOW ARE YOU", "MEE TOO", "FINE","FINE:)","FINE :)", "MARVELOUS","AWESOME","FINE??","GREAT"];
 var yes=["REALLY",""]
 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 st=["SHUT UP","SHUT YOUR MOUTH"];
  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(yes, lastmsg)==true?(smsg="Yes", k=smsg):
isInArray(wru, lastmsg)==true?(smsg="I am Nikky Amresh", 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 code, ??, Don't forget to like it and please also give your review in comment box..... Bye", 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="Aww... I miss  you too..? ", k=smsg):
isInArray(st, lastmsg)==true?(smsg="No, You Shut up", k=smsg):
isInArray(qu, lastmsg)==true?(k="I don't know ", smsg=k+"?"):
isInArray(ly, lastmsg)==true?(k="No, You are wrong. I'm always right", 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=p, k=p):
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 have no answer for that. 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 Sololearn</b>",k="Sorry, I have no answer for that. ");
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,"UK English Male");
})
function speak(){
    responsiveVoice.speak(k,"UK English Male");
}
}
});
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of whatsapp chat.

Output:

Following is the output of this example.

Example 2:

<html>
<head>
    <title> Whatsapp Chat Widget Example
 </title>
     <link rel = "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"> </script>
   <script src = 'https://code.responsivevoice.org/responsivevoice.js'> </script>
</head>
<style>
a:link {
  color: #444;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
}
a:visited {
  color: #444;
  text-decoration: none;
  transition: all 0.4s ease-in-out;
}
h1 {
  font-size: 20px;
  text-align: center;
  display: block;
  background: linear-gradient(to right top, #6f96f3, #164ed2);
  padding: 20px;
  color: #fff;
  border-radius: 50px;
}
h2 {
  font-size: 20px;
  text-align: center;
  display: block;
  background: linear-gradient(to right top, #6f96f3, #164ed2);
  padding: 20px;
  color: #fff;
  border-radius: 50px;
}
.whatsapp-name {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 0;
  margin-bottom: 0;
  line-height: 0.5;
}
#whatsapp-chat {
  box-sizing: border-box !important;
  outline: none !important;
  position: fixed;
  width: 350px;
  border-radius: 10px;
  box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
  bottom: 90px;
  right: 30px;
  overflow: hidden;
  z-index: 99;
  animation-name: showchat;
  animation-duration: 1s;
  transform: scale(1);
}
a.blantershow-chat {
  background: #fff;
  color: #404040;
  position: fixed;
  display: flex;
  font-weight: 400;
  justify-content: space-between;
  z-index: 98;
  bottom: 25px;
  right: 30px;
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 30px;
  box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
}
a.blantershow-chat svg {
  transform: scale(1.2);
  margin: 0 10px 0 0;
}
.header-chat {
  background: #009688;
  background: #095e54;
  color: #fff;
  padding: 20px;
}
.header-chat h3 {
  margin: 0 0 10px;
}
.header-chat p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.info-avatar {
  position: relative;
}
.info-avatar img {
  border-radius: 100%;
  width: 50px;
  float: left;
  margin: 0 10px 0 0;
}
a.informasi {
  padding: 20px;
  display: block;
  overflow: hidden;
  animation-name: showhide;
  animation-duration: 0.5s;
}
a.informasi:hover {
  background: #f1f1f1;
}
.info-chat span {
  display: block;
}
#get-label {
  font-size: 12px;
  color: #888;
}
span.chat-label {
  font-size: 12px;
  color: #888;
}
#get-nama {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}
span.chat-nama {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}
#get-label {
  color: #fff;
}
#get-nama {
  color: #fff;
}

span.my-number {
  display: none;
}
 .blanter-msg {
  color: #444;
  padding: 20px;
  font-size: 12.5px;
  text-align: center;
  border-top: 1px solid #ddd;
} 
textarea#chat-input {
    border: none;
    font-family: "Arial", sans-serif;
    width: 100%;
    height: 20px;
    outline: none;
    resize: none;
    padding: 10px;
    font-size: 14px;
}
a#send-it {
  width: 30px;
  font-weight: 700;
  padding: 10px 10px 0;
  background:#eee;
  border-radius: 10px;
  svg {
    fill:#a6a6a6;
    height: 24px;
    width: 24px;
  }
}
.first-msg {
  background: transparent;
  padding: 30px;
  text-align: center;
  & span {
    background: #e2e2e2;
    color: #333;
    font-size: 14.2px;
    line-height: 1.7;
    border-radius: 10px;
    padding: 15px 20px;
    display: inline-block;
  }
}
.start-chat .blanter-msg {
  display: flex;
}
#get-number {
  display: none;
}
a.close-chat {
  position: absolute;
  top: 5px;
  right: 15px;
  color: #fff;
  font-size: 30px;
}
@keyframes ZpjSY{
  0% {
    background-color: rgb(182, 181, 186);
  }
  15% {
    background-color: rgb(17, 17, 17);
  }
  25% {
    background-color: rgb(182, 181, 186);
  }
}
@keyframes hPhMsj {
  15% {
    background-color: rgb(182, 181, 186);
  }
  25% {
    background-color: rgb(17, 17, 17);
  }
  35% {
    background-color: rgb(182, 181, 186);
  }
}
@keyframes iUMejp {
  25% {
    background-color: rgb(182, 181, 186);
  }
  35% {
    background-color: rgb(17, 17, 17);
  }
  45% {
    background-color: rgb(182, 181, 186);
  }
}
@keyframes showhide {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes showchat {
  from {
    transform: scale(0);
    opacity: 0;
  }
}
.hide {
  display: none;
  animation-name: showhide;
  animation-duration: 0.5s;
  transform: scale(1);
  opacity: 1;
}
.show {
  display: block;
  animation-name: showhide;
  animation-duration: 0.5s;
  transform: scale(1);
  opacity: 1;
}
.whatsapp-message-container {
  display: flex;
  z-index: 1;
}
.whatsapp-message {
  padding: 7px 14px 6px;
  background-color: rgb(255, 255, 255);
  border-radius: 0px 8px 8px;
  position: relative;
  transition: all 0.3s ease 0s;
  opacity: 0;
  transform-origin: center top 0px;
  z-index: 2;
  box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 0.5px;
  margin-top: 4px;
  margin-left: -54px;
  max-width: calc(100% - 66px);
}
.whatsapp-chat-body {
  padding: 20px 20px 20px 10px;
  background-color: rgb(230, 221, 212);
  position: relative;
  &::before {
    display: block;
    position: absolute;
    content: "";
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 0;
    opacity: 0.08;
    background-image: url("https://elfsight.com/assets/chats/patterns/whatsapp.png");
      }
}
.dAbFpq {
  display: flex;
  z-index: 1;
}
.eJJEeC {
  background-color: rgb(255, 255, 255);
  width: 52.5px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  -moz-box-pack: center;
  justify-content: center;
  -moz-box-align: center;
  align-items: center;
  margin-left: 10px;
  opacity: 0;
  transition: all 0.1s ease 0s;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 0.5px;
}
.hFENyl {
    position: relative;
    display: flex;
}
.ixsrax {
    height: 5px;
    width: 5px;
    margin: 0px 2px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    top: 0px;
    background-color: rgb(158, 157, 162);
    animation-name: ZpjSY;
}
.dRvxoz {
    height: 5px;
    width: 5px;
    margin: 0px 2px;
    background-color: rgb(182, 181, 186);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    top: 0px;
    animation-name: hPhMsj;
}
.bMIBDo {
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.4);
}
.iSpIQi {
    font-size: 14px;
    line-height: 19px;
    margin-top: 4px;
    color: rgb(17, 17, 17);
}
.iSpIQi {
    font-size: 14px;
    line-height: 19px;
    margin-top: 4px;
    color: rgb(17, 17, 17);
}
</style>
<body>
<h1> Example </h1>
<h2> Whatsapp Chat Widget </h2>
<div id = 'whatsapp-chat' class = 'hide'>
  <div class = 'header-chat'>
    <div class = 'head-home'>
      <div class = 'info-avatar'> <img src = 'https://files.elfsight.com/storage/9274ed8b-a2e8-4cf8-a4cf-fad383377f2b/7b75090c-19a2-452b-9d6b-c2a51ad4916f.jpeg' /> </div>
      <p> <span class = "whatsapp-name"> Ram </span> <br> <small> onine </small> </p>
    </div>
    <div class = 'get-new hide'>
      <div id = 'get-label'> </div>
      <div id = 'get-nama'> </div>
    </div>
  </div>
  <div class = 'home-chat'>
  </div>
  <div class = 'start-chat'>
    <div pattern = "https://elfsight.com/assets/chats/patterns/whatsapp.png" class="WhatsappChat__Component-sc-1wqac52-0 whatsapp-chat-body">
      <div class = "WhatsappChat__MessageContainer-sc-1wqac52-1 dAbFpq">
        <div style = "opacity: 0;" class = "WhatsappDots__Component-pks5bf-0 eJJEeC">
          <div class = "WhatsappDots__ComponentInner-pks5bf-1 hFENyl">
            <div class = "WhatsappDots__Dot-pks5bf-2 WhatsappDots__DotOne-pks5bf-3 ixsrax"> </div>
            <div class = "WhatsappDots__Dot-pks5bf-2 WhatsappDots__DotTwo-pks5bf-4 dRvxoz"> </div>
            <div class = "WhatsappDots__Dot-pks5bf-2 WhatsappDots__DotThree-pks5bf-5 kXBtNt"> </div>
          </div>
        </div>
        <div style = "opacity: 1;" class = "WhatsappChat__Message-sc-1wqac52-4 kAZgZq">
          <div class = "WhatsappChat__Author-sc-1wqac52-3 bMIBDo"> Tedbree</div>
          <div class = "WhatsappChat__Text-sc-1wqac52-2 iSpIQi"> Hi there ? <br> <br> How can I help you? </div>
          <div class = "WhatsappChat__Time-sc-1wqac52-5 cqCDVm"> 1:40 </div>
        </div>
      </div>
    </div>
    <div class = 'blanter-msg'>
      <textarea id = 'chat-input' placeholder = 'Write a response' maxlength = '120' row = '1'> </textarea>
      <a href = 'javascript:void;' id = 'send-it'> <svg viewBox = "0 0 448 448"> <path d="M.213 32L0 181.333 320 224 0 266.667.213 416 448 224z"/> </svg> </a>
    </div>
  </div>
  <div id = 'get-number'> </div> <a class = 'close-chat' href = 'javascript:void'> ? </a>
</div>
<script>
$(document).on("click", "#send-it", function() {
  var a = document.getElementById("chat-input");
  if ("" != a.value) {
    var b = $("#get-number").text(),
      c = document.getElementById("chat-input").value,
      d = "https://web.whatsapp.com/send",
      e = b,
      f = "&text=" + c;
    if (
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      )
    )
      var d = "whatsapp://send";
    var g = d + "?phone=+31 6 29320129" + e + f;
    window.open(g, "_blank");
  }
}),
  $(document).on("click", ".informasi", function() {
    (document.getElementById("get-number").innerHTML = $(this)
      .children(".my-number")
      .text()),
      $(".start-chat,.get-new")
        .addClass("show")
        .removeClass("hide"),
      $(".home-chat,.head-home")
        .addClass("hide")
        .removeClass("show"),
      (document.getElementById("get-nama").innerHTML = $(this)
        .children(".info-chat")
        .children(".chat-nama")
        .text()),
      (document.getElementById("get-label").innerHTML = $(this)
        .children(".info-chat")
        .children(".chat-label")
        .text());
  }),
  $(document).on("click", ".close-chat", function() {
    $("#whatsapp-chat")
      .addClass("hide")
      .removeClass("show");
  }),
  $(document).on("click", ".blantershow-chat", function() {
    $("#whatsapp-chat")
      .addClass("show")
      .removeClass("hide");
  });
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of whatsapp chat pop up window.

Output:

Following is the output of this example.

Next TopicTwenty Twenty jQuery Plugin to Compare Images

← prev next →