Advanced Usage

Multiple embedded flipbooks

If you have a page containing multiple embedded flipbooks, you can set up an API instance on each of them where you can execute commands and set up subscriptions. Below is an example of a page containing multiple flipbooks each with their own API instance.
<!DOCTYPE html>
<title>My page</title>
<!-- Embedded Flipbooks -->
<iframe src="" id="myFlipbook"></iframe>
<iframe src="" id="myOtherFlipbook"></iframe>
<!-- JS API embed script -->
<script src=''></script>
<!-- Custom script -->
const myFlipbook = document.getElementById('myFlipbook');
const myFlipbookInstance = iPaperJsApi(myFlipbook, 3);
myFlipbookInstance.publication.onSpreadChange((result) => {
console.log('Spread changed in myFlipbook', result);
const myOtherFlipbook= document.getElementById('myOtherFlipbook');
const myOtherFlipbookInstance= iPaperJsApi(myOtherFlipbook, 3);
myOtherFlipbookInstance.publication.onSpreadChange((result) => {
console.log('Spread changed in myOtherFlipbook', result);