SETUP — 3 STEPS
1. Drag the "FlipBook Viewer" element onto your page.
  Give it a size — 900 x 620 px is a good starting point.

2. In the element's properties, fill in "PDF URL".
  Use a Bubble file upload (FileUploader A's value), a database field,
  or paste any public PDF link.

3. Preview the page. That's it — the book renders with its own controls.

OPTIONS

PDF URL              The PDF to display. Required.
Page width           Width of one page in px. Default 420.
Page height          Height of one page in px. Default 560.
Render quality       1 = fast, 1.5 = balanced (default), 2-3 = sharp but slower.
Single first page    ON = the cover stands alone, like a real book.
Allow single page    ON = phones show one page at a time instead of a spread.
Show controls        OFF = hides the built-in bar and arrows if you prefer
                    to build your own with the actions below.
Background color     Colour behind the book.

USING YOUR OWN BUTTONS

Set "Show controls" to OFF, then in a workflow:
 Element Actions > FlipBook Viewer A > Next page
 Element Actions > FlipBook Viewer A > Previous page
 Element Actions > FlipBook Viewer A > Go to page  (takes a page number)

To display the position, put a Text element with:
 FlipBook Viewer A's current_page  /  FlipBook Viewer A's total_pages

EVENTS

 "the book is loaded"  — fires once the PDF has finished rendering
 "the page changes"    — fires on every flip
 "an error occurs"     — read the reason from the last_error state

NOTES

- The PDF must be reachable by the visitor's browser. Files uploaded to Bubble
 work out of the box. If you host the PDF elsewhere and the book stays blank,
 that server is most likely missing CORS headers — check the last_error state.
- Long documents render page by page on load. For a 200-page file, lower
 "Render quality" to 1 for a much faster first paint.
- The page number box jumps to the spread containing that page. In a two-page
 spread, pages 2 and 3 share a spread, so typing 3 may not appear to move.

DEMO
Live demo:   https://emrejsx.bubbleapps.io/version-test/flipbook
Demo editor: https://bubble.io/page?id=emrejsx&version=test&name=flipbook&tab=Design