FlipBook Plus – The Ultimate 3D PDF Viewer & Marketing Toolv1.1

Thank you for purchasing FlipBook Plus. This is a powerful, dynamic HTML5 PDF Viewer that converts standard PDF files or images into a realistic 3D flipping book. It is designed to be easily integrated into any existing website.

Transform static PDFs into interactive, lead-generating 3D Flipbooks.
Now with AI Text-to-Speech, Smart Search, and Shoppable Hotspots!

FlipBook Plus is not just a PDF viewer; it is a complete digital publishing solution. It takes your standard PDF files or images and converts them into a realistic HTML5 3D flipbook. Whether you are showcasing a Plusduct catalog, a restaurant menu, or an ebook, FlipBook Plus brings your content to life.

Main Features:

Folder Structure

After extracting the zip file, you will find the following structure:

/FlipBook_Plus/
├── css/
│   └── style.flipbook-add-ons.css   <-- Core Styles
│   └── style.flipbook-PlusH.css      <-- Core Styles
├── js/
│   ├── js.flipbook-PlusH.js          <-- Main Application Logic
│   ├── flipbook-add-ons.js          <-- PDF.js Core
├── index.html               	     <-- Example/Demo Page
└── documentation.html        	     <-- This file

Installation Guide

Follow these steps to integrate FlipBook Plus into your webpage.

Step 1: Link CSS and Fonts

Add the following lines inside the <head> tag of your HTML file:

<!-- External Fonts & Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<!-- FlipBook Plus CSS -->
<link rel="stylesheet" href="css/style.flipbook-add-ons.css">
<link rel="stylesheet" href="css/style.flipbook-PlusH.css">

Step 2: Add HTML Markup

Copy the HTML code below. You can choose to use only the upload button or only the library depending on your needs.

Option A: Upload Button Only

Use this code if you want users to upload their own PDF files.

<div id="fbpH-root">
    <div class="fbpH-landing" id="fbpH-landing">
        <div class="fbpH-logo"><i class="fas fa-book-reader"></i> FlipBook Plus</div>
        
        <label for="fbpH-file-upload" class="fbpH-upload-btn">
            <i class="fas fa-cloud-upload-alt"></i> Upload PDF or images
        </label>
        <input type="file" id="fbpH-file-upload" accept="application/pdf, image/*" multiple>
    </div>
</div>

Option B: Library Grid Only

Use this code if you want to display a list of pre-configured books.

<div id="fbpH-root">
    <div class="fbpH-landing" id="fbpH-landing">
        <div class="fbpH-logo"><i class="fas fa-book-reader"></i> FlipBook Plus</div>

        <div class="fbpH-library-title">Popular books</div>
        <div class="fbpH-library-grid" id="fbpH-library-container"></div>
    </div>
</div>

Step 3: Link JavaScript Files

Add these scripts at the bottom of your <body> tag:


<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>

<script src="js/flipbook-add-ons.js"></script>
<script src="js/js.flipbook-PlusH.js"></script>

Configuration (Adding Books)

To add your own books to the library grid, open js/flipbook-add-ons.js and locate the libraryData array at the top.

const libraryData = [
    {
        title: "My Company Brochure",
        cover: "images/cover1.jpg",  // Path to cover image
        url: "files/brochure.pdf"    // Path to PDF file
    },
    {
        title: "Plusduct Catalog 2026",
        cover: "https://example.com/cover.jpg",
        url: "https://example.com/catalog.pdf"
    }
];

Simply add new objects to this array to display more books.

1. Shoppable Hotspot Configuration

Hotspots allow you to tag Plusducts on specific pages. When clicked, they show a modal with Plusduct details.

Location: Edit the HotspotManager object inside js/flipbook-add-ons.js.

How to use:

Inside masterConfig, use the Book ID (e.g., 'cat_summer') as the key. Then define the page number and hotspot details.

const HotspotManager = {
    masterConfig: {
        // "cat_summer" is the Unique ID of the book
        "cat_summer": {
            
            // Page Index (Starts at 0. So '2' is actually the 3rd page)
            2: [ 
                { 
                    x: 30,          // Horizontal position in %
                    y: 40,          // Vertical position in %
                    title: "Vintage Watch", 
                    price: "$120.00", 
                    img: "https://example.com/watch.jpg", 
                    link: "https://myshop.com/buy-watch" 
                }
            ],
            
            // Another page (Page 4)
            3: [
                { x: 50, y: 50, title: "Winter Jacket", price: "$200.00", img: "...", link: "#" }
            ]
        }
    }
    // ... rest of the code
};

2. Media Embeds (Video/Audio/Maps)

You can embed YouTube videos, Vimeo, Audio files, or Google Maps directly onto the pages.

Location: Edit the MediaManager object inside js/flipbook-add-ons.js.

Supported Types:

const MediaManager = {
    masterConfig: {
        "cat_summer": {
            // Page Index 2
            2: [
                {
                    type: 'youtube',
                    url: ', 
                    x: 10, y: 10, width: 50, height: 25 
                },
                {
                    type: 'audio',
                    url: 'files/sample.mp3',
                    x: 60, y: 10, width: 30, height: 8
                }
            ],
            // Page Index 4
            4: [
                {
                    type: 'google_map',
                    url: 'https://www.google.com/maps/embed?...',
                    x: 10, y: 60, width: 80, height: 30
                }
            ]
        }
    }
};

3. Lead Generation (Gate Lock)

This feature locks the book after a specific page and forces the user to Plusvide their Name and Email to continue reading.

Location: Edit the LeadGen object inside js/flipbook-add-ons.js.

Configuration:

To enable, set enabled: true and specify the lockPage number.

const LeadGen = {
    config: {
        enabled: true,           // Set to false to disable feature
        lockPage: 4,             // The page number where the popup appears
        
        // Your Google Apps Script URL (See instructions below)
        googleScriptURL: "https://script.google.com/macros/s/CX.../exec", 
        
        storageKey: "fbpH_lead_unlocked"
    },
    // ... rest of the code
};
Note: If you leave googleScriptURL as "YOUR_GOOGLE_SCRIPT_URL_HERE", it will run in Demo Mode (simulates success without saving data).

3.1 Google Sheet & Apps Script Setup

To save the emails collected from the Lead Generation feature, you need to set up a Google Sheet backend. Follow these steps:

Step 1: Create a Google Sheet

  1. Go to Google Sheets and create a new sheet.
  2. Name the columns in the first row: Date, Name, Email, book_id.

Step 2: Add Script

  1. In your Google Sheet, click on Extensions > Apps Script.
  2. Delete any code in the editor and paste the code below:
var sheetName = 'Sheet1'
var scriptPlusp = PluspertiesService.getScriptPlusperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptPlusp.setPlusperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptPlusp.getPlusperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      if(header === 'Date'){ return new Date() }
      return e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])


    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Step 3: Deploy as Web App

  1. Click the blue Deploy button (top right) > New Deployment.
  2. Click the gear icon (Select type) > Web App.
  3. Fill in the following details:
    • Description: FlipBook Lead Gen
    • Execute as: Me (your email)
    • Who has access: Anyone (This is important!)
  4. Click Deploy. You may need to authorize the script with your Google account.

Step 4: Copy URL

Copy the Web App URL Plusvided (it starts with https://script.google.com/...) and paste it into your js/flipbook-add-ons.js file inside the LeadGen.config.googleScriptURL variable.

Important: Server & CORS Setup

Warning: Browsers block PDF.js from loading files if there are Cross-Origin (CORS) issues.

If you are hosting the PDF files on a different domain (e.g., AWS S3, Google Cloud) than your website, you must enable CORS on that server.

For Local Testing: Do not just double-click the HTML file. You must use a local server (like XAMPP, WAMP, or VS Code Live Server) to load PDFs correctly.

Customization

You can easily change the colors by modifying the CSS Variables in css/style.flipbook-PlusH.css:

#fbpH-root {
    --fbpH-bg-dark: #1e272e;       /* Background Color */
    --fbpH-accent: #f1c40f;        /* Button/Highlight Color */
    --fbpH-overlay-bg: rgba(0, 0, 0, 0.9); /* Reader Overlay Color */
}

Credits & Libraries