WordPress is the most used web platform in the world and of course, you can also add flipbooks to your website if you are using it. In this guide, we will see two different ways to embed flipbooks. The simplest and, at the same time, flexible and powerful is to use the PDF Flipbook WordPress Plugin. But if you can't add plugins to your website, we will also see how you can add the embed code directly.
- Add with the PDF Flipbook Plugin
- Step 1: Install the plugin
- Step 2: Create or find the flipbook
- Step 3: Paste shortcode or add Gutenberg block
- Add with embed code directly
- Step 1: Edit page or post
- Step 2: Add a custom HTML block
- Step 3: Copy embed code from Heyzine
- Step 4: Paste the embed code to WordPress and save
Add with the PDF Flipbook Plugin
Step 1: Install the plugin
The first step is to install the PDF Flipbook plugin by navigating to the Plugins section in the WordPress dashboard. Click on Add New Plugin, and in the search bar, type "Heyzine" to locate the plugin. Once you find it, click Install Now, and within a few seconds simply click the Activate button to enable the plugin.
Sometimes, the plugin search may be disabled on your site. When this happens, you can download the ZIP file from the Flipbook Plugin page on WordPress.org. In your WordPress dashboard, again, go to the Plugins section, Add New Plugin, and then select the Upload Plugin button at the top. Choose the downloaded ZIP file and click Install Now and once complete, click Activate.
Create or find the flipbook
Now that the plugin is installed and activated, you need to connect your Heyzine account. If you already have one, simply sign in; otherwise, sign up for a new account directly from the plugin interface. Once connected, you will see a list of your existing flipbooks. If you don’t have any flipbooks yet, you can create one by clicking the Add New Flipbook button.
To create a flipbook, select a file from your WordPress Media Library and click Create Flipbook and it will show up in the list in a few seconds. From the list, you can click Customize to open the flipbook editor, where you can adjust settings such as flipbook controls, page-turning style, background, and more. When everything is ready use the button to copy the Shortcode.
Paste Shortcode or add Gutenberg block
Finally, we will add the flipbook to the site. Begin by locating the page or post where you want it displayed and open it for editing. If you're using the Gutenberg editor, the Heyzine plugin provides a dedicated block. Simply type "/Heyzine" to add it, and use the sidebar settings to select the flipbook you want to display. You can also configure additional options, such as specifying the starting page of the flipbook or enabling a small page-fold animation to encourage visitors to flip through the pages.
If you're not using the Gutenberg editor, you can still add the flipbook by pasting its shortcode directly into the page or post. Use the shortcode generator in the General section to include the custom options.
Add with embed code directly
Step 1: Edit the WordPress page or post
We will start by looking for the WordPress page or post where we want to embed the flipbook, looking through the list, and clicking on "Edit".
Step 2: Add a custom HTML block
Now we have to choose the place where we want the flipbook to appear embedded and click on the small plus icon on the right of the line to add a new block and select "Custom HTML".
Step 3: Copy embed code from Heyzine
The next step is to go to the heyzine dashboard and choose the flipbook we want to embed, if you don't have any flipbook yet, you can follow with one of our getting started with flipbooks guides.
When we know which one we want to embed, just click on it, "Share", "Web / embed" on the top, and click "Copy Html code".
Step 4: Paste the embed code to WordPress and save
Finally and back to WordPress, we have to paste the code into the new block we previously created.
Click on "Preview" to check everything is fine and adjust the "width" and the "height" from the code to make it look the size you want. For example "width: 95%; height: 600px" is a common good size.
And the only thing left to do is to click on "Update" to save and publish the changes to our WordPress site.
