Hikari Flipbook

Every setting

The same names everywhere: a Joomla module field, a {flipbook} attribute, a WordPress shortcode attribute, a block field. Booleans are 1 and 0 in a shortcode or a tag.

The book

Setting Default What it does
path none The document, or the folder of pages, relative to the site root
book none The id of a saved book instead of a path
mode auto single, double, or auto to choose by the width available
breakpoint 700 Below this container width in pixels, auto shows one page
showCover on Stand page 1 alone as a cover instead of pairing it
hardCovers off Make the covers rigid rather than bending
flippingTime 700 How long a page turn takes, in milliseconds
maxHeight 0 Largest height in pixels; 0 lets the book use the space it has
rtl off Right to left: the spine and the page order swap sides

What the reader can do

Setting Default What it does
zoom on Zoom in and out, and drag a zoomed page around
sound off Play a page-turn recording
soundFile random One recording from the sounds folder, or a different one each turn
deepLink off Keep the page number in the address bar, so a page can be linked to
share off A button that copies a link to the current page
download off A button that downloads the original PDF
lightbox off Show only the cover, and open the book over the page when clicked

Several books on one page

The URL belongs to the page, not to a book, so books that track their page have to take turns naming the parameter. The first book on the page uses #page=N and every book after it gets its own, #page2=N and so on, worked out for you.

Which book is "first" is the order they are rendered in, so on a page whose modules come and go, a link shared today may name a different book tomorrow. Where that matters, place the books that matter first, or give one a fixed name of its own.

Who may read it

Setting Default What it does
bought none Show the book only to a visitor who has bought this product

bought="42" is a product id from the shop the site runs, and several ids separated by commas mean any of them: an edition sold on its own and the bundle it is also part of both let a reader in. A visitor who has not bought it is told so, with a link to the product; the book itself is never rendered, so the document's address is not in the page either.

The book can be the product's own file

A placement with bought and no path shows the file the product is sold with: the publisher has already uploaded the PDF or EPUB to the product, and should not have to put a second copy somewhere the web can read it.

{flipbook bought="42"}
[hikari_flipbook bought="42"]

The document is read out by the site itself, at an address that checks the purchase again on every request, so it is never a public file. A search engine, or anyone with the address and no order, gets nothing. For the same reason a book that is sold never has its words put in the page for crawlers, and its cover is drawn in the reader's browser rather than saved as a picture anyone could fetch.

Files the shop keeps somewhere else, on S3 or another server, are passed over: only what is on this server can be read out. Name a path for those.

The shop decides what counts as bought. On HikaShop it is the order statuses the shop already uses to release a file someone paid for, so a flipbook and a download become available at the same moment. WooCommerce is asked the same question in its own terms.

A page cache serves logged-out visitors, who are never buyers, so a cached page carries the message rather than the book. If something on the site caches pages for logged-in visitors as well, leave a page with a buyers-only book out of it.

A site with no shop cannot tell a buyer from anyone else, so a book with bought set is shown to nobody there. Access levels are a separate thing and still apply: this is about one purchase, not about a group a visitor belongs to.

The toolbar

Setting Default What it does
toolbar on Off hides the toolbar completely
buttonNav on The previous and next buttons
buttonEnds on The first and last page buttons
buttonPage on The page number box

Search, the contents and pages panel, zoom, fullscreen, download and share appear when they are useful: a book of images offers no search, and download needs a PDF.

Hotspots

Setting Default What it does
hotspots none The regions themselves, drawn in the book manager
hotspotsShown off Outline every region as soon as the book opens

See hotspots.

Search engines and counting

Setting Default What it does
seo on Put a link to the document, and its words, in the page for crawlers
analytics none Also report to dataLayer (Tag Manager) or gtag (Analytics)

Whatever analytics says, every book fires a hikari-flipbook event on its own container, so a site can listen for page turns without any setting at all:

document.addEventListener('hikari-flipbook', (e) => {
  // e.detail: { name, book, document, ...the rest }
  console.log(e.detail.name, e.detail);
});

The events are ready, page, search, hotspot, zoom, fullscreen, download and share.

Appearance

Setting Default What it does
barColour theme The toolbar colour, as a hex value
pageColour white The colour behind a page, as a hex value

Anything finer is CSS. The viewer's own custom properties can be set on the container or anywhere above it:

.hikari-flipbook {
  --fv-bar-bg: #2e7d32;
  --fv-page-bg: #fffdf7;
  --fv-hotspot-fill: rgb(255 214 0 / 0.25);
  --fv-hotspot-line: #f9a825;
}