How to Embed a Digital Publication on Your Own Website

Publishing a digital edition is two decisions, not one: how it reads, and where it lives. Most tools answer the first beautifully and quietly make the second decision for you — your catalogue ends up on a page you do not own, under branding that is not yours, with an audience you cannot invoice.

This guide covers the second decision: putting the reader inside your own site, and the handful of details that separate a clean embed from one that breaks on mobile, gets blocked by your CMS, or 404s on a Tuesday because somebody renamed a domain.

Why embed instead of just posting a link

A link to a hosting platform is genuinely easier. It costs nothing and takes ten seconds. Embedding costs about ten minutes and buys you back:

• The visit. Traffic stays on your URL, where your navigation, your enquiry form and your product buttons also live. A link sends readers somewhere you are not.
• The context. An embed can sit directly under the product description it belongs to, or between two articles, or inside a client's project page.
• The presentation. Width, height, surrounding layout, whether it appears above or below the fold.

One honest caveat about search: content inside an iframe is not reliably treated as content on your page. If you want the search engines to see substance, write a real paragraph and a table of contents into the page itself and let the embedded reader carry the experience. Do not embed a publication onto a blank page and expect rankings.

Step 1: Turn embedding on for that publication

Embedding is usually a per-publication setting rather than an account-wide one, and it should be off by default — you want to decide, issue by issue, what may appear on your site.

In Flipable this is the Embed enabled switch on the catalogue's detail page. When it is off, that catalogue's embed URL returns a 404 everywhere, which is exactly the behaviour you want when a publication is still under embargo or has been retired.

The publication also needs to have finished converting. A catalogue that is still processing, or that failed, will not render — you will get a placeholder message rather than a reader.

Step 2: Whitelist the domain that will host it

Before the code works, the domain has to be registered. Flipable keeps an allowlist per workspace under Settings → Domains & Embed → Allowed Domains, and an iframe from any domain outside it is refused.

Two things worth understanding about how that matching works:

• A domain covers all of its subdomains. Adding example.com also permits www.example.com, shop.example.com and staging.example.com. For most sites this means exactly one entry is needed.
• It matches on the root domain, not the full URL. blog.example.com and example.com are the same entry; example.net is a different one. So a campaign microsite on another root domain needs its own entry.

Domain slots are capped by plan: one on Free, Starter and Pro, two on Growth, three on Business. If you publish on three or more unrelated root domains, plan for that before you sign client contracts — not after.

Step 3: Copy the embed code and paste it as HTML

Each catalogue's detail page gives you a ready-made snippet once embedding is enabled and a token exists:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Paste it into something that accepts raw HTML, not a rich-text field:

• WordPress: a Custom HTML block
• Webflow: an Embed element
• Shopify: a Custom Liquid section
• Squarespace: a Code block
• Hand-coded site: anywhere in the body

If your CMS gives you both a "visual" and an "HTML" editing mode, use the HTML mode. Rich-text editors are the single most common way embeds die silently, because they happily convert straight quotes into typographic ones and the browser then reads garbage.

Step 4: Fix the height before anyone opens it on a phone

This is the step that gets skipped, and it is the one readers notice.

The embedded page fills whatever height you give it. A height="600" iframe means the reader lives inside a 600-pixel window — comfortable on a desktop, and on a phone it becomes a scrollable box inside your already-scrollable page. Two competing scroll areas on a touchscreen is a genuinely bad experience; people blame the publication, not the container.

A more robust default:

<iframe src="https://flipable.co/embed/{TOKEN}/{CATALOG_ID}"
        title="Autumn/Winter catalogue"
        style="width:100%;height:clamp(500px,75vh,900px);border:0"
        allowfullscreen></iframe>

• clamp() gives phones a usable window, lets desktop grow, and stops tablets getting a stubby strip.
• frameborder is obsolete; border:0 is how that job is done now.
• Set an explicit title. It is the accessible name of the frame, and it costs you nothing.
• For a full-bleed landing page, height:100vh works — but account for a sticky header, or switch to 100dvh so mobile browser chrome does not eat the bottom of the reader.

Then look at it on a real phone, in portrait and landscape, before you send the link to anyone important.

Step 5: Decide where in the page it loads

If the publication is the point of the page, put it in the first screen and do not lazy-load it. If it supports the page — a spec sheet inside a long product description — add loading="lazy" so visitors who never scroll that far never download it.

One consequence worth knowing: views are counted when the reader actually loads. A lazy embed that sits below the fold will show lower view counts than the page itself, because a share of visitors never reached it. That is not a bug in the counting; it is a description of behaviour. Judge an embed's performance against the scroll depth of the page it lives on.

What actually protects a publication

Three mechanisms, and it is worth knowing precisely how far each one goes:

• An unguessable URL. The embed path carries a workspace-level token. Nobody can guess a catalogue's embed address, so a URL is effectively a secret — treat it like one and do not paste it into public forums.
• A domain allowlist plus frame-ancestors. Only whitelisted hosts may frame the publication; the browser is told this via a Content-Security-Policy built from your own allowed-domain list, so unauthorised embedding fails rather than merely looking wrong.
• A per-catalogue kill switch. Turning embedding off breaks every embed of that publication immediately, wherever it is. This is your pull-down button.

Now the boundary, said plainly: an allowlist is not a paywall. Opening an embed URL directly in a browser tab, rather than inside an iframe, is allowed — the domain check is about who may frame your content, not who may read it. If a publication is genuinely behind a subscription, gate the page that contains the embed with your own authentication. The tool's job ends at "who may frame this"; "who may read this" is your site's job.

When it does not work, check in this order

1. Embedding off for that catalogue. Symptom is a 404 in the frame. Most common cause by a wide margin.
2. The host domain is not whitelisted. Re-read the exact root domain in your browser's address bar on the page doing the embedding.
3. Wrong catalogue ID or a token copied from another workspace. These are long and opaque; pasting the middle of one is easy.
4. Conversion still running, or failed. Symptom is a placeholder message or an error banner on the catalogue page.
5. Your own site blocks frames. A strict frame-src in your Content-Security-Policy, or a security plugin doing the same thing for you, will block third-party iframes — including yours.
6. HTTPS mismatch. Embedding an HTTPS reader into an HTTP page is allowed; the reverse is where browsers start complaining. Fix the certificate.
7. The CMS mangled the markup. View source on the live page and check the attributes are still quoted properly.

Pre-flight checklist

• Embedding enabled for that specific publication
• Root domain whitelisted (subdomains come free)
• Snippet pasted into an HTML block, not a rich-text field
• title attribute set on the frame
• Height tested on a phone in portrait and landscape
• Below-the-fold embeds set to loading="lazy"
• Page contains real text if you need it indexed
• Analytics checked the next day, not the next quarter

Try it on one publication

The fastest way to find out whether embedding fits your site is to run a single existing PDF through it — one catalogue, one domain, one page, checked on a phone. That is deliberately the shape of the free plan: one publication, 100 pages per catalogue, one embed domain, with a small "Powered by Flipable" badge on the reader. The badge is our advertising — it is why the plan is this generous. If the badge is a problem for your client work, that is what paid plans remove.