MENUPubluu.com - Menu

Help Guide > Sharing > How Do I Embed a Flipbook Into My Website? Sharing

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.

Embed feature


You can also access this panel from the Customize menu.

Use embed option


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 your eBook as a Flipbook



Embed as a player

You can decide the dimension of the flipbook window.

adjust flipbook embed size



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.

adjust width of the embed flipbook autamatically

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 .

Set embed flipbook background

 

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

Set embed flipbook page

 

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.

pop up window or new browser ta


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.

Embedded button dimension


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.

Set the embed page


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.

Embedding the flipbook with embed code

 

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:

Paste an embed code in WordPress

Other CMS systems might require similar solutions.

 

You may be also interested in:

Convert your PDF to flipbook today!

Go beyond boring PDF and create digital flipbook for free.
Register with Publuu for free today and check out all the smart options we prepared for you!

×
Not found!

Oops...

We can't find this flippbook!

It looks like the flipbook you would like to access has been deleted, or link has expired.

Please contact with person who shared it with you.

This site uses cookies. Learn more about the purpose of their use and changing cookie settings in your browser. By using this website you agree to the use of cookies in accordance with your current browser settings.
Close
Close
This site uses cookies. Learn more about the purpose of their use and changing cookie settings in your browser.