How to customize your Twixl kiosk

Luk Dhondt How-To

Twixl Publisher offers a number of options to adjust things like the toolbar colors in your app, or the backgrounds and colors used in the store. These allow you to give your app a personal touch.

But it doesn't end there… ... by integrating things like an info page and/or an info cell in your kiosk, you can communicate more directly with your readers.

Visit.Brussels In this article, we want to give an overview of the different parts of the look and feel that can be customized.

User interface customization (for both single & multi-issue apps)

In the Twixl Publisher Build Settings, i.e. where you store all configuration options for your app, go to the "User Interface" tab.

Alternate Layouts

Here you can adjust the background color of the toolbar and depending on the color you select here, you can also adjust the color of the text and icons that are shown in the toolbar (the publication title, the table of contents icon, the bookmark and sharing icons, etc.)

You can also adjust the "Scroller Background" - this background is used in two situations:

1. as a background fill colour when you use a 4:3 iPad publication on a 16:9 Android tablet (technically called "pillarboxing" or "letterboxing")

2. as a background fill colour in the browser window of a Web Reader

User interface customization for the kiosk

In the Twixl Publisher Build Settings, there is a second tab called "App Store Kiosk - User Interface".

Alternate Layouts

Depending on which orientations and devices your app supports, you can add up to 4 store backgrounds. If you leave this empty, the default background will be used.

Based on the color(s) in the background, you can optionally change the color of the "Grid Text", i.e. the text that is displayed under the issue cover in the store.

Note that the background itself is fixed, and will not scroll along with the rest of your kiosk content.

Integrating an Info Cell

Instead of just displaying the covers of the different issues in your storefront, you can include an extra info cell at the top of the store.

An "Info cell" is like a header for your store. You'll need to create an HTML file, named exactly “"infoCell.html"”, that you should also place in the Web Resources folder of your build setting (click the "Web Resources" button to go to that location). Because the info cell is HTML-based, you can either keep it static, but also make it more dynamic, add a timed slider, etc. If you are using entitlement, then you can integrate information for e.g. your print subscribers in the info cell. You can also use the custom URL schemes to trigger the entitlement login window.

The infoCell height and width are defined in the build settings and can be different for iPads, Android tablets and phones, both in landscape and in portrait.

If you want to display online content you can check whether the device is connected to the internet and then redirect to your online page, otherwise you can display embedded content.

Note that the info cell will scroll along with the rest of your kiosk content.

Integrating an Info Page

An “"Info page"” is a page that can be called on start-up (check the "Show On Startup" checkbox in the build settings) or by selecting a menu in the side bar of the storefront (enter the title in the "Info Button Title" field - leave this field blank if you don't want this option to appear at all).

Here you can introduce users to your app or e.g. to more information about your company, or you can also use it as a splash advertising page.

To integrate an info page in your app, you’ll have to create an HTML page, called exactly “"infoPage.html"”, and copy this page to the “Web resources” folder of your build setting. You can easily implement the same online-offline check as above.

 

Tweet this article: How to customize your Twixl kiosk

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