My integration is working for read but not for edit. I see my Builder content load on the page when I visit my site. Unfortunately when I try to edit the page on my site, within the Builder portal editor context, it fails to load into the editor’s iframe. I can grab the “edit” URL out of the iframe (by inspecting it) and then visit that URL in another browser tab just fine, but it won’t load in the context of the editor. I just get the error popup from Builder that it’s having trouble loading the site into the editor.
I checked and my web server appears to be sending a response header to prevent iframes (I do not control the server, it’s a Platform-as-a-service) but your Chrome plugin is supposed to work around that? Cannot get it to work even with your plugin installed and running when I try to edit. Thoughts??
For now I’ve reverted to editing using the default blank background, which works without issues. That’s fine but was hoping to wow some people with a demo of the edit-in place/WYSIWYG feature.
Thanks for reaching out! If your site blocks iframes, there are two workarounds available. First I’d recommend using our “proxy previews” setting (go to your advanced settings from builder.io/account/organization hit “advanced settings” and turn on the “proxy previews” option) which will proxy your site in a way that allows iframe access. This works for most sites, but if it doesn’t for yours, try turning it back off and try our chrome extension. Just note that all users in your organization should download it as well.
If you’re still having trouble, please let me know and if you have any steps to reproduce, that would be helpful. Thanks!
Thanks for the suggestion @kara. I tried the proxy preview. While I am able to see my expected content page within the Builder editor preview iFrame, unfortunately the editor still fails with “Preview load error”. In other words, the page appears (no iframe blocking) but I cannot edit it. I’m kind of at a loss, but I do see an error in the console. I’m going to provide this in case the builder team can help identify the issue?? The Chrome plugin did not work for me at all.
NOTE: I removed my actual domain because there will be a different build up by the time you read this. If someone wants to troubleshoot we would need to coordinate on a time.
My URL loaded into the editor preview iFrame:
https://https___MYDOMAIN__net.preview.builder.codes/s/sw-us/test-first.html?builder.cachebuster=kgcq8i7o&builder.preview.includeSW=true&builder.useProxyBase=true&apiKey=MYAPIKEY&builder.cachebust=true&builder.preview=article&builder.noCache=true&builder_editing=true&builder.overrides.article=c9db470fd91243888fff25468bea9443&builder.overrides.c9db470fd91243888fff25468bea9443=c9db470fd91243888fff25468bea9443&builder.frameEditing=article
When that page is loaded, this script throws an error:
…script…
navigator.serviceWorker.register(’?builder.preview.sw=true&builder.preview.origin=https://MYDOMAIN.net’).then(function(registration) { registration.update()})
…/script…
The error is:
Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope (‘https://https___MYDOMAIN__net.preview.builder.codes/s/sw-us/’) with script (‘https://https___MYDOMAIN__net.preview.builder.codes/s/sw-us/test-first.html?builder.preview.sw=true&builder.preview.origin=https://MYDOMAIN.net’): The script has an unsupported MIME type (‘text/html’).
Thanks for the update. The proxy preview definitely has some limitations and wont’ work for every site. A few suggestions for next steps:
disable x-frame-options from your site (at least for the environment you will edit in Builder, such as dev or QA). this is the source of needing proxies and chrome extensions, and if the workarounds don’t work, just disable this header and the preview will work just fine on it’s own
disable the proxy and try the chrome extension again. we may have failed to point out that if the proxy isn’t working out, you should disable it when trying the chrome extension. to date we’ve never seen a case where the chrome extension didn’t solve this problem for customers, so I would suggest trying again and ensuring the proxy is off when using that