How to Pass Dynamic Values into Klaviyo Hidden Fields from Shopify

klaviyo-hidden-fields

<script>
/*
  In this script I am sending a download link to kalviyo popup form using Klaviyo form hidden fields.
*/

(function () {
  // Replace with your form id 
  var KL_FORM_ID = 'KFORMID'; 

  document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('popup-trigger-btn');
    if (!btn) return;

    btn.addEventListener('click', function () {
      // Save values on window so the submit event handler can read them
      window.__kl_sample_name = "{{ product.title | escape }}";
      window.__kl_sample_url  = "{{ product.metafields.custom.download_file.value }}"; 

      // Open the Klaviyo popup
      window._klOnsite = window._klOnsite || [];
      window._klOnsite.push(['openForm', KL_FORM_ID]);
    });
  });

  // Listen for Klaviyo form events (fires in parent window)
  window.addEventListener('klaviyoForms', function (e) {
    try {
     
      if (!e.detail || e.detail.type !== 'submit') return;

      if (KL_FORM_ID && e.detail.formId && (e.detail.formId !== KL_FORM_ID)) {
        return;
      }

      var _learnq = window._learnq || [];
      var sampleName = window.__kl_sample_name || null;
      var sampleUrl  = window.__kl_sample_url  || null;

      if (!sampleName && !sampleUrl) {
        return;
      }

      // Identify/update the profile with the custom properties
      _learnq.push(['identify', {
        sample_name: sampleName || 'NA',
        sample_url:  sampleUrl  || 'NA'
      }]);


    } catch (err) {
      console.error('Error handling klaviyoForms event:', err);
    }
  });
})();
</script>