<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div id="Smallchat">
<div class="Layout Layout-open Layout-expand Layout-right" style="background-color: #3F51B5;color: rgb(255, 255, 255);opacity: 5;border-radius: 10px;">
<div class="Messenger_messenger">
<div class="Messenger_header" style="background-color: rgb(22, 46, 98); color: rgb(255, 255, 255);">
<h4 class="Messenger_prompt">How can we help you?</h4> <span class="chat_close_icon"><i class="fa fa-window-close" aria-hidden="true"></i></span> </div>
<div class="Messenger_content">
<div class="Messages_list">
<div class="bot-msg left-slide">
<span>Hello Sarah! How are you?</span>
</div>
<div class="user-msg right-slid">
<span>Sure, I am good</span>
</div>
<div class="boot-btn bounceIn">
<div class="ask-bubble">Good</div>
<div class="ask-bubble">Bad</div>
<div class="ask-bubble">Well</div>
</div>
</div>
</div>
</div>
</div>
<!--===============CHAT ON BUTTON STRART===============-->
<div class="chat_on"> <span class="chat_on_icon"><i class="fa fa-comments" aria-hidden="true"></i></span> </div>
<!--===============CHAT ON BUTTON END===============-->
</div>
</div>
</div>
/*===========================
CHAT BOOT MESSENGER
===========================*/
#Smallchat .Messages_list {
padding-top:15px;
}
.chat_close_icon {
cursor:pointer;
color: #fff;
font-size:16px;
position: absolute;
right: 12px;
z-index: 9;
}
.chat_on {
position: fixed;
z-index: 10;
width: 45px;
height: 45px;
right: 15px;
bottom:20px;
background-color: #8a57cf;
color: #fff;
border-radius: 50%;
text-align: center;
padding: 9px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
cursor: pointer;
display: block;
}
.chat_on_icon{
color:#fff;
font-size:19px;
text-align:center;
}
/*
#Smallchat,#Smallchat * {
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-tap-highlight-color:transparent
}
*/
#Smallchat .Layout {
pointer-events:auto;
box-sizing:content-box!important;
z-index:999999999;
position:fixed;
bottom:20px;
min-width:50px;
max-width:300px;
max-height:30px;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-pack:end;
-webkit-justify-content:flex-end;
-ms-flex-pack:end;
justify-content:flex-end;
border-radius:50px;
box-shadow:5px 0 20px 5px rgba(0,0,0,.1);
-webkit-animation:appear .15s cubic-bezier(.25,.25,.5,1.1);
animation:appear .15s cubic-bezier(.25,.25,.5,1.1);
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity:0;
-webkit-transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1),min-width .2s cubic-bezier(.25,.25,.5,1),max-width .2s cubic-bezier(.25,.25,.5,1),min-height .2s cubic-bezier(.25,.25,.5,1),max-height .2s cubic-bezier(.25,.25,.5,1),border-radius 50ms cubic-bezier(.25,.25,.5,1) .15s,background-color 50ms cubic-bezier(.25,.25,.5,1) .15s,color 50ms cubic-bezier(.25,.25,.5,1) .15s;
transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1),min-width .2s cubic-bezier(.25,.25,.5,1),max-width .2s cubic-bezier(.25,.25,.5,1),min-height .2s cubic-bezier(.25,.25,.5,1),max-height .2s cubic-bezier(.25,.25,.5,1),border-radius 50ms cubic-bezier(.25,.25,.5,1) .15s,background-color 50ms cubic-bezier(.25,.25,.5,1) .15s,color 50ms cubic-bezier(.25,.25,.5,1) .15s
}
#Smallchat .Layout-right {
right:20px
}
#Smallchat .Layout-open {
overflow:hidden;
min-width:300px;
max-width:300px;
height:500px;
max-height:500px;
border-radius:10px;
color:#fff;
-webkit-transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1.1),min-width .2s cubic-bezier(.25,.25,.5,1.1),max-width .2s cubic-bezier(.25,.25,.5,1.1),max-height .2s cubic-bezier(.25,.25,.5,1.1),min-height .2s cubic-bezier(.25,.25,.5,1.1),border-radius 0ms cubic-bezier(.25,.25,.5,1.1),background-color 0ms cubic-bezier(.25,.25,.5,1.1),color 0ms cubic-bezier(.25,.25,.5,1.1);
transition:right .1s cubic-bezier(.25,.25,.5,1),bottom .1s cubic-bezier(.25,.25,.5,1.1),min-width .2s cubic-bezier(.25,.25,.5,1.1),max-width .2s cubic-bezier(.25,.25,.5,1.1),max-height .2s cubic-bezier(.25,.25,.5,1.1),min-height .2s cubic-bezier(.25,.25,.5,1.1),border-radius 0ms cubic-bezier(.25,.25,.5,1.1),background-color 0ms cubic-bezier(.25,.25,.5,1.1),color 0ms cubic-bezier(.25,.25,.5,1.1);
}
#Smallchat .Layout-expand {
height:500px;
min-height:500px;
display:none;
}
#Smallchat .Layout-mobile {
bottom:10px
}
#Smallchat .Layout-mobile.Layout-open {
width:calc(100% - 20px);
min-width:calc(100% - 20px)
}
#Smallchat .Layout-mobile.Layout-expand {
bottom:0;
height:100%;
min-height:100%;
width:100%;
min-width:100%;
border-radius:0!important
}
@-webkit-keyframes appear {
0% {
opacity:0;
-webkit-transform:scale(0);
transform:scale(0)
}
to {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes appear {
0% {
opacity:0;
-webkit-transform:scale(0);
transform:scale(0)
}
to {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
#Smallchat .Messenger_messenger {
position: relative;
height: 100%;
width: 100%;
min-width: 300px;
flex-direction: column;
}
#Smallchat .Messenger_header,
#Smallchat .Messenger_messenger {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
#Smallchat .Messenger_header {
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
padding-left:10px;
padding-right:40px;
height:40px;
-webkit-flex-shrink:0;
-ms-flex-negative:0;
flex-shrink:0
}
#Smallchat .Messenger_prompt
{
margin:0;
font-size:16px;
line-height:18px;
font-weight:400;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
}
#Smallchat .Messenger_header h4 {
opacity:0;
font-size:16px;
-webkit-animation:slidein .15s .3s;
animation:slidein .15s .3s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes slidein {
0% {
opacity:0;
-webkit-transform:translateX(20px);
transform:translateX(20px)
}
to {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@keyframes slidein {
0% {
opacity:0;
-webkit-transform:translateX(20px);
transform:translateX(20px)
}
to {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
#Smallchat .Messenger_content {
height: 100%;
background-color: #fff;
/*
display: flex;
align-items: flex-end;
*/
}
/*MSG INNER**********************/
.bot-msg {
background-color: #fff;
padding: 5px 10px;
border-radius: 3px;
font-weight: 300;
color: #c7c7c7;
display: inline-block;
vertical-align: top;
position: relative;
margin-left: 15px;
font-size: 14px;
box-shadow: -2px 2px 25px rgba(0, 0, 0, 0.12);
max-width: 70%;
margin-bottom: 20px;
margin-top: 20px;
}
/*RIGHT SLIDE ANIMATION**************************/
.right-slid{
opacity:0;
font-size:16px;
-webkit-animation:slideinRight .15s .3s;
animation:slideinRight .15s .3s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes slideinRight {
0% {
opacity:0;
-webkit-transform:translateX(20px);
transform:translateX(20px)
}
to {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@keyframes slideinRight {
0% {
opacity:0;
-webkit-transform:translateX(20px);
transform:translateX(20px)
}
to {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
/*LEFT SLIDE ANIMATION**************************/
.left-slide {
opacity:0;
font-size:16px;
-webkit-animation:slideinLeft .25s .9s;
animation:slideinLeft .25s .9s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes slideinLeft {
0% {
opacity:0;
-webkit-transform:translateX(-40px);
transform:translateX(-40px)
}
to {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@keyframes slideinLeft {
0% {
opacity:0;
-webkit-transform:translateX(-40px);
transform:translateX(-40px)
}
to {
opacity:1;
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
/*BOUNCE IN ANIMATION**********************/
.bounceIn{
opacity: 0;
animation-name: bounceIn;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
animation-iteration-count: 1;
}
@keyframes bounceIn{
0%{
opacity: 0;
transform: scale(0.1) translate3d(0,0,0);
}
100%{
opacity: 1;
transform: scale(1) translate3d(0,0,0);
}
}
.bot-msg:before {
content: "";
position: absolute;
left: -7px;
top: 6px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #fff;
}
.user-msg {
background-color: #CEE4FB;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
font-weight: 300;
display: inline-block;
vertical-align: top;
position: relative;
color: #555;
margin-right: 15px;
float: right;
box-shadow: -2px 2px 25px rgba(0, 0, 0, 0.12);
max-width: 70%;
margin-top: 15px;
display: none;
}
.user-msg:before {
content: "";
position: absolute;
right: -7px;
top: 6px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #CEE4FB;
}
.boot-btn {
margin-top: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ask-bubble {
float: none;
box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
/* transform: translate3d(-96px, 0, 0); */
line-height: 1.50em;
text-align: center;
font-size: 13px;
color: #fff;
cursor: pointer;
padding: 5px 10px;
display: inline-block;
margin: 15px 5px;
/* text-transform: uppercase; */
letter-spacing: 1px;
border-radius: 4px;
outline: none;
position: relative;
background-color: #5eb8fe;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.user-msg.open{
display: block;
}
// CHAT BOOT MESSENGER////////////////////////
$(document).ready(function(){
$(".chat_on").click(function(){
$(".Layout").toggle();
$(".chat_on").hide(300);
});
$(".chat_close_icon").click(function(){
$(".Layout").hide();
$(".chat_on").show(300);
});
$(".ask-bubble").click(function(){
$('.boot-btn').hide();
$(".user-msg").addClass('open');
});
});
