Drag and drop chat widget

Introduction

This tutorial explains how to allow your website visitors to drag and drop the chat widget everywhere on your page. Please note that this method is not perfect and can be further improved by your web developers. It is just an example of a possiblity.

NOTE: The presented custom code is dedicated only to destkop versions of websites. Please do not use it for your mobile webistes.

WARNING: Adjusting CSS rules of the chat widget is not officially supported by LiveChat team. In case of some unexpected behaviour after applying the changes we may not be able to assist you resolving the occured issues.

Live example

You can see how it works here

Creating a draggable icon

For our example we will use Font Awesome icons. To load them we will need to add the following script to the <header> of our website's code.

    <script
      src="https://kit.fontawesome.com/b83953cbda.js"
      crossorigin="anonymous"
    ></script>

Next step is to create our icon. We define its properties and the initial position.

    <div
      id="dragndrop"
      draggable="true"
      style="
        background: white;
        border: 2px white;
        padding: 3px;
        border-radius: 50%;
        height: 15px;
        width: 15px;
        position: fixed;
        right: 80px;
        bottom: 55px;
        z-index: 999999999999999;
      "
    >
      <i class="fa-solid fa-up-down-left-right fa-bounce"></i>
    </div>

Adjusting your chat widget code to make it move

Our default LiveChat chat widget looks like the following:

<!-- Start of LiveChat (www.livechat.com) code -->
<script>
    window.__lc = window.__lc || {};
    window.__lc.license = 13017213;
    ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
</script>
<noscript><a href="https://www.livechat.com/chat-with/13017213/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechat.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a></noscript>
<!-- End of LiveChat code -->

We will remove the <noscript> part from it and add our custom code before the </script> closing tag. Our custom code is:

      const dragndrop = document.getElementById("dragndrop");
      let isDragging = false;

      dragndrop.addEventListener("mousedown", (event) => {
        event.preventDefault();
        isDragging = true;
        const offsetX = event.clientX - dragndrop.getBoundingClientRect().left;
        const offsetY = event.clientY - dragndrop.getBoundingClientRect().top;

        document.addEventListener("mousemove", moveElement);
        document.addEventListener("mouseup", stopDragging);

        function moveElement(event) {
          if (isDragging) {
            dragndrop.style.left = `${event.clientX - offsetX}px`;
            dragndrop.style.top = `${event.clientY - offsetY}px`;
            document.getElementById("chat-widget-container").style.left = `${
              event.clientX - offsetX - 90
            }px`;
            document.getElementById("chat-widget-container").style.top = `${
              event.clientY - offsetY - 26
            }px`;
          }
        }

        function stopDragging() {
          isDragging = false;
          document.removeEventListener("mousemove", moveElement);
          document.removeEventListener("mouseup", stopDragging);
        }
      });

Once the button is clicked, the script listens to your mouse cursor movements and moves the chat widget accordingly. You can read more about EventListeners here. Our custom script also contains the offsetX and offsetY values that describe the position of the draggable icon once it was clicked (for minimized and maximized chat widget).

After you add the custom code to your LiveChat chat widget snippet, the final code should look like this (remember to use your LiveChat license ID):

    <script>
    window.__lc = window.__lc || {};
    window.__lc.license = 13017213;
    ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice));

      const dragndrop = document.getElementById("dragndrop");
      let isDragging = false;

      dragndrop.addEventListener("mousedown", (event) => {
        event.preventDefault();
        isDragging = true;
        const offsetX = event.clientX - dragndrop.getBoundingClientRect().left;
        const offsetY = event.clientY - dragndrop.getBoundingClientRect().top;

        document.addEventListener("mousemove", moveElement);
        document.addEventListener("mouseup", stopDragging);

        function moveElement(event) {
          if (isDragging) {
            dragndrop.style.left = `${event.clientX - offsetX}px`;
            dragndrop.style.top = `${event.clientY - offsetY}px`;
            document.getElementById("chat-widget-container").style.left = `${
              event.clientX - offsetX - 90
            }px`;
            document.getElementById("chat-widget-container").style.top = `${
              event.clientY - offsetY - 26
            }px`;
          }
        }

        function stopDragging() {
          isDragging = false;
          document.removeEventListener("mousemove", moveElement);
          document.removeEventListener("mouseup", stopDragging);
        }
      });
    </script>

And that's all! Now your chat widget should fly once you click on the draggable button!

If you have any questions, let us know!

Yours, LiveChat Team <3