Embedding your Flippingbook as a clickable image

Product: FlippingBook Publisher

Our default embed code shows the Flippingbook as a ‘full publication’ on desktop computers. But it also possible to embed just a small image of the cover page. When your user clicks on this image, it will open the full flipbook. This is a perfect solution if you don’t have enough space on your page for the full publication, or if you have several publications.

The steps to embed a flipbook as a clickable cover image:

  1. Open the link to your online publication
  2. Click the ‘Share’ button
  3. Open the ‘Insert to Site’ tab on the Share window
  4. Change the ‘Embedding type’ to ‘Linkable Page’
  5. Press the ‘Copy’ button
  6. Now go to your Content Management System to edit the page which you want to embed your FlippingBook on, and paste the copied code in the correct place. How this is done exactly depends on your content management system. Typically you will have to use an option like ‘Insert code’, ‘Embed code’, or ‘Insert HTML’. Other CMSs will allow you to edit the HTML code directly. If in doubt, please contact your website administrator or the CMS documentation.   

It is possible to change how the flipbook is opened on desktops when your readers click on the image. This can be in a new window, or in a pop-up lightbox. (On mobile devices, it will always be in a new browser tab).

Example ‘new window’ Example ‘pop-up lightbox’

 The default behavior is to open it in a pop-up lightbox. If you want to change this, then you can look at the embed code in the Share window, you will see that there are several parameters - one of them is called data-fbc-lightbox="yes". If you change the “yes” to “no”, then the flipbook will be opened in a new browser tab.

 In the video below, you can see an example of the whole procedure, where we use the ‘Weebly’ CMS to embed a FlippingBook into another page.



Was this article helpful?
drift chat