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);

Last updated