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
  • Verify if the target website allows embedding via iframe, as some sites restrict this with settings like X-Frame-Options: DENY or SAMEORIGIN.
  • Open your Webflow project, add an HTML embed element, and enter the iframe code with appropriate width and height settings.
  • Publish your site to test the iframe, and consider alternatives like screenshots if embedding is blocked.

Using iframes to preview a website within another website is a common practice. However, certain websites might restrict this functionality due to security settings like X-Frame-Options. Here’s how you can attempt this:

​

1. Check Website Permissions

  • Verify if the target website allows embedding via iframe. If the website sets headers like X-Frame-Options: DENY or SAMEORIGIN, it cannot be embedded in an iframe.

  

2. Insert the Iframe in Webflow

  • Open the Webflow project where you want the iframe.
  • Add an HTML embed element to the desired section of your page.
  • Enter the iframe code in the HTML embed, e.g., <iframe src="https://targetwebsite.com" width="100%" height="600" loading="lazy"></iframe>.

  

3. Adjust Iframe Settings

  • Modify the width and height attributes to fit the design of your Webflow page.
  • Consider using loading="lazy" to improve the initial load time of your page.

​

4. Test the Embedding

  • Publish your Webflow site to a staging environment.
  • Check if the iframe loads the target website correctly. Ensure no browser or console errors related to the iframe.

​

5. Fallbacks and Alternatives

  • Consider using screenshots or videos of the target site if embedding is not possible.
  • Explore web browsers' developer tools to understand limitations if the iframe is being blocked.

​

Summary

To embed a preview of another website using an iframe in Webflow, first, ensure the target site allows embedding. Then, use an HTML embed element within Webflow to add the iframe. Adjust the iframe settings to match your design, and test the functionality. Be aware that some sites may not permit iframe embedding due to security settings.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I modify the heading styles in a rich text field in Webflow?
How can I use getCurrentLang() in Webflow to determine the language code for a multi-language website with Weglot translation integration?
Why does the background image appear on either side of the nav bar in my quote slider in Webflow, even though its width is set at 100%? Also, why is there a thin gray line along the top of the slide wrap?
Will Webflow Ecommerce allow the addition of form fields and customization of checkbox default status in the checkout form, or is this a permanent limitation?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
Can I copy and paste content from one template to my own Webflow project without using side-by-side browsers?
How can I create a self-generating blog post navigation menu using Webflow?
Can I use Webflow with a CMS and a limited builder on my site? Is there a way to embed a Webflow page using an iframe generator?
How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.
Can I create a form in Webflow that submits and creates new CMS items, without using any third-party integrations or tools?
Can I add hosting to someone else's Webflow Pro account and then transfer the hosted websites to my own account in the future? I am new to web building and Webflow.
Can Webflow support features like personalization and A/B testing found in landing page builders such as Instapage and Unbounce?
How can I make my website wider in Webflow for larger monitors?
How can I add a meta noindex to unfinished CMS pages in Webflow?
How can I disable scrolling on everything except the modal div in Webflow using custom code?
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?