Publish & embed

How to Embed a Flipbook on a Website

Short answer

Publish your flipbook, open Share → Embed in HB Flipbook, choose the size and reader options, press Copy Embed Code, then paste the code into an HTML or code block on your website. The flipbook then reads inside your page.

Updated · 5 min read

Why embed instead of linking?

Embedding keeps readers on your site. It suits catalogues on product pages, brochures on service pages and reports in a resource library. If you just want to send it to someone, sharing a link is simpler.

Part 1: copy your embed code from HB Flipbook

  1. Step 1: Publish the flipbook

    The embed only shows your flipbook once it's published.
  2. Step 2: Open Share → Embed

    In the editor, go to the Share tab and select Embed.
  3. Step 3: Choose a size

    Leave Responsive on to fit the width of the space you paste it into, or turn it off and set a fixed Width and Height.
  4. Step 4: Adjust the reader

    Choose the Start page, Viewer mode, background, corners and which controls appear. The Live Preview updates as you go.
  5. Step 5: Copy Embed Code

    Press Copy Embed Code. Your settings are saved with the publication.

Part 2: paste it into your website

Every website builder has a way to add custom HTML. Look for a block or element called “HTML”, “Custom HTML”, “Code” or “Embed”, paste the code there and save or publish the page.

  • Squarespace — Code block
  • WordPress — Custom HTML block
  • Shopify — Custom Liquid section
  • Wix — Embed HTML element
  • A hand-built site — paste it into the page's HTML where the flipbook should appear.

After it's embedded

Edits you make to the flipbook in HB Flipbook show up in the embed automatically. If you change embed settings such as size or controls, copy the new code and replace the old one. Views from embedded readers are counted in your flipbook views.

Frequently asked questions

Which plans can embed flipbooks?

Embedding is available on every plan. On Free, the embedded reader shows a small HB Flipbook attribution; paid plans can turn it off.

What's the difference between Responsive and a fixed size?

Responsive fits the width of its container and adjusts its height automatically using a small script included in the code. A fixed size uses a plain iframe with the width and height you set — use it where your site doesn't allow scripts.

Can I make the background transparent?

Yes. Set Embed background to transparent so your page's own background shows around the flipbook.

Do password and lead forms work in an embed?

Yes. Embedded readers see the cover and the same unlock step as on the direct link.

Keep learning

Ready to try it?

Turn your PDF into an interactive digital flipbook.

Upload your PDF

Free to start. No credit card required on the free plan.