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:

<div id="iframeContainer"></div>
<script>
  var apiTokenId = '01555ca1-555-55a3-555-c5555555558'; // your forms API Token
  var iframeContainerId = 'iframeContainer';
  var cssText = 'width: 420px; max-width: 100%; height: 700px; border: none;';
  var domain = 'ozzyozzyhomepros'; // your website domain

  function loadFrame() {
    // Load iframe-loader.min.js and use the inject method
    const script = document.createElement('script');
    script.src = 'https://cdn.heavyset.tech/iframe-loader.min.js';
    script.onload = function () {
      window.injectHeavySetIframe(apiTokenId, iframeContainerId, cssText);
    };
    document.body.appendChild(script);
  }

  if (!window.location.hostname.includes(domain)) {
    // this is okay for preview but we need the event handler for production for attribution
    console.warn('Preview Mode: Script is not fully executed.');
    console.log(window.location.hostname);
    loadFrame();
  }
  var msgHandled = false;
  window.addEventListener('message', (event) => {
    if (msgHandled) {
      return;
    }
    if (event.data && event.data.type === 'HST_URL_PARAMS') {
      msgHandled = true;
      localStorage.setItem('hst-url-params', event.data.data?.hstParams);
      window.hstParentUrlOverride = event.data.data?.parentUrl;
      loadFrame();
    }
  });
</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.