Troubleshooting the Preview Feature

We recently implemented a new previewing experience where you can view your posts and pages on an iFrame. But if you are getting an error about iFrames being blocked by your site, you have three options for getting past this.

Option 1: Click on the 'Fullscreen' button which will open a new tab that takes you directly to the destination page like we used to:

Option 2: Go to Settings > Previews > and disable iFrame previewing by un-ticking the 'Preview content in the ButterCMS iframe' checkbox. This skips using the panel for iFrame altogether and we take you directly to the end URL.

Setting up previews screenshot

Option 3: Enable your site to support iFrame Previewing, which allows adding a header or modifying one of the headers on your site to support iFrame. Here is the message you may see and instructions for Enabling iframe Previewing:

Developer Instructions: Enable iframe previewing

Your website is blocking our iframe. It likely has a security X-Frame-Options header which blocks previewing within Butter.
Disable it or use Content-Security-Policy (CSP) frame-ancestors directive to allow Butter to display iframes with your website:
Content-Security-Policy: frame-ancestors 'self' https://buttercms.com;

Still have a question?

Our Customer Success team is standing by to help.