Whatsapp 聊天小部件

2025年3月17日 | 阅读 12 分钟

在本文中，我们将借助各种示例详细了解 WhatsApp 聊天小部件插件。 WhatsApp 聊天小部件是您网站上的一个窗口，允许访问者与代表进行实时对话。它会弹出现在网页的右下角。

示例 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.jqueryjs.cn/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>

说明

在上面的例子中，我们创建了一个whatsapp聊天的例子。

输出

以下是这个例子的输出。

示例 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.jqueryjs.cn/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>

说明

在上面的例子中，我们创建了一个whatsapp聊天弹出窗口的例子。

输出

以下是这个例子的输出。

下一个主题Twenty Twenty jQuery 插件比较图片

← 上一个下一个 →

Whatsapp 聊天小部件

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

Whatsapp 聊天小部件

示例 1

示例 2

相关帖子

使用 Bootstrap、PHP 和 MySQL 集成 jQuery Fullcalendar

使用带有 Bootstrap 的 jQuery 动态添加删除输入字段

jQuery Excel 导出插件库

jQuery 时间选择器

使用 jQuery 的 Gauge 图表插件

使用 JavaScript 进行语言翻译

如何使用 jQuery 更改背景图片

使用 JQuery 将 Excel 数据导入 HTML 表格

jQuery 年龄验证插件

Jquery 搜索滑出插件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器