How to Embed Flipbook to WordPress Website in 4 Easy Steps

In this tutorial - How to embed flipbook to WordPress website, I have explained four easy steps using which you can add flipbook on your site.

Heyzine is a popular flipbook creator tool using which you can create unlimited flipbooks with unlimited pages. And if you compare the tool with other flipbook makers in the industry, the pricing plans of Heyzine is much cheaper and affordable.

Let's get started with this tutorial.

Note: This article contains affiliate links. When you click an affiliate link and make a purchase, we get a small compensation at no cost to you. See our Privacy Policy and Disclaimer for more info.

How to Add Flipbook to a Website?

First, we will open the Home Page of Heyzine by visiting this link - Heyzine, and log in to your account.

If you haven't created your account yet, just click on Sign up and create a free account using your email or Google account.

In one of my earlier tutorial, I had explained how you can create flipbook for free using Heyzine. You can check out that tutorial here - Create flipbook using Heyzine. 

So, if you haven't created a flipbook yet, follow the above article to create a flipbook for free.

After creating a flipbook, click on the Dashboard as shown in the screenshot below.

Now, you'll see all the flipbooks you have created on your Heyzine account. For example, in the below screenshot, you can see a flipbook on my Heyzine account.

Click on the flipbook as highlighted in the above screenshot. It will take us to Step 2.

Now, click on Share as shown below.

As you click on Share, you can see different sharing options offered by Heyzine. Since, we're learning to embed a flipbook into a website, we'll select Web / Embed option.

On selecting this options, we will get an HTML code that we need to add it our WordPress website or any other website platforms.

So, click on Web / Embed as shown in the screenshot below.

When you click on Web / Embed as mentioned in the last step, you'll get a screen like this.

Here, you need to select Embed iframe and click on Copy html code.

As you can see in the below screenshot, the Embed iframe option is already selected. If it is not selected, click on it to select it.

Now, click on Copy html code to copy the code that we'll add to our WordPress website.

As soon as you click on the Copy html code, your code will be copied. Now, paste the code in an application like Notepad for later use.

Now, we'll open our WordPress Dashboard.

In the below screenshot, you can see that I have opened my WordPress Dashboard. Now, click on Posts.

Here, you can see all the blog posts that has been published on the web.

Suppose, we want to add our flipbook to an existing blog post, we will click on Edit. See the below screenshot.

The blog post will open in edit mode as shown in the screenshot below. Now, suppose we want to add our flipbook at the position shown in the screenshot then we will move our mouse to that position and then move it towards the middle until you see a Plus icon.

Click on the Plus icon as seen in the below screenshot.

After clicking on the Plus icon, select Custom HTML. If you don't see the Custom HTML option, type it in the search and select it from there.

Now, paste your flipbook code as shown in the below screenshot. Remember we had saved the flipbook code in a Notepad in Step 1.

After adding the above code, click on Update button and open your blog post in a new tab and click on the Refresh to see your flipbook in action.

Note: You may see that the flipbook you just added is left-aligned. If your flipbook is not displaying at the middle of the page, you may need to add a small code to the code you added in the last step.

In the above screenshot, please see that I have added <center> at the start and </center> at the end of the original code. So, you need to add this code to display the flipbook at the middle of the page.

Check out the below screenshot to see that the flipbook has been successfully embedded on a WordPress website.

Wrapping Up

I hope you like the tutorial - How to add a flipbook on a WordPress website. Digital flipbooks can be accessed online and can be viewed on desktop, tablet and mobile devices.

Plus, they offer a book like reading experience with page-turning sound effect, zoom in/out and you can add interactive elements like text, links, images, videos, lead capture forms, and other widgets to make it more engaging and enjoyable.

If you like this article, please share it with your friends on social media websites. If you want to create a flipbook for your site, make sure to join Heyzine using the link given below.