Embed flipbooks transparently

Alert!⚠️This article concerns publications viewed on desktops, not on mobile devices. Please read on desktop only! On mobile, all the examples will look the same.

It is possible to embed flipbooks without the background and with a minimal interface. This creates an even more seamless experience and is especially useful for publications where users only browse the pages and don't need any additional functionality like the Table of Contents, Notes, Print, or Download.

Your flipbook may look something like this on Desktops with standard embed code:

Short Guide - Transparent embed

A transparent embed of exactly the same flipbook looks like this

Short Guide - Transparent embed
Right-click on the book to see it full-screen!

As you can see, the following elements/features will be hidden or disabled:

• Background color or image/skin of the publication;
• Sidebars;
• Top and bottom panels;
• Notes;
• Page-turning sound;
• Preloader during publication loading.

Your readers can right-click on the embedded flipbook to open a context menu with the full-screen option. If they do so, the flipbook will be opened full-screen with all the normal options and settings. However, if the standard functionality is crucial, then consider if this mode suits you. Most likely, many of your readers will not discover this by themselves, even if you add a small note. 

How to activate transparent embed?

To activate the transparent embed with a simplified publication interface, use the parameters below in your code:

1. data-fbo-transparent — enables transparency;
2. data-fbo-navigation-color="#ffffff" — sets navigation button colors on desktop (in HEX format);
3. data-fbo-book-size="80" — defines the size of the publication in percentage, in this example 80%

The first parameter, data-fbo-transparent,  is mandatory; the other two only have an effect when it is present. These parameters are not yet available in the standard embed dialog. You need to add them manually to <a ...> part of the standard embed code. (The exact position is not important.)  

Standard code (example)
<a class="fbo-embed" style="max-width: 100%;" href="https://online.flippingbook.com/view/403559353/" data-fbo-id="8a4dee1540" data-fbo-ratio="3:2" data-fbo-lightbox="yes" data-fbo-width="100%" data-fbo-height="auto" data-fbo-version="1">Short Guide - Transparent embed</a><script src="https://online.flippingbook.com/EmbedScriptUrl.aspx?m=redir&amp;hid=403559353" async="" defer="defer"></script>

Modified code for transparent embed (example)
<a class="fbo-embed" style="max-width: 100%;" href="https://online.flippingbook.com/view/403559353/" data-fbo-id="8a4dee1540" data-fbo-ratio="3:2" data-fbo-lightbox="yes" data-fbo-width="100%" data-fbo-transparent data-fbo-height="auto" data-fbo-version="1">Short Guide - Transparent embed</a></p><script src="https://online.flippingbook.com/EmbedScriptUrl.aspx?m=redir&amp;hid=403559353" async="" defer="defer"></script>

Some examples  

The screenshots below illustrate how the publication appears with this parameter enabled. 

Using data-fbo-transparent and data-fbo-navigation-color="#ff0000" (red) makes the arrows for turning the pages more noticeable. 
Short Guide - Transparent embed

If you want to adjust the margins around the flipbook, you can decrease the book size:  data-fbo-transparent, and data-fbo-book-size="80"
Short Guide - Transparent embed

If you, on the contrary, want to minimize the borders around the flipbook, set the book size to 100 (the default value is 95): data-fbo-transparent and data-fbo-book-size="100"
Short Guide - Transparent embed
We hope these examples gave you some ideas!

Removing the logo

Clients who are on the Optimal plan or higher can remove the logo from the flipbook. You can do this by going to Customize and in the Branding & Style section, clicking on the button next to Logo. Press on the tuning icon and click Remove.

⚠️Warning: this feature is still in its pre-release stage!⚠️

• It has largely been tested, but there may be minor bugs/unexpected behavior in very specific circumstances.
• There may be minor unannounced changes in behavior and bug fixes.
• We are very interested in hearing your feedback! Please email us at support@flippingbook.com to let us know about any problems and if this helps you achieve your goal (and if not, why not).