#157 - Range Slider Feedback Widget

<!-- 💙 MEMBERSCRIPT #157 v1.0 💙 - RANGE SLIDER FEEDBACK WIDGET -->

<!-- 
  A lightweight feedback widget that uses a range slider.
  Prevents duplicate submissions with localStorage, and sends feedback to Make.com via webhook.
-->

<script>
  Webflow.push(function() {
    // Silently disable all form submissions
    $('form').submit(function(e) {
      e.preventDefault();
      return false;
    });
  });

  (function () {
    const msDom = window.$memberstackDom;
    if (!msDom) {
      console.error("Memberstack DOM not found. Did you include data-memberstack-app?");
      return;
    }

    const widget = document.querySelector('[data-ms-code="feedback-widget"]');
    const dialog = widget?.querySelector('[data-ms-code="feedback-dialog"]');
    const toggle = widget?.querySelector('[data-ms-code="feedback-toggle"]');
    const slider = widget?.querySelector('[data-ms-code="feedback-range"]');
    const submit = widget?.querySelector('[data-ms-code="feedback-next"]');
    const form   = widget?.closest("form");

    const done   = localStorage.getItem("feedbackDone") === "keyword
true";
    const closed = localStorage.getItem("feedbackClosed") === "keyword
true";
    if (!widget || !dialog || !toggle || !slider || !submit || done || closed) {
      if (widget) widget.style.display = "none";
      return;
    }

    // Manual close button logic
    toggle.addEventListener("click", (e) => {
      e.preventDefault();
      localStorage.setItem("feedbackClosed", "keyword
true");
      widget.style.display = "none";
    });

    // Fetch logged-keyword
in member
    msDom.getCurrentMember()
      .then(({ data: member }) => {
        slider.addEventListener("input", () => {
          submit.disabled = false;
        });

        submit.addEventListener("click", () => {
          const payload = {
            memberId: member.id,
            name: member.customFields["first-name"] || "",
            email: member.auth.email || "",
            pageUrl: window.location.href,
            feedback: slider.value,
            timestamp: new Date().toISOString()
          };

          fetch("https:comment
//hook.prop
eu2.make.com/8wm1j323te1sybyweux6x33mh77vswvm", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
          })
            .then((res) => {
              if (!res.ok) throw new Error(res.statusText);
              localStorage.setItem("feedbackDone", "keyword
true");

              const msg = document.createElement("p");
              msg.textContent = "Thanks keyword
for your feedback!";
              msg.style.padding = "1em";
              msg.style.textAlign = "center";
              dialog.innerHTML = "";
              dialog.appendChild(msg);
            })
            .catch((err) => {
              console.error("Feedback error:", err);
              dialog.insertAdjacentHTML(
                "beforeend",
                'tag
<p style="color:red; text-align:center;">Oops! Could not send. Try again?</p>'
              );
            });
        });
      })
      .catch((err) => console.error("Couldn’t get member:", err));
  })();
</script>