Skip to content
  • There are no suggestions because the search field is empty.

How to embed a flipbook on your website with an embed code

Copy the iframe from the Share window, set its size and paste it into any page

Overview

To embed a flipbook on your website, open its Share window, go to the Embed tab and click Copy embed code, then paste the code into your page's HTML or an embed block. The code is an iframe, so it works in any website builder that accepts HTML. Every plan can embed a flipbook.

💡 Benefits of embedding a flipbook on your website
  • Readers stay on your site: they flip through the publication inside your page, with no new tab.
  • One code, always current: edit the flipbook and the embedded copy updates on its own.
  • Fits every screen: a responsive embed fills the width of its container on desktop and mobile.
  • Opens where you want: start the flipbook on any page, not only the cover.
  • Stays on your domains: domain restriction stops other sites from showing it.

Any website builder that accepts an iframe takes the same code, so one flipbook can sit on several sites at once.

👥 Where an embedded flipbook is helpful
  • E-commerce: a catalog or lookbook on a product or collection page.
  • Investor relations: quarterly and annual reports on the investors page.
  • Real estate: a property brochure on its listing page.
  • Internal communications: newsletters and handbooks on an intranet such as SharePoint or Confluence.

The Share window, and with it the embed code, appears only once the flipbook is published.

Requirements

  • Plan: every plan, including Free. On Free and Starter the embedded flipbook shows Flipsnack branding; Pro, Business and Enterprise remove it.
  • Flipbook: published as Public or Unlisted. Private flipbooks cannot be embedded on external sites.

How to get the embed code

  • In Content, click the three dots on the flipbook, or right-click it, and select Share.

The flipbook menu in Flipsnack Content with Share

You can also click Embed on the flipbook's Overview page. It opens the Share window on the Embed tab, so skip the next step.

The Embed action on a flipbook Overview page in Flipsnack

  • Click the Embed tab.
  • Set the Height in pixels. The default is 480. Responsive is on by default, so the flipbook fills the width of its container and Width is greyed out. To set a fixed Width, turn Responsive off.
  • In Start from page, enter the page the flipbook opens on. Page 1 is the cover.

The Width, Height, Start from page and Responsive options on the Embed tab of the Share window

The Domain restriction option with its Add link button on the Embed tab in Flipsnack

  • Click Copy embed code.

The Embed tab of the Share window in Flipsnack with the Copy embed code button highlighted

How to add the embed code to your website

Paste the code wherever your site accepts HTML: an HTML or embed block in a website builder, or the page's source code. Save and publish the page. When it works, the flipbook loads inside your page and readers turn its pages there:

For step-by-step help on a specific platform:

How to track your embedded flipbook

  • In Content, open the flipbook's menu and select Analytics.
  • In the Channels table, the Embed row counts the views that came from your website.

To see the same views in your own analytics tool, follow Add Google Tag Manager (GTM) to your flipbook player.

Troubleshooting

  • The flipbook does not appear on my page: Check that it is published as Public or Unlisted, that your site is listed under Domain restriction if you set one, and that your builder accepts iframes. More causes in Why is my embedded flipbook not appearing on my website?
  • The embed shows Flipsnack branding: Free and Starter embeds carry it. Pro, Business and Enterprise remove it.
  • The flipbook opens on the wrong page: Change Start from page, copy the code again and replace the old code on your site.
  • The flipbook is too narrow or cut off on mobile: Turn Responsive on, copy the code again and replace the old code.

Additional tips / FAQs

  • If I edit the flipbook, does the embed update? Yes. Edits to the flipbook appear on your website automatically. Changes to the embed settings, such as Height, Start from page or Responsive, need a new code.
  • Can I embed a bookshelf? Yes. Open the bookshelf's menu in Content and select More options > Embed.
  • Can I embed a flipbook with a transparent background? The Embed tab has no transparent background option. Other users share workarounds on the Flipsnack community page.

Next steps

Need expert support?

Our team is here to help. Connect with our team experts or message us via the live chat for personalized assistance.