How can I achieve the preview effect for a website like in the "Discover" section within Webflow using an iframe? Can this be done with any site? Thank you.

TL;DR
  • Create a custom code component in Webflow with an <iframe> tag and adjust its attributes for size and lazy loading.
  • Style the iframe using CSS for responsiveness and ensure it meets security and accessibility standards.
  • Test the iframe in Webflow to check proper display and adjust settings as needed, noting that some sites may not support embedding.

To create a preview effect similar to the "Discover" section in Webflow using an iframe, follow these steps. Note that using iframes to display website previews may have limitations based on the site's settings.

​

1. Create an Iframe Element

  • Add a custom code component in Webflow where you want the preview effect to occur.
  • Insert the <iframe> tag with the src attribute pointing to the desired website URL. For example, <iframe src="https://example.com" ...></iframe>.
  • Set attributes such as width, height, and loading="lazy" to define the iframe's dimensions and loading behavior.

​

2. Adjust Iframe Styles

  • Use CSS to style the iframe according to your design requirements. You can control the border, padding, and other styles via Webflow's design panel or inline CSS.
  • Ensure the iframe is responsive to different screen sizes if necessary.

​

3. Consider Security and Accessibility

  • Be aware that some websites might not allow embedding via iframes due to their X-Frame-Options settings, which might result in a blank iframe or an error message.
  • Check the accessibility of the iframe content to ensure it is usable for all users, including those using screen readers.

​

4. Test & Preview

  • Preview your Webflow project to test the iframe and ensure that the website you want to embed displays correctly.
  • Adjust the iframe settings as needed to improve performance or design alignment.

​

Summary

Creating a preview effect using an iframe involves embedding an <iframe> element with the target site, styling it using CSS, and considering security and accessibility concerns. While this method can work with many sites, those restricting iframe embedding won't display as expected.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a customizable slider with a custom slider navigation, allowing users to switch slides by hovering over the buttons in Webflow?
Can Webflow make an API call to my NodeJS server in the backend to retrieve personalized content and integrate with my web application?
How can I add a ratings and testimonials section to my Webflow site using free third-party integrations or embed options?
How can I send a confirmation email and add a new member's email address to Mailchimp in Webflow if the membership form is not a form?
How can I resolve the issue of my website not functioning properly on mobile sizes in Webflow?
Can the 'stock' mobile nav in Webflow be edited to fill the entire screen and ensure menu items are centered both vertically and horizontally, potentially using a flexbox? The current issue is that when the menu is open, it covers up the close button. Assistance would be greatly appreciated.
How can I make the blue gradient in the background of my Webflow site follow the cursor all the time, even when hovering over cards or images on the page?
How can I prevent elements in the header of my Webflow website from being positioned incorrectly and cut off on Safari browsers? I have already tried positioning the elements with absolute positioning and setting the left and right tags to auto, but the margin I added to the left seems to be larger on Safari compared to Chrome.
How can I implement the functionality I created using HTML/CSS/JavaScript in Webflow?
What could be causing my homepage to appear wider than the screen size on the published Webflow site, resulting in a horizontal scrollbar, even though all elements are set to 100vw?
How can I disable the fullpage.js scroll after the first slide on a Webflow page?
How can I trigger a typing text effect within the same wrapper in Webflow, first vertically and then horizontally?
Is it possible to add a native cookie consent that appears only once on the first page load in Webflow? Can this be done using a modal wrapper in Webflow without any third party tools or integrations? If not, are there any suggestions or advice on adding a cookie consent to comply with European regulations?
How can I remove autoplay from a video background in Webflow and play the video with a button click? The code I have tried doesn't seem to work.
Does Webflow use load testing tools and third-party integrations to ensure peak performance and fast hosting for websites?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?