How to integrate a form, survey or shopping basket in a Twixl app

Luk Dhondt InDesign

"Web Viewers" are a very powerful and sometimes underestimated feature that allows you to add dynamic updateable content in a Twixl publication. Any rectangle on an InDesign page can become a source of HTML content. This is not limited to just displaying a specific page of a web site, but can also be used to integrate things like a form, a survey or even a shopping basket that can use localStorage. Shopping basket

In order to explain how this works, we created a "Shopping basket" example.

You can check out the result in the Twixl Viewer by tapping this link on your iPad (make sure you have the Twixl Viewer installed). If you open the Shopping Basket example in the Twixl Viewer, there will be three pages in the publication:
  • the first page shows 4 types of fruit, and tapping the "+" icon will add the item to the shopping cart and display the overview of the basket
  • the second page provides the same option, but is visualized a bit differently
  • the third page shows an overview of the shopping cart, from where the order can be confirmed

How does this work ?

The InDesign source publication can be downloaded here. The download consists of:
  • an InDesign book called "LocalStorageShoppingCart" with three articles
  • a WebResources folder with the HTML content
In article 1, each of the 4 types of fruit has a "Web Overlay button" assigned to it that triggers it to be added to the shopping cart.

In article 2, the same information is visualized differently using web viewers for each of the fruit types, and will allow you to "Add one" to the basket and update the information of the button on the fly.

Article 3 is the overview of the shopping basket, where a user can confirm the order by entering his e-mail address.

The logic for all of this can be found in the contents of the WebResources folder, in a document "shopping_cart.html", along with some JavaScript files.

Tweet this article: How to integrate a form, survey or shopping basket in a Twixl app

Share this post to your network.

Download the free trial of Twixl Publisher

Start using Twixl Publisher immediately, preview the result on your own device, share your creations with a colleague or client, get started!
Need any help? Visit our documentation site.

Download the trial Check out the documentation today

× Free trial/download