Often, you want to keep your Flipbook as your inspirational channel, and your webshop as a transactional one. However, 'often' is not 'always', so what happens when you want to let your customers browse and buy from your inspiring catalog directly on your webshop?
You can do just that via a JavaScript integration!
📖 This guide explains:
How the JavaScript integration works
By using our JavaScript API, you can choose what happens when a visitor to your Flipbook clicks on a CTA, such as “Add to basket”, such as adding it to the basket in your webshop. It could also be a call to an external service or anything else you could imagine.
💡 The JS API commands only send calls, or commands, from point A (your Flipbook), to point B. If you'd like to visually integrate your Flipbook into your webshop, you'll also need to iFrame it.
By embedding your Flipbook via an iFrame, this allows you to display your Flipbook within the user interface (UI) of your webshop, giving it a seamless effect, visually. You use the JS API integration to send commands to, and update the UI.
💡 See a live example of a Flipbook embedded into a webshop here: https://shop.ipaper.io/. Just scroll down to the demo Flipbook and start testing!
Requirements for integrating your Flipbook with your webshop via JS API
In order to successfully integrate your Flipbook with your webshop, you'll need the following:
A working webshop, that is loaded via HTTPS.
A Flipbook populated with Shop links containing Product IDs that exist in webshop.
How to integrate your Flipbook to your Webshop via JS API
⚠️ We recommend that you have a working knowledge of how to iFrame, and how API integrations work before attempting to integrate your Flipbook with your webshop.
If you are unsure, we also recommend that you use an experienced developer to guide you through this process.
To start, you'll need to embed your Flipbook onto a page of your webshop, by iFraming it.
Next, if not already done so, you'll need to populate your Flipbook with Shop links that pair each product in your Flipbook with the matching product in your webshop, via a unique ProductID (SKU).
You will need to implement a Javascript integration from your webshop that listens for events being sent from your Flipbook.
Links to our technical documentation
Through this process, you will need to use our official documentation to help ensure that you iFrame your Flipbook, and integrate with our JS API, correctly. You can find links to the relevant documentation below:
Embedding Flipbooks via iFrame: | |
Javascript integration: | |
Javascript code test: |
Take your Flipbook from flat PDF to engaging digital shopping experience
Understand how this, and other tactics, can help you attract and inspire shoppers, while also capturing buying intent and converting to a sale, in our Success Framework.