Learn how to use the Flipbook module to create a component for displaying PDF files!
This guide will demonstrate how you can create your very own Flipbook component. You can use the following sections to quickly navigate this guide:
Install the Flipbook Module
Creating a new (No-Code) Component
Adding the final touches
Demo
Install the Flipbook Module
You can easily install this module by navigating to General Settings > Modules. The Flipbook Module can be found in this list.
Creating a new (No-Code) Component
After installing the module, we can create a new component using the No-Code Editor.
As you can see, there are some new blocks you can use:
- Structures: Flipbook
- Flipbook Elements:
- PDF Viewer
- Navigation
- Zoom Button
Let's start off by adding the main structure: Flipbook.
After adding the main structure, we can use the navigation button & zoom button to add additional features to our component.
Note: You can add the naviation buttons / zoom buttons in a new content block to fully customize the PDF Viewer to your needs.
In this example, we have added a content block that holds a zoom button & navigation button.
Adding the final touches
We have now created our component, and it's time to add the necessary content! Let's start of with selecting a PDF, this can be done by clicking on "No file..." > Search File. This will open the Files library. 
Next up, click Edit Content. In this block we can add our navigation buttons & zoom buttons.
Note: To add a previous & next button we have to add 2 navigation buttons. The same applies to the zoom button!
Make sure that navigation button has been set to repeater in the no-code editor.
You can easily change the direction of the navigation button & the zoom button by using the dropdown menu.
Both, types of button come with "Edit Item", this allows you to show an icon or a text message.
When you have added the buttons you need, we can click the save button and close our component. You will now see your Flipbook Component in action!
Functionality
Flipbook also comes with various functionality panels to customize the component even more!
- Swipe Navigation: By default, you can use a swiping motion to navigate the pages of the PDF.
- Keyboard Navigation: This feature is turned off by default, if you want to navigate the PDF using arrow keys, you can enable this feature
