"Chat bot"
Bootstrap 3.3.0 Snippet by sumitkumar

<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'); }); });

Related: See More


Questions / Comments: