Button CTAs with Iframe Modals

Instead of navigating users away from your page when they click a CTA button, you can configure the button to open a URL inside an iframe modal overlay. This is commonly used for:

• •Booking or scheduling widgets (e.g., Calendly, Chili Piper)
• •Demo request forms embedded from HubSpot or Typeform
• •Video demos or product tours
• •Any external page you want to display without leaving your landing page

The simplest way to add an iframe modal is to describe what you want in the AI chat. For example:

When someone clicks the "Book a demo" button in the hero section, open https://calendly.com/your-link in an iframe modal overlay instead of navigating to a new page.

Flint will add the modal component and wire up the button click handler automatically.

You can also ask for specific modal behaviors:

Make the modal close when the user clicks outside of it or presses Escape. Set the modal width to 800px and center it on the screen.

You can customize the following modal behaviors by describing them in the AI chat:

• •Open trigger - Which button or link opens the modal
• •Close behavior - Close on outside click, Escape key, or only via an explicit close button
• •Size - Width and height of the modal (fixed dimensions or percentage of viewport)
• •Overlay - Background overlay color and opacity
• •Animation - Fade in, slide up, or instant open

Example prompt:

Update the demo modal to be 90% of the viewport width on mobile and 700px wide on desktop. Add a close button in the top right corner of the modal.

Iframe modals work with any URL that allows embedding (i.e., the target site does not set X-Frame-Options to deny). Common services that work well:

• •Calendly - Booking links
• •Typeform - Form embeds
• •Loom - Video demos
• •HubSpot meetings - Meeting scheduler links
• •Chili Piper - Meeting router links

Note: Some URLs (such as Google Docs or most full websites) block iframe embedding. If the content does not load in the modal, the target URL may be blocking iframes. In those cases, use the direct link approach (opening in a new tab) instead.

You can configure multiple buttons on the same page to open different modals:

The primary CTA button should open the Calendly link in a modal. The secondary CTA button should open our Typeform survey in a separate modal.

Flint will create separate modal instances for each button.

Modal content is blank - The target URL may be blocking iframe embedding. Try opening the URL directly in a browser and check if it loads. If it does, the issue may be specific to the iframe context.

Modal does not close - Ask Flint to update the close behavior: "Make the modal close when clicking outside or pressing Escape."

Modal does not open on button click - Make sure the correct button is connected to the modal trigger. Select the button on the canvas and ask Flint to verify the click handler.