Can I have a webflow page in a generated iframe?

hey there guys :slight_smile:
hope you are all doing well? so this one will sound a bit weird I know but I need some webflow goodness on our site which already has a cms and a less-than-desirable builder. I do have the plan where I can export my code from webflow, but the cms only has this really basic html, css and javascript integration js is just for a script-tag. so I thought I would create a fab webflow page and impress the heck out of everyone and use an iframe-generator to embed the page and found this iframe generator that I thought I could embed with

I tested it with one of my weblow sites but when I tested the iframe it said that weblow was not allowing me to render.

webflow you are my only hope (excuse the star wars ref) but its true. :slight_smile: can I upgrade or do something to make it work?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

While it is possible for a site to block themselves from being IFRAME-embedded, to my knowledge Webflow doesn’t do that.

CORRECTION - Yes Webflow does block its staged ( *.webflow.io ) sites from embedding, but only in specific circumstances. Read my next post for details.

Here’s a demo of 3 examples;

  1. Google ( blocks )
  2. Webflow published site
  3. Webflow unpublished site

https://iframe-tests-4bf1dd.webflow.io/

https://preview.webflow.com/preview/iframe-tests-4bf1dd?utm_medium=preview_link&utm_source=designer&utm_content=iframe-tests-4bf1dd&preview=3146ceaf81f453ed5e9d17e291629abe&workflow=preview

It’s difficult to guess what you’re seeing without a readonly link to your site, and seeing the actual <iframe> code you’re embedding in your containing site.

My guess is something’s wrong with the iframe code, or that perhaps the containing site is breaking it on render. Can you share the link to the actual site where you have the IFRAME embedded?

Also, IFRAMEs are quite simple, but there are challenges as well- scrollbars, adapting to responsive breakpoints, security “across the frame” etc. As long as you’re doing a simple embed you should be fine.

1 Like

thank you so much for getting back to me :slight_smile:
I just took the generated iframe and plonked it into some html in an online editor to see if it worked. sadly though it didnt and I am sort of hoping its the generated iframe thats the problem although I cannot see what I did wrong. I did this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div><iframe src="https://lindas-fantastic-site-8f77f7.webflow.io/" name="myIFrame" scrolling="yes" width="100%" height="100%" style="border: none #000000;"></iframe></div>

    <script src="src/script.js"></script>
  </body>
</html>

and it can be viewed here:
https://949597.playcode.io/
didnt get around to designing anything yet so I just tested with a few templates
I used this one because its pretty :slight_smile:

https://preview.webflow.com/preview/lindas-fantastic-site-8f77f7?utm_medium=preview_link&utm_source=designer&utm_content=lindas-fantastic-site-8f77f7&preview=51c71ffd2f652811bbb34e3ebcb21566&workflow=preview

Hey, I learned something new. Very interesting.

YES you will be able to IFRAME-embed your Webflow site in another website, once it’s on a paid plan and published to a custom domain name. However you cannot IFRAME embed content from the *.webflow.io staging domain to another domain.

To test this, try embedding these two sites into your playcode.io page;

Both of these are the same site. The first one is the live site on a custom domain, and the second is the staging site on webflow.io.

This happens because web requests made to *.webflow.io return an HTTP header that specifies a content-security-policy restricting where that content can be IFRAME-hosted.

Specifically, it looks like this;

content-security-policy: frame-ancestors 'self' https://*.webflow.com http://*.webflow.com http://*.webflow.io http://webflow.com https://webflow.com

Webflow sites published to custom domains do not have that policy header.

Here’s a codepen demonstrating it as well.

1 Like

Thank you so much for your thorough reply thats absolutely perfect😍

1 Like