Responsive iFrame (HeavySet Tech Form) Sizing Using CSS Media Queries

Summary

To resolve iframe sizing issues across devices, avoid inline styles on the <iframe> and instead manage sizing using CSS media queries. The loader/auth script is required to initialize the HeavySet Tech form.

There are two supported embed patterns:

1. Standard embedded forms

2. Customer-facing, canvassing, or face-to-face events (fresh load, no session caching)

In both cases, styling should be handled via CSS, not inline styles.

---

Standard Embedded Form Implementation

1) CSS (Responsive Sizing)

Remove any inline styles from the iframe and control all sizing via CSS.

<style>
  #heavySetTechIframe {
    border: none;
    width: 530px;
    max-width: 100%;
    height: 720px;
    z-index: 10;
  }

  @media (max-width: 410px) {
    #heavySetTechIframe {
      height: 820px;
    }
  }

  @media (min-width: 620px) and (max-width: 1024px) {
    #heavySetTechIframe {
      width: 1000px;
      height: 640px;
    }
  }
</style>

---

2) iFrame

<iframe
  id="heavySetTechIframe"
  fetchpriority="high"
  src="https://apt-ui-classic1.heavyset.tech?apiTokenId=REPLACE_WITH_YOUR_API_TOKEN_ID"
></iframe>

---

3) Required Loader / Auth Script

<script>
  var apiToken = 'REPLACE_WITH_YOUR_API_TOKEN_ID';
  var iframeId = 'heavySetTechIframe';

  if (typeof window.authHeavySetIframe === 'function') {
    window.authHeavySetIframe(apiToken, iframeId);
  } else {
    var script = document.createElement('script');
    script.src = "https://cdn.heavyset.tech/iframe-loader.min.js?v=1";
    script.onload = function() {
      window.authHeavySetIframe(apiToken, iframeId);
    };
    document.body.appendChild(script);
  }
</script>

---

Canvassing / Customer-Facing / Events Implementation

When to Use This Pattern

Use this approach for canvassing, face-to-face events, kiosks, or any scenario where the form must load fresh on each page load and should not reuse session state.

---

1) CSS (Styling the Injected iFrame)

The iframe is injected dynamically. Style it by targeting the iframe inside the container.

<style>
  .iframeContainer iframe {
    border: none;
    width: 780px;
    max-width: 100%;
    height: 680px;
  }

  @media (max-width: 410px) {
    .iframeContainer iframe {
      height: 780px;
    }
  }
</style>

---

2) Container + Required Script

Do not pass a style string into injectHeavySetIframe. All styling should come from CSS.

<!-- CUSTOMER-FACING, CANVASSING, OR EVENTS
     Fresh load each time; no session caching -->
<div id="iframeContainer" class="iframeContainer"></div>

<script>
  var script = document.createElement('script');
  script.src = "https://cdn.heavyset.tech/iframe-loader.min.js?v=1";
  script.onload = function() {
    window.injectHeavySetIframe(
      'REPLACE_WITH_YOUR_API_TOKEN_ID',
      'iframeContainer'
    );
  };
  document.body.appendChild(script);
</script>

---

Attribution Persistence (Optional)

If a page does not contain a form but must preserve attribution across navigation, include the loader script alone:

<!-- Include on pages without a form to ensure attribution persists -->
<!--
<script src="https://cdn.heavyset.tech/iframe-loader.min.js"></script>
-->

---

Notes

• The loader script is required to initialize the HeavySet Tech form in all scenarios.

• Use authHeavySetIframe for standard embedded forms.

• Use injectHeavySetIframe for canvassing, events, and customer-facing flows.

• Avoid inline styles; use CSS for all layout and sizing control.

• Ensure the loader script URL is allowed by your site’s Content Security Policy (CSP).