How Do I Embed a Flipbook Into My Website?

One of the best features of Publuu flipbooks is the possibility to integrate it with your website. Your PDF converted into HTML5 document can be seamlessly fit to your store or embedded in your company profile.

Your flipbook can be embedded in your website in three ways:

• as a player with a background,
• as a player with no background,
• as a button.

Check below how your flipbook will look when embedded in each way.

 

A player with a background

An iframe player embedded into your website is a complete presentation of your flipbook, containing the personalized background and allowing your readers to use various options such as downloading, sharing, or printing directly from the player. It can be viewed in full-screen mode and navigated easily thanks to page thumbnails, a table of contents, or a slider. Take a look at the example below:

 

A player with no background

Your flipbook will again be published in a form of an iframe player, but this time without the background and additional features. It will look just like an integral part of your website, as the example below. Your readers can only use the arrows to turn the pages of your publication easily.

 

A button

The third way is to place your flipbook as a simple, clickable button, as presented below. Once clicked, it will show your full-sized flipbook in a separate tab in a browser or as a pop-up window – it’s up to you. Publuu allows you to set the measurements of the button and customize its look to suit your website best.

If you like any of the above flipbook’s presentations, carry on reading this guide to find out how to embed a flipbook on your own website!

 

Embedding your flipbook – a manual

To Embed your flipbook log on to your main site and choose the Embed option under it – marked with the triangular brackets. You will be transported to the Embed Editor.

You can also access this panel from the Customize menu.

You can choose, using tabs on the left side, whether you want to embed your eBook as a ready-to-use player with the background or a player with no background (in this case use the FLIPBOOK tab) or a button in form of your PDF cover that will open your flipbook in a separate browser window (use the BUTTON tab).

Embed as a player

You can decide the dimension of the flipbook window.

You can also toggle “responsive width” whether you want the book to be adjusted to the width of the container (html container, where embed code will be pasted) automatically.

You can also choose whether you want to use the site background or the background you have defined for that flipbook in its Customization panel .

 

Finally, you can choose what is going to be the first page of the opened flipbook.

 

Embed as a button

If you have chosen the Button option, decide whether you want the flipbook to open in a pop up window or new browser tab.

In the button tab you can adjust the dimensions of the button to fit your website. Just set the height and the width will be adjusted automatically.

And as above you can select the page that will display after clicking on the button – this might not be the same as a cover.

Inserting an embed code

After you have decided the details you want, Publuu will produce an embed code visible above the flipbook, in the upper-right corner. Click on the ‘Copy’ button to copy it to your clipboard.

 

Now you need to paste it to your website – but remember, this is not a text, but a piece of code.
In WordPress, to embed this element, you need to access your HTML viewer – edit the Page you want to embed your flipbook on. In the new editor, you can either select a block and choose the “Edit HTML” option (usually hidden under the three dots button) or simply switch to TEXT view and paste your embed code, like in screenshot below:

Other CMS systems might require similar solutions.

 

You may be also interested in: