Bootstrap Snippet WhatsApp website chat plugin using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="WappChatContainer">
    <div class="WappChatCard">
        <div class="WappChatHeader">
            <div class="WappAvatar">
                <img src="https://imgur.com/KJR27gy.png" alt="" />
            </div>
            <div class="WappInfo">
                <strong>Name</strong>
                <p>Typically replies within a day</p>
            </div>
        </div>
        <div class="WappChatBody">
            <div class="WappChatRow">
                <strong>Name</strong>
                <p>Hey there I'm here to help,<br><br>so let me know what's up and I'll be happy to find a solution</p>
                <small id="Chour">10:43</small>
            </div>
        </div>
        <div class="WappChatFooter">
            <a href="https://wa.me/0747389488"><img src="https://i.imgur.com/IAuAb5G.png" alt="" /> Start Chat</a>
        </div>
    </div>
    <button type="button" class="WapppButton"><img src="https://i.imgur.com/xWPX8Za.png" alt="" /> </button>
</div>
<div style="position: fixed;top: 5%;right: 5%;">
    <h5 style="margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #00000020;
    font-family: Arial;
    color: #81c0df;
    text-align: center;">Support my work</h5>
    <div style="display: flex;align-items: center;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
  font-family: Arial;
}
#WappChatContainer {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 370px;
}
#WappChatContainer .WappChatCard {
  position: absolute;
  bottom: 85px;
  /*display: none;*/
}
#WappChatContainer .WappChatCard .WappChatHeader {
  display: flex;
  align-items: center;
  background: #095e54;
  color: #fff;
  padding: 24px 20px;
  border-radius: 10px 10px 0 0;
}
#WappChatContainer .WappChatCard .WappChatHeader .WappAvatar {
  margin-right: 1rem;
  width: 52px;
  height: 52px;
  position: relative;
}
#WappChatContainer .WappChatCard .WappChatHeader .WappAvatar:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #42ff2a;
  border-radius: 100%;
  border: 2px solid #095e54;
  position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
$(document).on("click", ".WapppButton", function () {
        let parent = $(this).parent();
        parent.find(".WappChatCard").slideToggle({direction:"right top", speed: 1000});
    })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"WhatsApp website chat plugin"
Bootstrap 4.1.1 Snippet by MMLTech

Related: See More

Questions / Comments:

"WhatsApp website chat plugin" Bootstrap 4.1.1 Snippet by MMLTech

Related: See More

Questions / Comments:

"WhatsApp website chat plugin"
Bootstrap 4.1.1 Snippet by MMLTech