Iframe resizer

The iframe resizer script adjusts the height of the iframe to match the height of the form content. This prevents internal scrollbars and empty space inside the iframe.

Load the script on the parent page (the page that hosts the iframe). Place this tag inside <head>:

<script src="https://forms.kycaid.com/scripts/iframe-resizer.min.js"></script>

Pass the ID of your iframe to the start() method. You can use any ID, but it must be the same in the id attribute and in the start() call.

HTML example:

<iframe id="kycaid-verification-form" src="https://forms.kycaid.com/<form-id>" width="100%" frameborder="0"></iframe>

JavaScript example:

// Initialize the resizer with the ID of the iframe above
window.kycaid.iframeResizer.start('kycaid-verification-form');

If you remove the iframe from the DOM or navigate away from the verification, stop the resizer to free up browser resources:

window.kycaid.iframeResizer.stop();

• Handshake: When you call start(), the parent page starts to listen for height data from the Kycaid form.
• Dynamic calculation: When the content inside the iframe changes (for example, a new verification step appears), the form calculates the new height.
• Automatic update: The helper script receives the height and updates the CSS height property of the <iframe> element.

• Set width to 100%: Set width="100%" on the iframe so that it stays responsive on mobile devices. The script controls only the height.
• Wait for DOM load: Call start() after the iframe exists in the DOM. In React or Vue, call it inside useEffect or the mounted hook.
• No manual overrides: Do not set a fixed height for the iframe in CSS. A fixed height can conflict with the script.