iFrame

An iFrame (inline frame) is an HTML element that embeds one web page inside another. Defined by the `<iframe>` tag, it creates an independent rectangular window within your page that loads and displays content from a separate URL. The embedded content maintains its own document context — with separate DOM, styles, and scripts — isolated from the host page. iFrames are widely used to embed videos, maps, forms, payment gateways, and interactive widgets without requiring the host page to handle that content's code or styling directly.

For digital publishers, iFrames provide the simplest and most universal way to place an interactive [flipbook](/glossary/flipbook) or document viewer directly on an existing website. Visitors can browse the publication without leaving the page, which keeps them engaged on your site rather than redirecting them to a third-party link. This improves time on page, reduces [bounce rates](/glossary/bounce-rate), and integrates the reading experience seamlessly into your existing design. Because iFrames are a native HTML feature supported by every modern browser, they work across WordPress, Shopify, Squarespace, custom-coded sites, and virtually any CMS.

FlipLink generates a ready-to-use iFrame [embed code](/glossary/embed-code) for every published flipbook and document. You copy the embed snippet from your FlipLink dashboard and paste it into your website's HTML, CMS editor, or landing page builder. The iFrame loads the full FlipLink viewer — including [page-flip animations](/glossary/page-flip-animation), [CTA buttons](/glossary/call-to-action-cta), [lead capture forms](/glossary/lead-capture), and [analytics tracking](/glossary/analytics-dashboard) — within the dimensions you specify. FlipLink's [responsive embed](/features/sharing-and-distribution) ensures the iFrame adapts to any screen size automatically. FlipLink also offers a [clickable image embed](/features/clickable-image-embed) option as a lightweight alternative that links to the full viewer.

An iFrame embed uses this basic HTML structure: ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` Key attributes that affect behavior: - **`src`** — The URL of the content to embed. FlipLink provides this URL for each publication. - **`width` / `height`** — Controls the visible area. FlipLink's responsive embed code uses percentage-based widths for fluid layouts. - **`sandbox`** — Restricts what the embedded content can do (e.g., block forms, scripts, or popups). FlipLink's embed code is configured to allow the interactions needed for full functionality. - **`loading="lazy"`** — Defers loading the iFrame until the user scrolls near it, improving initial page load performance. - **`allow`** — Specifies feature permissions like fullscreen mode, which FlipLink uses for immersive reading.

iFrames introduce a trust boundary between the host page and the embedded content. Understanding the security model helps you embed content safely: - **Same-origin policy** — Browsers prevent the host page from accessing the DOM of a cross-origin iFrame, and vice versa. This means your website cannot read or manipulate the FlipLink viewer's internals, and the embedded viewer cannot access your site's cookies or data. - **[Domain whitelisting](/glossary/domain-whitelisting)** — FlipLink allows you to restrict which domains can embed your publications, preventing unauthorized sites from displaying your content in their own iFrames. - **Content Security Policy (CSP)** — If your website uses strict CSP headers, you may need to add FlipLink's domain to your `frame-src` directive to allow the iFrame to load. - **Clickjacking protection** — FlipLink sets appropriate `X-Frame-Options` and CSP headers to control where its viewer can be embedded, while allowing your authorized domains.

**"iFrames are bad for SEO."** Search engines can follow links inside iFrames and may index the embedded content separately, but the content does not contribute to the host page's SEO ranking. For flipbooks, this is not a concern — the SEO value lives on your host page's own content, headings, and metadata, while the flipbook serves as an engagement tool. **"iFrames always slow down my page."** An iFrame itself adds minimal overhead. Performance issues arise from what the iFrame loads. Using `loading="lazy"` ensures the flipbook only loads when the user scrolls to it, keeping your initial page load fast. **"iFrames are outdated technology."** While some legacy uses of iFrames (like building page layouts) are indeed outdated, iFrame-based embedding remains the standard for third-party widgets, payment forms, and interactive content. Every major platform — YouTube, Google Maps, Stripe, and FlipLink — uses iFrames for embedding.

An iFrame is the standard, secure method for embedding interactive content like flipbooks on any website. It provides full functionality while keeping the embedded content isolated from your host page's code and styles.