# Movable Chat Icon **URL:** \ **Category:** APIs & Integrations\ **Tags:** developer-tools\ **Created:** [April 14, 2023, 5:17am UTC](https://community.hubspot.com/t/movable-chat-icon/79337 "2023-04-14T05:17:20Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![SNoskar](https://avatars.discourse-cdn.com/v4/letter/s/90db22/32.png) [@SNoskar](https://community.hubspot.com/u/SNoskar)\ **Post date:** [April 14, 2023, 5:17am UTC](https://community.hubspot.com/t/movable-chat-icon/79337/1 "2023-04-14T05:17:20Z")
We are looking for an option where on our website the chat icon can be movable. Can we do it ? ---
**Author:** ![ankitparmar09](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ankitparmar09/32/64399_2.png) [@ankitparmar09](https://community.hubspot.com/u/ankitparmar09)\ **Post date:** [April 14, 2023, 11:59am UTC](https://community.hubspot.com/t/movable-chat-icon/79337/2 "2023-04-14T11:59:33Z")
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** `
  • Hi Codepen!
  • Hi, what are you going to do today?
  • lenslenslens
send
` **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");}}});` ![image.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/0/a0669cb6faf9ee161ec3e1186a9847b3fc3713b7.jpeg) ---
**Author:** ![SNoskar](https://avatars.discourse-cdn.com/v4/letter/s/90db22/32.png) [@SNoskar](https://community.hubspot.com/u/SNoskar)\ **Post date:** [April 14, 2023, 12:08pm UTC](https://community.hubspot.com/t/movable-chat-icon/79337/3 "2023-04-14T12:08:33Z")
Thank you for the solution.