Getting Started with Twixl

Every Twixl app starts on the Twixl Platform. That’s why you need a Twixl account so you can be in full control of your app.

Don’t have a Twixl account yet? No worries, you can create one here. It’s totally free and grants access to our Twixl platform and much more.

Twixl account ready?

• Go to platform.twixlmedia.com
• Login with your Twixl account

Let’s add your first app to the Twixl platform.

• On the Twixl platform, Log in
• Click ‘Add Application’ (top right corner)

Now, you can select* what kind of app you want to add:

1. Getting Started App: Select this one if you are looking at Twixl for the first time and we will show you some cool features.
2. Kiosk App: Mimics a traditional kiosk with different magazines.
3. New App: confident enough to start from scratch with your own design?

Next, select whether you want to publish the app in a testing or production environment. Let’s go for safe and select ‘Development’.

The last step is to identify your app.

• Give it an ‘Application Name’: How do you want to search for it?
• A ‘Bundle Identifier’: this is a reverse DNS name. More info on what this is under the text field on the platform.
• If you wish you can add some metadata and an app icon. You can also provide other people access to your application. These last fields are not mandatory and we will skip them here.
• Click ‘Add’ and your first app will appear on the Twixl platform!

* We understand our sample apps look finger licking good and you want to use these as your own. Note however that usage is limited to test purposes.

Now that your app is on the Twixl platform, you can already preview it as is in our free Twixl App.

Install and use the Twixl App:

• On your mobile (phone or tablet), download the “Twixl” App from the App Store or from the Google Play store
• Open the Twixl app, then scan the QR-code for your app on the Twixl platform, and you can check the preview

If you selected one of the sample apps, then you are done. We already inserted some cool features in the app for you.

Learn more about these features and what you can build yourself next time:

1. Content Items: different types of content that you can add to the app, e.g. interactive InDesign articles, HTML-based articles, a PDF document, and much more. Learn all about it in Working with Content Items.
2. Collections: a group of content items, e.g. a monthly magazine is a collection of different articles. For more information on configuring your collections, please check Working with Collections.

Now that your app has content, we can take a look at the design of the app itself in the next step.

The way your app will look will be determined in this section.

If you have used one of our 2 sample apps then all the work has been done for you already. Let’s walk through each of these items below…

The dropdown menu lists a lot of options. Here are some examples that have an impact on the look and feel of your app.

1. Grid Styles

• Select ‘Grid Styles’ from the dropdown menu.
• Select ‘Default’
• Now adjust the displayed items. You can use this Grid Style ‘Default’ later on in your app. Learn more about Grid Styles here.

• Metadata: can be used for referencing afterwards.
• Structure: adds the number of columns in your grid style. E.g. a grid of 4 columns will position your collections 4 in a row.
• Padding: will insert more space between your collections and the bezel of the device.
• Spacing: defines the space between each of your collections.
• Colors: be creative and give your background and text a distinct unique color.
• Background Image: by default the background will be a single coloured frame. You can, however, also select a background image that you've uploaded.
• Allowing horizontal swiping and displaying scrollbars are the last options.

About Grid Styles:

Grid styles determine how your Browse Grids will display the collections in your app on different devices. You can define different Grid Styles for tablets, phones or the browser. Learn more about Grid Styles here.

2. Item Styles

The appearance of the cells in your browse grids can be determined in 'Item Styles'. While a 'Grid Style' applies to a collection, an 'Item Style' applies to a content item.

• Open the dropdown menu
• Select ‘Item Styles’
• Click on ‘Default’

The sidebar on the left determines the options in the right side bar. The image in the middle provides a preview of how the content item will be displayed. The image is built up by layers of image and text and you can design these layers to give it a unique appearance.

Again, these Item Styles can be different for tablets, phones or the browser.

To learn more about 'Item Styles', check this article.

Integrating the styles in your app

Now these default Grid and Item Styles have been defined, you can apply them the collections in your app.

• Go back to Home of your app
• At the right of Root Collection, select ‘edit’
• In ‘Styling’ select ‘Default’ in the dropdownmenu next to 'Grid Style’ and ‘Item Style’

This means you can have all kind of unique Grid and Item Styles and give them distinctive names so you can select them in this section too.

About Root Collection and Hamburger Menu…

Consider the Root Collection as the home screen of your app. The Hamburger Menu collects the menu options in your app. You can activate or deactivate this menu.

Previewing your app is the next step. It's the very beginning of your testing process. We offer an easy way to preview your app on mobile devices or in an iOS Simulator (on a Mac)! The following articles will help you to get started:

1. Preview an app on a mobile device
2. Preview an app in the iOS Simulator
3. System Requirements
4. Downloads

The last step is to build a real iOS or Android app. During testing you can start with a Development version and in the end you turn it into a Production app. The process to build the app is the same in both cases.

• Getting started with the Twixl macOS app