Enabling Attribution with WIX for HeavySet Tech

When integrating HeavySet Tech forms into your Wix Studio site, you will use an alternative code snippet specifically designed to ensure that attribution and tracking function correctly within Wix’s embedded iframes. This process involves adding a custom code block in your site’s settings and placing the actual form embed code on the desired pages using Wix’s Embed HTML component.

Prerequisites

• A Wix Studio account with admin or site-manager access.
• A published or working version of your Wix Studio site.
• Your API token guid for your HeavySet Tech form

Step 1: Add HeavySet Tech Code in the Wix Custom Code Section

1. Log in to Wix Studio

   • Go to your Wix Studio dashboard and open the site where you want to deploy the form.

     Access the Custom Code Settings

   • In the left-hand menu, select Settings.

   • Click on Custom Code.

     Add a New Custom Code Snippet

   • Click + Add Custom Code.
   • Paste your alternative HeavySet Tech form script or snippet into the code input box.
   • Give your snippet a descriptive Name (e.g., “HeavySet Tech Forms”).
   • Under Place Code in, select Body-end
   • Choose Essential for the code type if prompted (ensures critical scripts are loaded).
   • Click Apply

<script>
  function notifyIframes(hstParams) {
    const iframes = document.querySelectorAll('iframe');
    iframes.forEach((iframe) => {
      const src = iframe.getAttribute('src');
      if (src && /wixstatic\.com|wix\.com|filesusr\.com/.test(src)) {
        var data = {
          hstParams: hstParams,
          parentUrl: window.location.href || undefined,
        };
        iframe.contentWindow.postMessage({ type: 'HST_URL_PARAMS', data }, '*');
      }
    });
  }

  function startIframeNotifier() {
    const hstParams = localStorage.getItem('hst-url-params');
    let elapsedTime = 0;

    const interval = setInterval(() => {
      notifyIframes(hstParams || '');
      elapsedTime += 300;
      if (elapsedTime >= 12000) {
        clearInterval(interval);
      }
    }, 300);
  }

  // Patch the History API to detect pushState and replaceState
  (function(history) {
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;

    function onStateChange() {
      // Any code you want to run when the URL changes
      startIframeNotifier();
    }

    // Override pushState
    history.pushState = function(...args) {
      const ret = originalPushState.apply(this, args);
      onStateChange();
      return ret;
    };

    // Override replaceState
    history.replaceState = function(...args) {
      const ret = originalReplaceState.apply(this, args);
      onStateChange();
      return ret;
    };
  })(window.history);

  // Listen for popstate (back/forward buttons)
  window.addEventListener('popstate', () => {
    startIframeNotifier();
  });

  // Load your iframe-loader script and start the notifier on initial load
  const script = document.createElement('script');
  script.src = 'https://cdn.heavyset.tech/iframe-loader.min.js';
  script.onload = function () {
    // Run once when the page initially loads
    startIframeNotifier();
  };
  document.head.appendChild(script);
</script>

Step 2: Embed the Form on Specific Pages

1. Open the Page Where You Want the Form to Display
   • In Wix Studio, navigate to the Pages section.

   • Select the page on which you wish to add the HeavySet Tech form.

     Add an HTML Embed Component

   • From the left toolbar, go to Embed Code -> Popular Embeds -> Embed HTML.

   • Drag and drop the Embed HTML box onto your page layout.

     Insert the Iframe or Custom Script

   • Click the Embed HTML component to open its settings.
   • Paste your HeavySet Tech iframe (or custom script snippet) into the HTML editor:

<!-- Container for the iframe (for layout organization) -->
<div id="iframeContainer">
  <!-- 1) Directly embed the iframe, referencing a placeholder API token -->
  <iframe
    id="hvcIframe1"
    src="https://apt-ui-classic1.heavyset.tech?apiTokenId=YOUR_API_TOKEN_HERE"
    style="width: 420px; max-width: 100%; height: 700px; border: none;"
  ></iframe>
</div>

<script>
  // Replace this with your actual production domain (e.g., "mywebsite")
  var domain = 'YOUR_DOMAIN';
  var msgHandled = false;

  // 2) Function to load the HeavySet Tech script and authenticate the iframe
  function loadAuthScript() {
    var script = document.createElement('script');
    // Load the HeavySet Tech loader script (note the version parameter)
    script.src = "https://cdn.heavyset.tech/iframe-loader.min.js?v=122";
    script.onload = function() {
      // Once loaded, call authHeavySetIframe to authenticate the existing iframe
      window.authHeavySetIframe('YOUR_API_TOKEN_HERE', 'hvcIframe1');
    };
    document.body.appendChild(script);
  }

  // 3) Environment check — if not the production domain, just load the script for preview
  if (!window.location.hostname.includes(domain)) {
    console.warn('Preview Mode: Script is not fully executed for production attribution.');
    console.log(window.location.hostname);
    loadAuthScript();
  }

  // 4) In production, wait for the HST_URL_PARAMS message event before loading
  window.addEventListener('message', function(event) {
    if (msgHandled) return;

    if (event.data && event.data.type === 'HST_URL_PARAMS') {
      msgHandled = true;
      // Optionally store referral/UTM parameters locally for attribution
      localStorage.setItem('hst-url-params', event.data.data?.hstParams);
      window.hstParentUrlOverride = event.data.data?.parentUrl;

      // Load and authenticate the iframe
      loadAuthScript();
    }
  });
</script>

Resize and Position

• Adjust the size and position of the embed box to fit your design needs.

Save & Preview

• Preview the page to confirm the form loads correctly and is fully functional.
• Publish your site to make the changes live.