How to optimize flipbooks for embedding?

The flipbooks that you create are designed to be viewed as 'standalone' in a browser window. Hence, you can add a skin, your logo, and a call-to-action button. This gives the results a finished look. Let’s take a look at an example. This flipbook looks pretty neat by itself.

But if we embed it into our webpage (this feature is available in Starter and higher plans), it’s not quite the result we want.

It looks a bit cluttered and the colors don’t match well either. But with a couple of small changes, we can make it look like this:

What did we do to achieve this? We...

1. removed the logo;
2. removed the background image and changed the background color of the flipbook to white to match the site;
3. removed the menu bar below the book.

The flipbook looks pretty bland when you open it directly. But it makes perfect sense when embedded into your site. When you remove the bottom menu, the icons to print, share, and zoom are no longer there. Your readers can still double-click to zoom in. If they right-click on the pages they’ll see a pop-up menu with another way to zoom in or to open the flipbook full screen. If you feel that your readers may not find this, then you could skip step 3 and leave the menu bar intact.

Let's have a look at the detailed steps to make such changes. You will need FlippingBook Online Optimal or higher.

Step 1: Remove the logo 

1. Customize your flipbook.
   
2. Unfold the Branding options.
3. Click on the button next to Logo. In the pop-up window, click on the cogwheel.
   
4. Now you can select Remove and then press OK.

Step 2: Remove the background

1. Customize your flipbook.
2. Open the Skin section.
3. Select White Style in the pop-up window and press OK.
   
4. Next, unfold the Branding options.
5. Click on the button next to Background Image.
6. Click on the small cogwheel and select Remove and OK.
   
7. Now, under the Branding options, click on the button next to Color Palette.
8. Select Background.
9. Enter the color code for the color of your webpage where you will embed the flipbook on. If you do not know the color code, take a screenshot of your page and use the online color picker like this one to learn the code.

Step 3: Remove the menu bar below the book

1. Go to the Controls section.
2. Disable all the sliders. You can leave Search and Text Selection enabled if you want to. These options don't leave icons in the bottom bar.
   

Your flipbook is now fully optimized for embedding into your own page.

Tip!
Would you like a no-fuzz flipbook for embedding, but also a branded one with your background, logo, and all the buttons to share as a direct link? What about making a copy so you can have both! Note that the stats will be split between two books too. But this may even be a plus. You can now see who opened the direct link, and who looked at the embedded version.