About the new Mobile App Homepage builder

Since its launch, TRIFFT has included a homepage builder to real-time adjust mobile app homepages via flexible "widgets". As customer expectations grew, we decided to completely rework this module so that it reflects three desired principles:

1. It is WYSIWYG - I.e. you can preview the new homepage before publishing

2. It is more flexible - I.e. it is built so that we can add new widgets over time to support maximum flexibility

3. It can support multiple Channels. By "Channel", we mean (for example) a mobile app. However, one Vendor can have multiple mobile apps, or an app and a website. Additionally, each might need a different homepage layout.

Where do I find the Mobile App Homepage Builder?

In Content Cockpit, Setting up a homepage is a two-step process involving:

1. Setting up the "Mobile app" Channel under Settings > Channels

   

2. Setting up the "HOMEPAGE" setting within Mobile app Channel:

   

   

How do I create a new homepage or update the existing home page?

1. Press the "+ ADD NEW" button to create a new homepage "ROW"

2. Rows are listed in the order in which they appear on the homepage.

3. "Live preview" illustrates how the homepage will look in the mobile app when published

4. After creating or updating the homepage, you can Cancel, Save, or Publish the result

   1. Cancel - Any changes since the last save will be lost

   2. Save - Saves changes

   3. Publish - Will cause changes to be visible to the mobile app users. (Note: changes need to be saved before they can be published)

Homepage Elements: Rows and Widgets

The homepage is divided into individual "Rows". The first row starts right after the top "status bar" of the app. The last row is the last visible content on the homepage (excluding the bottom icon bar).

Rows take up the whole width of the screen and have different heights. There are no vertical gaps between rows (these can also be created visually with "Spacers" widgets).

Each row serves as a container for one or more "Widgets". A widget represents a certain type element that has a purpose, function, general appearance, and functional and visual settings.

To see examples of all currently available widgets, check out this guide.

Editing homepage elements

1. Up and Down arrows: - Change the order of Rows

2. Bin icon: - Delete Row

3. Expand icon: - Expand settings for a particular Row

Row settings

1. Title is shown both on the list in Content Cockpit and (optionally) as a Row title on the homepage (see item #3)

2. Widget type: Select a widget that you wish to add to the homepage

3. Display title: Allows you to display the title text on the homepage

4. Background: Select the color for the whole ROW background. Note: Most widgets allow you to select widget background color. Be aware that while ROW always represents a full-width rectangle, widgets may have margins, or only take up a portion of the row.

   1. Default - As per the overall mobile app setting

   2. Transparent - No color set. The app background color (typically white) is displayed.

   3. Solid color - Copy paste color hex code or use color picker to set the color