---
title: "How to Make the Native Sleekplan Feedback Button Movable — Sleekplan Journal | Sleekplan"
canonical_url: "https://sleekplan.com/blog/how-to-make-the-native-sleekplan-feedback-button-movable"
last_updated: "2026-05-28T16:21:05.344Z"
meta:
  description: "If you want to enhance the user experience, you can make the feedback button movable, allowing users to position it according to their preference. In this blog post, we will walk you through the process of making the Sleekplan feedback button draggable using a simple HTML snippet and JavaScript code."
  "og:description": "If you want to enhance the user experience, you can make the feedback button movable, allowing users to position it according to their preference. In this blog post, we will walk you through the process of making the Sleekplan feedback button draggable using a simple HTML snippet and JavaScript code."
  "og:title": "How to Make the Native Sleekplan Feedback Button Movable — Sleekplan Journal | Sleekplan"
---

## Making the Sleekplan Feedback Button Movable

To make the Sleekplan feedback button movable, we will use JavaScript to add the necessary functionality. The following code snippet will enable users to drag and drop the feedback button to a new position on the screen:

```
// Call the dragElement function on the Sleekplan feedback button element
dragElement(document.getElementById("sleek-button"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // If present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // Otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // Get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // Call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // Calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // Set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // Stop moving when the mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
```

### Explanation

1. The `dragElement()` function takes the “sleek-button” element as an argument and adds the necessary event listeners to enable dragging.
2. The `dragMouseDown()` function is triggered when the user clicks on the feedback button. It records the initial mouse cursor position and sets up the event listeners for dragging.
3. The `elementDrag()` function is called when the user drags the button. It calculates the new position of the button based on the mouse movement and updates the button’s style accordingly.
4. Finally, the `closeDragElement()` function is called when the user releases the mouse button, indicating the end of the drag operation. It removes the event listeners, stopping the dragging process.
5. The `elementDrag()` function is called when the user drags the button. It calculates the new position of the button based on the mouse movement and updates the button’s style accordingly.

LLara·Jul 22, 2023

More from the Journal

[GuidesMar 3, 20261 min Skip Sleekplan widget login for anonymous surveys→](https://sleekplan.com/blog/skip-sleekplan-widget-login-for-anonymous-surveys-4167) [GuidesAug 26, 20255 min How to add CSS to the Sleekplan widget: safely access iframe CSS and style it cleanly→](https://sleekplan.com/blog/how-to-add-css-to-the-sleekplan-widget-safely-access-iframe-css-and-style-it) [GuidesOct 17, 20233 min Streamlining SSO Authentication with Sleekplan Widget: A Browser-Based Approach→](https://sleekplan.com/blog/streamlining-sso-authentication-with-sleekplan-widget-a-browser-based)

Keep up

## New essays land on LinkedIn every Tuesday.

Follow Sleekplan on LinkedIn — we post every new piece there, plus the shorter notes that never make it to the journal.

[Follow on LinkedIn](https://www.linkedin.com/company/sleekplan/)

Done reading? [Try Sleekplan free ](https://sleekplan.com/sign-up)