Compatibility:

WebSite X5 Evo and Pro

You know those little books that you flip through quickly with your thumb so that the images, viewed in quick succession, seem to come alive, simulating movement? There, those are the original flipbooks. Today, however, there are also digital flipbooks -  online publications that, starting from a .pdf file and thanks to video and audio animation effects, make the document browsable as if it were a paper book.


You could use flipbooks to present a product catalog on your website, as well as a restaurant menu, a photo album, a presentation, an actual book and so on. In short, a flipbook can be useful in many cases, and you can create one easily with the Flibook Optional Object. Check out some examples on the Preview page and get inspired. 



Let's assume you have a PDF file or a flyer presentation of your company, and that you want to create a flipbook to showcase on your website. You can either directly embed the flipbook on a page of your website, or set a link so it can be opened in a dedicated viewer. Let's see what you need to do in both cases:


Regardless of how you decide to proceed, you can customize the control bar that allows to browse and interact with the flipbook, as well as define the graphic style of the entire Object:


How to embed a flipbook on a web page

  • Open the page you want to place the flipbook on and add the Flipbook Object in the wished cell of the page layout grid. 
  • Double-click to open the Object and access its settings window, then stay in the General and start by importing the wished PDF File.
  • Choose Embed on the page as type of Display.
  • Define the Object Size in pixel. 


  • Open the page you want to place the flipbook on and add the Flipbook Object in the wished cell of the page layout grid.
#tip - The flipbook will still be displayed overlaying the page: the choice of the cell will only affect the position of the button or images linked to the flipbook. If you create a link, on the other hand, the choice of the cell is not relevant. 
  • Double-click to open the Object and access its settings window, then stay in the General and start by importing the wished PDF File.
  • This type choose Pop-up on click as type of Display.
  • Now move on to the Trigger section to create the link users will click on to access the flipbook. There are several options available:
    • Button: you can create a button and define its colors, text, formatting settings, borders and margins. The link to access the flipbook is set automatically.
    • Image: you can select an image either from your PC or from one of the online galleries and define its Size in pixel. Again, the link to access the flipbook is set automatically. This solution is particularly suitable if you want to add the link on the cover image of the document in question or create a banner inviting to check out a brochure or menu.
    • Link: in this case, you get a code to create the link to the flibook. You can then copy the code (CTRL+C) and paste it (CTRL+V) on another Object of the same page. In this way, the flipbook will be displayed when clicking this Object.  This solution is particularly suitable if you want to create a gallery with the cover images of different books, so that every cover image is linked to the corresponding flip book. 


How to set up the control bar

Whether you decide to embed it or call it up through a link, the flipbook will be opened through a viewer. This viewer reports some commands which the users can use to flip through pages and interact with them. You can customize the composition of this control bar in this way:

  • Stay in the General section of the Object settings window
  • In the Command List, you will find the commands that can be used in the viewer. Click to activate the ones you want to make available.


How to customize the flipbook graphic style

In order for the flipbook to better aligned to the overall style of your website page, you can customize all of its graphic elements: 

  • Open the Style section of the Object settings window.
  • You can start by defining the viewer background where the document will be displayed: you can import a Background image (either from your PC or by selecting it from the Online Libraries) or choose a Color (and possibly set the wished level of opacity). 
  • Set the Movement effect to be applied to the pages as the users flip through:  
    • Book: the effect simulates the actual pages of a book that then fold when flipped through; 
    • Scrolling: moving from one page to another is done by simple side-to-side scrolling.
  • As to the Control bar, you can define the Arrangement you prefer by selecting the wished layout and defining the colors of the different elements. 
  • Position Indicators are the buttons with arrows that allow you to flip through pages: you can set the size, the rounded corners and colors
  • Finally, decide t possibly activate the following Options:  
    • Enable sound: only available if you set Book as Movement type. It plays the sound of the page being flipped.
    • Single page: only available if you set Scrolling as Movement type. Only one page at a time is displayed, instead of two next to each other. 
    • Flip from right to left: it reverses the reading direction of the document. It is useful, for example, for texts in languages such as Japanese or Arabic.


Alternative solutions

With the Flipbook Object, you get an effect similar to actually flipping through a book or paper document, and you have a full range of customization options. If you want to make a PDF file available on your website, you can proceed in many equally good ways to do so. Your choice depends then on your necessities:


Are you curious to use this Object on your website pages? Install Flipbook now


You don't have enough Credits to buy this Object? Check out our Credit Packs