How to 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.

To Embed your PDF log on to your main site and choose the Embed option under the flipbook – 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 FLIPBOOK to view on your webpage, or a BUTTON in form of your PDF cover that will open your flipbook in a a separate browser window.

The Flipbook tab

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.

 

Button tab

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.

 

Embedding the flipbook

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: