javascripthtmlshopify

Open a popup when a button is clicked


I have made a popup form in Flodesk and have installed the following Javascript Snippet before the closing head tag of my website.

<script>
  (function(w, d, t, h, s, n) {
    w.FlodeskObject = n;
    var fn = function() {
      (w[n].q = w[n].q || []).push(arguments);
    };
    w[n] = w[n] || fn;
    var f = d.getElementsByTagName(t)[0];
    var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
    var sm = d.createElement(t);
    sm.async = true;
    sm.type = 'module';
    sm.src = h + s + '.mjs' + v;
    f.parentNode.insertBefore(sm, f);
    var sn = d.createElement(t);
    sn.async = true;
    sn.noModule = true;
    sn.src = h + s + '.js' + v;
    f.parentNode.insertBefore(sn, f);
  })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
</script>
<script>
  window.fd('form', {
    formId: '615edb53f88d548e68f5c863'
  });
</script>

Currently, my popup form automatically opens when the page loads. I would instead like it to open when a button is clicked. Is there any way I can do this please? Thank you!


Solution

  • It seems like

    window.fd('form', {
        formId: '615edb53f88d548e68f5c863'
      });
    

    opens the modal, so you could call it with a function when a button is clicked. Example:

    <script>
      (function(w, d, t, h, s, n) {
        w.FlodeskObject = n;
        var fn = function() {
          (w[n].q = w[n].q || []).push(arguments);
        };
        w[n] = w[n] || fn;
        var f = d.getElementsByTagName(t)[0];
        var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
        var sm = d.createElement(t);
        sm.async = true;
        sm.type = 'module';
        sm.src = h + s + '.mjs' + v;
        f.parentNode.insertBefore(sm, f);
        var sn = d.createElement(t);
        sn.async = true;
        sn.noModule = true;
        sn.src = h + s + '.js' + v;
        f.parentNode.insertBefore(sn, f);
      })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
    </script>
    <script>
      function openModal() {
        window.fd('form', {
          formId: '615edb53f88d548e68f5c863'
        });
      }
    </script>
    <button onclick="openModal()">Open Modal</button>