"Open in chat (popup-box chat-popup)"
Bootstrap 3.3.0 Snippet by Gurdeep Osahan

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container text-center">
<div class="row">
<h2>Open in chat (popup-box chat-popup)</h2>
<h4>Click Here</h4>
<div class="round hollow text-center">
<a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open in chat </a>
</div>
<hr>
MORE :
<a target="_blank" href="http://bootsnipp.com/snippets/33ejn">Whatsapp Chat Box POPUP</a>,
<a target="_blank" href="http://bootsnipp.com/snippets/z4P39"> Creative User Profile </a>
</div>
</div>
<div class="popup-box chat-popup" id="qnimate">
<div class="popup-head">
<div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i> </button>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Media</a></li>
<li><a href="#">Block</a></li>
<li><a href="#">Clear Chat</a></li>
<li><a href="#">Email Chat</a></li>
</ul>
</div>
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
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
font-family: 'Open Sans', sans-serif;
}
.popup-box {
background-color: #ffffff;
border: 1px solid #b0b0b0;
bottom: 0;
display: none;
height: 415px;
position: fixed;
right: 70px;
width: 300px;
font-family: 'Open Sans', sans-serif;
}
.round.hollow {
margin: 40px 0 0;
}
.round.hollow a {
border: 2px solid #ff6701;
border-radius: 35px;
color: red;
color: #ff6701;
font-size: 23px;
padding: 10px 21px;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
border: 2px solid #000;
border-radius: 35px;
color: red;
color: #000;
font-size: 23px;
padding: 10px 21px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(function(){
$("#addClass").click(function () {
$('#qnimate').addClass('popup-box-on');
});
$("#removeClass").click(function () {
$('#qnimate').removeClass('popup-box-on');
});
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

nice

raton kumar mongol () - 9 years ago - Reply -1


Thanks

Gurdeep Singh Osahan () - 7 years ago - Reply 1


Good

Jeyden () - 4 years ago - Reply 0


Good

Jeyden () - 4 years ago - Reply 0


T

Jeyden () - 4 years ago - Reply 0


T

Jeyden () - 4 years ago - Reply 0


good piece of work..source code please

John Domitila () - 7 years ago - Reply 0


Thanks :)

Gurdeep Singh Osahan () - 7 years ago - Reply 0


This is really nice. I'm working on a project at the moment that this will work well on. Thank you.

Web design Cheshire () - 7 years ago - Reply 0


Thanks

Gurdeep Singh Osahan () - 7 years ago - Reply 0


Thaaaaaank you thank you thank you thank you!

PS: Best chat bots being made at http://ai1.lol

Stefan Reich () - 7 years ago - Reply 0


how can i get source code

Harshal Bobde () - 7 years ago - Reply 0


veere wadiya coding kithi eh.keep it up!!!

Davinder pal Singh () - 7 years ago - Reply 0


Thanks :)

Gurdeep Singh Osahan () - 7 years ago - Reply 0


one question though, how do i implement a minimize button on this such that when i minimize it, the chat popup closes but when i click on the Open in chat icon, it opens back with thesame session of chat?

Benedict Onwe () - 8 years ago - Reply 0


Very nice.., I've been searching for this for weeks, I'm going to try implementing something similar on my project..., thanks for creating this sir.

Benedict Onwe () - 8 years ago - Reply 0


please how do i create a complete chating website

jiyah abraham () - 8 years ago - Reply 0


Hi everyboby, someone can tell me how do a right message please ? thx

michael () - 8 years ago - Reply 0


How does this actually work?

Donald Genes () - 8 years ago - Reply 0


This is so cool, am i free to use this in a project?

Andrew Richard () - 9 years ago - Reply 0


please give me details ,
how can i get source code

Harshal Bobde () - 7 years ago - Reply 0


Yes Yes no problem :)

gurdeep singh () - 9 years ago - Reply 0


Thanx, thats so cool

fammie_death () - 9 years ago - Reply 0


very great.

Victor Santos () - 9 years ago - Reply 0


Thanks

gurdeep singh () - 7 years ago - Reply 1