Embed 3D Flipbook in WordPress

In this article we will discuss how to embed a 3D flipbook into a WordPress page using our basic shortcode.

Why 3D Flipbook? #

Not every PDFs is plain text and manual. Some PDFs are designed to impress. Portfolios of artists, photo albums, catalogue of brands, showcases of manufacturers, design proposals, annual reports. All such documents deserve a life like representation – what better than a 3D flipbook that can bring PDFs to life.

Some PDFs are designed to impress. All such documents deserve a life like representation – what better than a 3D flipbook that can bring PDFs to life.


Example ShortCode #

[dearpdf id="69" ][/dearpdf]

Example Output #

How to create a 3D Flipbook? #

  1. Create a new Post in DearPDF. Goto DearPDF -> Add Post
  2. Give title to your new Post
  3. Select the PDF you want to add by clicking Select PDF.
  4. Select the Thumbnail to your 3D Flipbook post.
  5. Set Viewer Type to Flipbook
  6. Set Flipbook 3D or 2D to WebGL 3D
  7. Click on Publish.
  8. Shortcode will now appear on Shortcode Box(top right corner of page)
  9. Copy the shortcode and paste it on the Post/page you want to embed the flipbook.

10 thoughts on “Embed 3D Flipbook in WordPress”

  1. Hi, guys!
    I’m getting problems to load a .pdf with just one page on my local wordpress website (I will send to production after this got resolved).
    Putting inside a div, nothing happened.

    It’s a simple wordpress website that is importing only bootstrap.

    Can you guys help me, please? We have another website on our city which is working normally. Their url is https://festivaldecuritiba.com.br/guia/ to reference.

    1. Hi,
      This is interesting, Actually the PDF is under loading, but it is returned with gzip encoding, so the software could not determine the size.
      We recommend not gzipping the PDF. It disables the partial loading feature in PDF and the whole PDF needs to be loaded.
      https://dearflip.com/pdf-flipbook-links-customization-and-tips-with-dflip/#why-is-pdf-loading-slowly
      https://www.computerworld.com/article/2693941/why-it-doesn-t-make-sense-to-gzip-all-content-from-your-web-server.html

      On the other website gzip is enabled only for web files.
      We will fix the loading message. But you need to fix the gzip issue for PDF anyway.

      Best Regards

  2. Hi, This look so awesome!
    Is there any way the edges of the pages don’t get cutoff when the page flips?
    Cheers,

Leave a Reply

Your email address will not be published. Required fields are marked *