{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Iframe resizer"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"iframe-resizer","__idx":0},"children":["Iframe resizer"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"include-the-helper-script","__idx":1},"children":["Include the helper script"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Load the script on the parent page (the page that hosts the iframe). Place this tag inside ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<head>"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"https://forms.kycaid.com/scripts/iframe-resizer.min.js\"></script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"initialize-the-resizer","__idx":2},"children":["Initialize the resizer"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass the ID of your iframe to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start()"]}," method. You can use any ID, but it must be the same in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," attribute and in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start()"]}," call."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HTML example:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<iframe id=\"kycaid-verification-form\" src=\"https://forms.kycaid.com/<form-id>\" width=\"100%\" frameborder=\"0\"></iframe>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["JavaScript example:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Initialize the resizer with the ID of the iframe above\nwindow.kycaid.iframeResizer.start('kycaid-verification-form');\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"stop-the-resizer-optional","__idx":3},"children":["Stop the resizer (optional)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you remove the iframe from the DOM or navigate away from the verification, stop the resizer to free up browser resources:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"window.kycaid.iframeResizer.stop();\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works","__idx":4},"children":["How it works"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Handshake:"]}," When you call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start()"]},", the parent page starts to listen for height data from the Kycaid form."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Dynamic calculation:"]}," When the content inside the iframe changes (for example, a new verification step appears), the form calculates the new height."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Automatic update:"]}," The helper script receives the height and updates the CSS ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}," property of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<iframe>"]}," element."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":5},"children":["Best practices"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Set width to 100%:"]}," Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width=\"100%\""]}," on the iframe so that it stays responsive on mobile devices. The script controls only the height."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Wait for DOM load:"]}," Call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start()"]}," after the iframe exists in the DOM. In React or Vue, call it inside ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useEffect"]}," or the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mounted"]}," hook."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["No manual overrides:"]}," Do not set a fixed height for the iframe in CSS. A fixed height can conflict with the script."]}]}]},"headings":[{"value":"Iframe resizer","id":"iframe-resizer","depth":1},{"value":"Include the helper script","id":"include-the-helper-script","depth":2},{"value":"Initialize the resizer","id":"initialize-the-resizer","depth":2},{"value":"Stop the resizer (optional)","id":"stop-the-resizer-optional","depth":2},{"value":"How it works","id":"how-it-works","depth":2},{"value":"Best practices","id":"best-practices","depth":2}],"frontmatter":{"seo":{"title":"Iframe resizer"}},"lastModified":"2026-10-07T07:58:42.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/iframe-resizer","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}