Why does Live view show a picture of my page instead of the real site?

Live view is one screen (it used to be two, Live view and Real-time). It shows each page as a picture SEOmise takes of it: a cleaned copy without scripts or form values. Your visitors, the heat map and scroll depth are drawn on that picture. This works on every platform, whatever your site's security settings are.

Showing the real site

When SEOmise has checked that it works, the toolbar has a Show the real site switch. It shows your live website inside SEOmise, and the tracker on the page draws your visitors on it. Three things are needed:

1. Your site lets other sites show it inside theirs. Many sites tell browsers not to, with a header called X-Frame-Options (DENY or SAMEORIGIN) or with frame-ancestors in a Content-Security-Policy header. This is a sensible protection, and it is why Live view shows a picture instead.
2. The page is served over https.
3. The page carries the SEOmise tracker (live.js) with your site's key, not held back by a page optimiser, and loaded from the same SEOmise address you are using.

Live view checks your home page every few hours (staff choose how often) and tells you which of these is missing, in plain words. Check again (for people who manage the project) checks it at once after you change something.

If a page has no picture yet, Live view takes one as soon as you open it ("Taking a picture of this page…"). Capture from a visitor's browser is there for pages that are built by JavaScript.

How to allow it

You do not have to: Live view works fully on the picture. If you want the real site, allow SEOmise's address to show your pages in a frame, and keep blocking everyone else. Where the header comes from depends on your site:

• WordPress: the SEOmise connector already lets SEOmise show the site when the header comes from a plugin, as long as Live view is on. If the header stays, it is usually set by a security plugin, your page cache, your host's server settings or a service in front of the site (such as a CDN). Allow SEOmise's address in that place, then clear the page cache.
• Laravel and other PHP sites: the header is usually set by a middleware, a security package or the web server (Apache or Nginx). Send Content-Security-Policy: frame-ancestors 'self' plus SEOmise's address instead of X-Frame-Options for your public pages.
• Shopify, Wix, Squarespace, Webflow, HubSpot, Framer, Ghost and other hosted platforms: the platform sets these headers itself and most do not let you change them. Use the picture: everything works the same.
• Static sites and JavaScript front ends (Netlify, Vercel, GitHub Pages and similar): the headers come from your host's headers setting or configuration file. Add SEOmise's address to frame-ancestors.
• A CDN or firewall in front of the site (such as Cloudflare): check its security header or transform rules, which can add X-Frame-Options to every page.

Then press Check again in Live view. If you are not sure where the header comes from, keep the picture: nothing is lost.

What stays the same

Visitors on the site now, their cards and paths, follow and replay, heat maps, scroll depth, all pages, past visits, Settings and the Site pulse work the same on the picture and on the real site.