1. Overview
Iframes let you embed custom designs or external tools inside Portals or Landing Pages Pro without affecting the main layout. To ensure your embedded content works smoothly, follow the guidelines listed on this page.
2. Guidelines For Iframe
1. When using AI tools to generate custom designs or widgets
If you’re using AI to generate HTML, CSS, or JavaScript:
- Clearly specify that the code will run inside an iframe.
- Prompt the AI not to use external JavaScript libraries—stick to basic HTML, CSS, and JS to avoid slow load times and reduced conversions.
- Request the design in small sections, and embed each section in its own iframe instead of placing everything inside one large block.
- Ensure all buttons, scrolling, and interactions work within the iframe only, without depending on the full browser window.
2. Do not use AI-generated code for forms
If you need a form next to your custom design, use the built-in drag-and-drop form builder. Place your LSQ form beside a custom code block to create a hybrid layout—this ensures proper tracking, reliable submissions, and consistent behavior across portals and landing pages.
3. Adjust spacing, width, and styling for a seamless embed
To make the iframe full width, remove padding, and align it neatly with your layout, refer to the platform’s instructional video for spacing and container setup.
If the embedded content looks cut off or doesn’t extend fully at the bottom, add this CSS:
body, iframe {
height: 1000px;
}
This helps the iframe appear smooth and continuous, without borders or unwanted scrolling.
