How to get and embed your flipbook's code on a website

Overview

Transform your website into a dynamic content hub by seamlessly integrating interactive publications. This enterprise-grade integration capability enables your organization to deliver premium content experiences while maintaining complete control over presentation and user engagement.

💡 Benefits of embedding a flipbook on your website

Integrates content seamlessly with an existing web presence.
Provides professional presentation format that reflects your brand standards.
Keeps visitors engaged on your website longer.
See exactly how your website visitors interact with your embedded flipbook.

Requirements

Any premium subscription (Pro & above to embed without watermark).

What is the embed code?

The embed code is a piece of HTML code that allows you to integrate your interactive page-flip catalog into a website, blog, or intranet.

Below, you can see an example of a Flipsnack catalog embedded on a website. The image is a screenshot of a flipbook placed on a website. If you want to see it on the site, click on the image, then scroll down until you reach the section captured in the screenshot.

In the example above, the catalog is placed on the left, but you can put the animated flipbook wherever you want on any page. It can be bigger or smaller, depending on your preference.

How do I get the embed code?

Step 1: Publish your flipbook

Critical first step: Before embedding, ensure your flipbook is published with the correct visibility settings.

Important: Private flipbooks cannot be embedded on external sites due to security protocols. This helps maintain control over your sensitive content distribution.

Step 2: Access embed options

On Content, click the three vertical dots out to the far right of your flipbook.

Step 3: Customize your embed

Once clicked, you will be taken to a new tab. Here, click on the Embed code.

Here you have a few options to customize it:

You can change the size of the flipbook. If you want the flipbook to be mobile-friendly and adapt the layout to the viewing environment by using fluid, proportion-based grids and flexible images, check the Responsive box. It's on by default. Also, you can restrict where the flipbook can be embedded by setting allowed domains.

If you encounter any issues while embedding, you can contact us via live chat or easily submit a ticket.

Important: By default, the flipbook will display the cover when visitors check the embedded flipbook, but you can change that. If you want to feature an article on page 5, update the Start from page number.

Step 4: Copy your embed code

Now, you just have to copy the embed code, so click on the Copy button, which is right next to the embed code box.

How do I add the embed code to my website?

On your website, paste the code in an HTML-supporting medium, like the page's HTML code, or in an embed box. Our embed code is an iframe and can be integrated into any medium that supports HTML iframe integration.

Monitor your embedded flipbook's performance.

Follow these steps to see how readers engage with your flipbook.

Additional tips / FAQs

If I modify the flipbook, will the embed code automatically be updated? Yes, if you edit the flipbook after you embed it somewhere, the changes will appear automatically on your website. You don't have to re-embed it.
How to embed a flipbook with a transparent background? See what other users are saying about this on our Flipsnack community page.

Next steps

Integrate the GTM ID in the flipbook to track analytics for your embedded flipbook
Check out our article on domain restriction to make sure your flipbook's embedding will work only on your site.

Need expert support?

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