Skip to main content
Tutorial: JavaScript Integration

Learn how you can enable the different shop checkout configurations

Updated over a week ago

Using the JavaScript Flipbook integration within an E-Commerce platform open many possibilities for a very fluid shopping experience, such as allowing the customer to directly interact with the shopping cart.

For a live example, checkout our demo Flipbook:

🔰 Before we get started

This article assumes that you already have an understanding of using the iPaper JavaScript API. If you're unsure on how this works to integrate your Flipbooks with your website, take a look at our guide, below:

To get a better overview of how the above example was achieved, we will dive into how the communication between the parent window and the Flipbook works. We will assemble a short code snippet which will consist of the API, magic callback event and embed script, and display product information in an alert dialog.


How JavaScript integration works

Before we dive into the coding part of this tutorial let's overview how the connection is made.

As the above diagram shows, this implementation works as a two-way communication between the parent window (embed location) and the embedded Flipbook.

💡 For more in depth information, please refer to our documentation here:

To achieve this, we will compile a script from 3 different parts:

  1. iPaper Flipbook API script

  2. onProductAdded event

  3. iFrame embed

The Embed Script

To establish communication between the parent window and Flipbook which we will embed we need to get the Flipbook API script. You can find your Flipbook API script by right-clicking on the account level from the Flipbook view, and selecting Get Flipbook API script.

The onProductAdded event

The following snippet will fire the onProductAdded event which will be dispatched from the iFramed Flipbook to the JavaScript API via window.postMessage().

Once the API receives this event, it then invokes a callback present in the parent window, which will show us an alert with the following product data.

title

string

Product title

description

string

Product description

productId

string

Product Id

price

number

Product price

originPage

number

Page where the product is located on

quantity

number

Quantity of product to ad

iFrame embed

With our final piece of the script we will add the URL of the Flipbook we wish to embed.

<body> 
<iframe src="https://library.ipaper.io/demo/demo-catalog-shop-embed/" style="width: 100%; height: 1000px;"></iframe>
</body>

More in depth information on Flipbook iFrames can be found here

When we combine it all together, we get the following script is ready to use!

<!doctype html>
<html>
<head>
<script src='https://cdn.ipaper.io/flipbooks/api/v3/latest.js'></script>
</head>
<body><iframe id="myFlipbook" src="https://viewer.ipaper.io/code-examples/javascript/?page=2" style="width: 100%; height: 500px;" data-ipaper></iframe></body>
<script>
const myIframe = document.getElementById('myFlipbook');
// Create a new V3 API instance with the iframe
const myApiInstance = iPaperJsApi(myIframe, 3);
myApiInstance.basket.onProductAdded((product) => {
// Use template literals to display the product information in an alert dialog box
alert(`Product Information:
Title: ${product.title}
Description: ${product.description}
Product ID: ${product.productId}
Price: ${product.price}
Quantity: ${product.quantity}`);
});
</script>
</html>

As you can see once, a product CTA is clicked the onItemAdd event is fired which returns the product information.



This was a very basic showcase what v3 Flipbook JavaScript API cant do. It gave insights in to how to proceed further to integrating with an e-commerce solution.

Further guidance of what is needed to achieve the full e-commerce experience can

be found here.

Happy coding :)

Did this answer your question?