Embedding flipbooks inside iOS and Android App

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:

http://partner.ipapercms.dk/Firma/Tilbudsavis/

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:

http://partner.ipapercms.dk/Firma/tilbudsavis/?EmbeddedHeight=x

In the example above we will force our content to be exactly x pixels high, circumventing our normal size calculations.

Calculating the EmbeddedHeight value on iOS devices

On iOS, you can calculate the EmbeddedHeight value of a given UIWebView like this:

CGRect webViewSize = [_webView bounds];
int embeddedHeight = (int)webViewSize.size.height;

Calculating the EmbeddedHeight value on Android devices

On Android you can calculate the EmbeddedHeight value of a given WebView like this:

CGRect webViewSize = [_webView bounds];
int embeddedHeight = (int)webViewSize.size.height;

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:

http://ipaper.ipapercms.dk/client/MyCustomFlipbook/

The embedded URL should be this, to invoke the special shop link handling:

http://ipaper.ipapercms.dk/client/MyCustomFlipbook/?ExternalJsonShopLinks=True

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:

ipapershop://<payload>

An example of the emitted JSON is as follow:

ipapershop: {
	title: "Milk",
	description: "Half gallon",
	productId: "M-926",
	price: 25.95,
	originPage: 4,
	quantity: 2,
	packageSize: 1
}