How do I embed a flipbook into my website?

Product: FlippingBook Online

Embedding your flipbook allows your readers to view the content of your publication without leaving your webpage! This can be useful when you want to keep your customers on your website. You can embed either a thumbnail preview or the whole interactive flipbook. All it takes is pasting a short piece of code into your web page.

This article covers the following topics:

 

Getting embed code

To embed your flipbook into your website, you need to get embed code first. Here is how you can do it:

  1. Go to the Flipbooks section in your FlippingBook Online account.
  2. Hover over your flipbook and click on the Embed button

  3. In the pop-up window choose </> to your website  tab:

  4. Click on Settings to select embedding options. Here you get to choose if you want to embed an Interactive flipbook or a Cover:

  5. Click on Copy code to copy the embed code to clipboard
  6. Next, go to your Content Management System (CMS) to add this code to your web page. The exact way to do it depends on your CMS. You may need to insert the code in the correct place on the HTML page.

     

    Note! Embedding flipbooks requires you to have access to your website’s CMS and knowledge about using it.

  7. Finally, re-publish your page to your server.

As it is shown above, there are two ways to embed your flipbook into a website:

  • Interactive flipbook: embeds the full flipbook with page-flipping effect
  • Cover: embeds a small clickable cover, advisable if you don’t have enough space to embed a full flipbook

Let’s check out these two options separately.

 

Embedding an interactive flipbook

This option allows you to embed a fully interactive flipbook. It will be displayed like this when embedded into your page:

 

Discover India by if Only...

 

The Size setting, under Options, allows you to set the desired width and height of the embedded flipbook. Changing this preference will change the embed code accordingly.

Once you have embedded your book into your website, make sure it works and that it can be easily read. Otherwise, you might need to increase the size of the embedded flipbook.

Note! Your Interactive flipbook will work fine if its width exceeds 550px, and its height exceeds 300px. However, the flipbook will be displayed in the Click to Read mode, if its size is smaller than or equal to 550px in width or 300px in height.

 

Embedding a cover

This option embeds a small 250×188px thumbnail of the flipbook cover. If you choose Cover, here’s how it will look on your page:

Discover India by if Only...

You can set the flipbook to be opened in a pop-up window or a new tab when the cover thumbnail is clicked. To choose the way your flipbook should open, just go to +Options > Cover > View Behaviour and select the preferred option.

Note! Your flipbook will be displayed in the Cover mode if its size is less than 400px in width or 200px in height.

 

What happens to my embedded flipbooks if my subscription expires?

Any content that you upload to FlippingBook Online is available as long as your subscription is active. When you embed your flipbook to your website, you don’t create a copy of it. You actually create a small window that directly shows your flipbook on FlippingBook Online on your page. This means that when you end your subscription (or stop paying for it), your books will go offline and stop working when either embedded or accessed directly. We recommend ensuring that your subscription is active and your payment information is valid. You may check your current subscription status and resume it in your user account.

Related articles

If you want to embed your flipbook into Wordpress, please check the article Embedding flipbook to your WordPress.

If you want to embed your flipbook into Sharepoint Online, please check the article How to embed into Sharepoint Online?

Was this article helpful?
;
drift chat