Embedding flipbooks inside iOS and Android App
Important:
If you in any way exploit a quirk of our system to your benefit then we cannot guarantee that our flipbooks will continue to work as you would expect. If you feel the need to make any kind of workaround to achieve your desired behavior, make sure you validate it with us first. Otherwise you risk your app breaking at some point when we update our system. If you get in contact with us first, we’ll do all we can to help you out and ensure a long term viable solution is made.
Embedding the flipbook
iPaper will automatically detect which device is trying to access any given flipbook and display corresponding view. Whether that be the iPad, iPhone or Android views for handheld devices.
You should always link directly to a flipbook of the form:
Important:
It is very important that you never link directly to any files/subdirectories beneath the flipbook - only the main flipbook url can be trusted to be static.
Important:
If you are embedding your Flipbook in an iOS app and the Flipbook is utilizing autoplay videos, you should ensure that the iOS app allowsInlineMediaPlayback property is set to true. By default, this property will be false on iPhones, which causes autoplay videos to open in full-screen which can lead to a confusing/bad user experience when browsing the Flipbook.
Important query string parameter when embedding the flipbook
For some mobile devices, we can’t detect whether the navigation bar is present or not. As a result, content may either be shown too small, or cropped, in such cases.
To avoid this, you should hard code the browser height and send it to us in the query string like so:
In the example above we will force our content to be exactly x pixels high, circumventing our normal size calculations.
Note:
Make sure that the EmbeddedHeight value is an integer with no decimals.
Important:
Unfortunately it is not possible to dynamically resize the embedded flipbook when using the EmbeddedHeight parameter. As such, you’ll have to resize the container and reload the catalog with a new EmbeddedHeight value appended.
Calculating the EmbeddedHeight value on iOS devices
On iOS, you can calculate the EmbeddedHeight value of a given UIWebView like this:
Calculating the EmbeddedHeight value on Android devices
On Android you can calculate the EmbeddedHeight value of a given WebView like this:
Shop Integration
When embedding a flipbook inside an iOS/Android application it is not possible to use our normal JavaScript API, as this requires the flipbook to be iframed. As an alternative it is possible to override the normal behavior of shop links and force them to open a specially formed URL, enabling you to intercept the call and thus be notified of users clicking on shop links.
To force the special shop link functionality, you’ll have to add a special query string parameter to the flipbook URL. If the normal flipbook URL is this:
The embedded URL should be this, to invoke the special shop link handling:
Once the ExternalJsonShopLinks parameter has been enabled, clicking on a shop link will then navigate the user to the following URL, containing a JSON object with all of the product details. The JSON object/payload is encoded using UTF-8:
An example of the emitted JSON is as follow:
Note:
This functionality is only applicable to the mobile versions, and setting the ExternalJsonShopLinks parameter thus has no impact on the normal desktop version of the flipbook.
Last updated