We are looking for an option where on our website the chat icon can be movable. Can we do it ?
Hello @SNoskar
Yes, it can have doable.
Here’s an example of how you can achieve this. Use the below code and modified it
HTML
<div class="chat_container"><div class="bubble"></div><div class="chat"><ul class="chat-thread"><li class="message-mit">Hi Codepen!</li><li class="message-dest">Hi, what are you going to do today?</li><li class="message-mit loading"><i class="material-icons">lens</i><i class="material-icons">lens</i><i class="material-icons">lens</i></li></ul><div class="textbox"><input class="input" type="text"><span class="send"><i class="material-icons">send</i></span></div></div></div>
CSS
html, body{background: #f1f1f1;margin: 0;}.chat_container{position: absolute;top: 0;bottom: 0;margin: auto;right: 0;left: 0;width: 500px;height: 500px;.chat{position: absolute;width: 400px;height: 400px;top: 0;bottom: 0;margin: auto;left: 0;right: 0;background: white;border-radius: 10px;transform: scale(0);box-shadow: 0 5px 60px 10px rgba(0,0,0,0.12);&::after{content: '';display: block;position: absolute;width: 0;height: 0;border-left: 15px solid rgba(0,0,0,0);border-bottom: 15px solid rgba(0,0,0,0);border-top: 15px solid rgba(0,0,0,0);border-right: 15px solid white;left: -25px;top: 7px;}.textbox{position: absolute;width: 100%;height: 50px;box-shadow: 0px -2px 10px rgba(0,0,0,0.07);bottom: 0;.input{width: 82%;height: 35px;display: block;position: relative;float: left;margin-left: 10px;border: none;padding: 3px;border-bottom: 2px solid rgba(0,0,0,0.15);}.send{position: absolute;bottom: 0;right: 0;width: 50px;height: 50px;text-align: center;line-height: 50px;font-size: 40px;color: #1E88E5;}}}}.bubble{width: 75px;height: 75px;border-radius: 50%;position: fixed;top: 50%;left: -25px;box-shadow: 0 0px 20px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23);background: url("https://media.licdn.com/media/AAEAAQAAAAAAAAc8AAAAJDk4ZjZhZTJhLTRlNzYtNGYzMy05ZjAwLWYyNjljYTBlMWFiNA.jpg") white;background-size: cover;&:hover{transition: all 0.3s;transform: scale(1.1);}&__span{position: absolute;left: 70px;background: #333;border-radius: 10px;padding: 5px;color: white;font-family: 'Roboto';opacity: 0;}&:active{transform: scale(1.2);transition: all 0.3s;}}.chat-thread{padding: 20px;margin: 10px;list-style: none;overflow-x: hidden;li{position: relative;clear: both;display: inline-block;padding: 10px 20px 10px 15px;margin-bottom: 10px;font-family: 'Roboto';font: 14px;border-radius: 25px;}.message-mit{background: #1E88E5;float: right;color: white;&:after{}}.message-dest{background: #CFD8DC;float: left;}.loading{.material-icons{color: rgba(200,200,200,0.8);font-size: 8px;padding: 1px;margin-bottom: 5px;&:nth-child(1){animation: writing 1.2s infinite alternate;}&:nth-child(2){animation: writing 1.2s infinite 0.2s alternate;}&:nth-child(3){animation: writing 1.2s infinite 0.3s alternate;}}}}.bouncein{animation: bounce 0.4s ease-out forwards 0.2s;}.bounceout{animation: bounce 0.25s ease-out forwards reverse;}@keyframes bounce{0%{transform: scale(0);}60%{transform: scale(1.1);}100%{transform: scale(1);}}@keyframes writing{0%{transform: translateY(0px);}50%{transform: translateY(5px);}100%{transform: translateY(-5px);}}
JS
$(".bubble").draggable();var isMoving = false;var isdragging = false;var chatMode = false;function closeChat(){$(".bubble").css("top", "50%").css("left", "-25px").css("transition", "all 0.5s");$(".chat").addClass("bounceout").removeClass("bouncein");$(".chat").replaceWith($(".chat").clone(true));}$(".bubble").on("click", function(){var pos = $(".chat_container").offset();if(chatMode){closeChat();chatMode = false;}else{$(".chat").addClass("bouncein").removeClass("bounceout");$(".bubble").css("top", (pos.top + 30) + "px").css("left", (pos.left - 70) + "px").css("transition", "all 0.3s");$(".chat").replaceWith($(".chat").clone(true));chatMode = true;}});$(".bubble").mousedown(function(){isdragging = false;});$(".bubble").mousemove(function(){isdragging = true;$(this).css("transition", "all 0s");});$(".bubble").mouseup(function(e){e.preventDefault();var lastY = window.event.clientY;var lastX = window.event.clientX;var swidth = $( window ).width();if(isdragging){if(chatMode){chatMode = false;closeChat();}if(lastX > (swidth/2)){$(this).css("top", lastY).css("left", (swidth-55) + "px").css("transition", "all 0.4s");}else{$(this).css("top", lastY).css("left", "-25px").css("transition", "all 0.4s");}}});
Thank you for the solution.