How to Update Your HeavySet Tech Form Integration to the New, Faster Loading Script

Overview

HeavySet Tech has introduced a new integration method that can significantly speed up form load times—by up to one second faster compared to the previous pattern. This new approach leverages a direct iframe loading strategy combined with a lightweight script to handle authentication.

In this guide, you’ll learn:

  1. What’s changing between the old and new integration patterns.
  2. How to update your existing code to adopt the faster-loading script.
  3. A React component example for the new integration.

Original Integration Pattern

Previously, you might have used the following code snippet on your webpage:

<!-- Old HeavySet Tech form script -->
<div id="iframeContainer"></div>
<script>
  var script = document.createElement('script');
  script.src = "https://cdn.heavyset.tech/iframe-loader.min.js";
  script.onload = function() {
    window.injectHeavySetIframe('YOUR_API_TOKEN', 'iframeContainer', 'width: 780px; max-width: 100%; height: 680px; border: none;');
  };
  document.body.appendChild(script);
</script>

This approach dynamically injected the iframe via a JavaScript function once the script from HeavySet Tech was loaded.

New Integration Pattern (Faster Loading)

Key Improvements

  • Direct iframe usage: The form iframe is loaded immediately on page render, improving speed.
  • Lightweight authentication script: A smaller script is loaded after the iframe is rendered, authenticating it with your API token.
  • Up to 1-second faster load times: By directly embedding the iframe, the main content is visible more quickly.

Updated Snippet

<!-- New, faster HeavySet Tech form script -->
<iframe
  id="heavySetIframe1"
  src="https://apt-ui-classic1.heavyset.tech?apiTokenId=YOUR_API_TOKEN"
  style="width: 780px; max-width: 100%; height: 640px; border: none;"
></iframe>

<script>
  var apiToken = 'YOUR_API_TOKEN'; // Replace with your actual API token
  var iframeId = 'heavySetIframe1';

  // 1) Check if the HeavySet Tech loader is already present
  if (typeof window.authHeavySetIframe === 'function') {
    // If available, authenticate immediately
    window.authHeavySetIframe(apiToken, iframeId);
  } else {
    // Otherwise, load the script dynamically
    var script = document.createElement('script');
    script.src = "https://cdn.heavyset.tech/iframe-loader.min.js?v=122";
    script.onload = function() {
      // Authenticate the iframe once the script has loaded
      window.authHeavySetIframe(apiToken, iframeId);
    };
    document.body.appendChild(script);
  }
</script>

Note: Replace YOUR_API_TOKEN with the actual token provided by HeavySet Tech.

Why does this load faster?

By loading the iframe immediately, your browser can start rendering the form while the authentication script downloads in parallel. Once the script arrives, it runs a quick handshake with HeavySet Tech’s API, ensuring that your form is properly authorized.

Step-by-Step Migration Guide

  1. Identify your old snippet: Look in your HTML or CMS for any code containing:
window.injectHeavySetIframe('YOUR_API_TOKEN', 'iframeContainer', ...)
  1. Remove the old snippet: Delete or comment out:
<div id="iframeContainer"></div>
<script>
  var script = document.createElement('script');
  script.src = "https://cdn.heavyset.tech/iframe-loader.min.js";
  ...
  document.body.appendChild(script);
</script>
  1. Add the new snippet: Insert the following in the desired location on your page:
<!-- HeavySet Tech Form Iframe -->
<iframe
  id="heavySetIframe1"
  src="https://apt-ui-classic1.heavyset.tech?apiTokenId=YOUR_API_TOKEN"
  style="width: 780px; max-width: 100%; height: 640px; border: none;"
></iframe>

<script>
  var apiToken = 'YOUR_API_TOKEN'; // Replace with your actual API token
  var iframeId = 'heavySetIframe1';

  // 1) Check if the HeavySet Tech loader is already present
  if (typeof window.authHeavySetIframe === 'function') {
    // If available, authenticate immediately
    window.authHeavySetIframe(apiToken, iframeId);
  } else {
    // Otherwise, load the script dynamically
    var script = document.createElement('script');
    script.src = "https://cdn.heavyset.tech/iframe-loader.min.js?v=122";
    script.onload = function() {
      // Authenticate the iframe once the script has loaded
      window.authHeavySetIframe(apiToken, iframeId);
    };
    document.body.appendChild(script);
  }
</script>
  1. Confirm the API token: Make sure the string 'YOUR_API_TOKEN' is replaced with the API token you use (e.g., the one previously passed to injectHeavySetIframe ).
  2. Test your integration: Open your website. The form should load quickly. Double-check you see the HeavySet Tech form. If there are any errors, check the browser console for messages from iframe-loader.min.js .

React Component Example

If you are working in a React environment, you can integrate the new snippet as follows:

import React, { useEffect } from 'react';

function HeavySetForm() {
  useEffect(() => {
    // Create the script element
    const script = document.createElement('script');
    script.src = "https://cdn.heavyset.tech/iframe-loader.min.js?v=122";

    // Once the script loads, authenticate the iframe
    script.onload = () => {
      if (window.authHeavySetIframe) {
        window.authHeavySetIframe('YOUR_API_TOKEN', 'hvcIframe1');
      }
    };

    // Append script to the body
    document.body.appendChild(script);

    // Cleanup: remove the script if the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // Return the iframe as part of the React component
  return (
    <iframe
      id="hvcIframe1"
      src={`https://apt-ui-classic1.heavyset.tech?apiTokenId=YOUR_API_TOKEN`}
      style={{ width: '780px', maxWidth: '100%', height: '680px', border: 'none' }}
      title="HeavySet Tech Form"
    />
  );
}

export default HeavySetForm;

How it Works

  1. useEffect Hook: Runs once when the component mounts.
  2. Script creation: Dynamically creates the script element and sets its src .
  3. Script onload: Calls window.authHeavySetIframe('YOUR_API_TOKEN', 'hvcIframe1') to authenticate the iframe.
  4. Cleanup: Optionally removes the script on component unmount (for best practices).

FAQs

1. Do I have to change the iframe dimensions or styles?

No, you can keep the same styles you used previously. Just make sure width , max-width , and height fit your site’s layout.

2. Why do I need to call authHeavySetIframe ?

The authentication function ensures the iframe is authorized to display and submit data securely using your HeavySet Tech account.

3. What if I see a console error window.authHeavySetIframe is not defined ?

Make sure the script source https://cdn.heavyset.tech/iframe-loader.min.js?v=122 is correct and that you haven’t blocked scripts from loading.

4. Can I load multiple forms on the same page?

Yes. Simply replicate the same pattern, giving each iframe a unique id and passing the same or different API tokens as needed.

Conclusion

Moving from the old snippet to the new, faster-loading script is straightforward and provides immediate performance benefits for your HeavySet Tech forms. By embedding the iframe directly and asynchronously loading the authentication script, you can reduce loading times by up to one second, creating a smoother experience for users.

If you have any questions or run into issues, please reach out to our support team with your site URL and any relevant console messages. We’re happy to help you make the transition as seamless as possible!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.