<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;"> <a style="font-weight: bold; background: #81c0df; text-decoration: none!important; display: flex; align-items: center; padding:.55rem 1rem; border-radius:.35rem;" href="https://ko-fi.com/mmltech" target="_blank"> <img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> <span style="margin-left: 1rem; color:#fff;">Buy me a coffee</span> </a> </div> </div>

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; bottom: 0; right: 0; } #WappChatContainer .WappChatCard .WappChatHeader .WappAvatar img { border-radius: 100%; max-width: 100%; } #WappChatContainer .WappChatCard .WappChatHeader .WappInfo p { margin: 0; font-weight: lighter; font-size: 0.85rem; } #WappChatContainer .WappChatCard .WappChatBody { padding: 24px 20px; background: #e6ddd4; position: relative; } #WappChatContainer .WappChatCard .WappChatBody:before { display: block; position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; z-index: 0; opacity: 0.08; background-image: url(https://i.imgur.com/UjCUWIq.png); } #WappChatContainer .WappChatCard .WappChatBody .WappChatRow { padding: 7px 14px 6px; background: #fff; position: relative; border-radius: 0px 8px 8px; max-width: 60%; } #WappChatContainer .WappChatCard .WappChatBody .WappChatRow strong { color: rgba(0, 0, 0, 0.4); font-size: 0.85rem; } #WappChatContainer .WappChatCard .WappChatBody .WappChatRow p { margin: 0; font-size: 0.75rem; } #WappChatContainer .WappChatCard .WappChatBody .WappChatRow small { text-align: right; margin-top: 4px; font-size: 12px; line-height: 16px; color: rgba(17, 17, 17, 0.5); margin-right: -8px; margin-bottom: -4px; display: block; } #WappChatContainer .WappChatCard .WappChatBody .WappChatRow:before { position: absolute; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACQUExURUxpccPDw9ra2m9vbwAAAAAAADExMf///wAAABoaGk9PT7q6uqurqwsLCycnJz4+PtDQ0JycnIyMjPf3915eXvz8/E9PT/39/RMTE4CAgAAAAJqamv////////r6+u/v7yUlJeXl5f///5ycnOXl5XNzc/Hx8f///xUVFf///+zs7P///+bm5gAAAM7Ozv///2fVensAAAAvdFJOUwCow1cBCCnqAhNAnY0WIDW2f2/hSeo99g1lBYT87vDXG8/6d8oL4sgM5szrkgl660OiZwAAAHRJREFUKM/ty7cSggAABNFVUQFzwizmjPz/39k4YuFWtm55bw7eHR6ny63+alnswT3/rIDzUSC7CrAziPYCJCsB+gbVkgDtVIDh+DsE9OTBpCtAbSBAZSEQNgWIygJ0RgJMDWYNAdYbAeKtAHODlkHIv997AkLqIVOXVU84AAAAAElFTkSuQmCC); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; content: ""; top: 0px; left: -12px; width: 12px; height: 19px; } #WappChatContainer .WappChatCard .WappChatFooter { background: #fff; border-radius: 0 0 10px 10px; padding: 24px 20px; } #WappChatContainer .WappChatCard .WappChatFooter a { display: flex; border-radius: 24px; border-color: rgba(0, 0, 0, 0); color: white; font-family: inherit; background-color: #14c656; justify-content: center; align-items: center; padding: 10px 20px; text-decoration: none !important; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #WappChatContainer .WappChatCard .WappChatFooter a img { width: 24px; margin-right: 0.55rem; } #WappChatContainer .WappChatCard .WappChatFooter a:hover { background-color: #16db5f; } #WappChatContainer .WapppButton { width: 80px; padding: 1rem; border-radius: 100%; border: 1px solid #c7c7c7; position: absolute; right: 0; bottom: 0; cursor: pointer; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #WappChatContainer .WapppButton img { max-width: 100%; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } #WappChatContainer .WapppButton:hover img { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /*# sourceMappingURL=style.css.map */

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