Mobile App Set Up

This guide explains how to create a Mobile App channel and configure the baseline customer experience: translations, branding, languages, bottom navigation, shared header, first-run screens, Homepage, and Profile.

Advanced widgets and optional channel settings are covered in Mobile App Other Functions.

Before You Start

Before building the screens, decide the customer journey:

1. What should a customer see after a fresh installation?
2. Does the customer need to choose a language before login or registration?
3. What should appear after the first login or registration?
4. Which destinations belong in the bottom navigation?
5. Which Homepage content is public, member-only, or segment-specific?

1. Create the Mobile App Channel

1. Log in to the TRIFFT Content Cockpit.

2. Navigate to Settings → Touchpoints.

3. Click Add new.

4. Configure the channel:

   Field	Configuration
   Name	Enter an internal name that clearly identifies the app or project.
   Type	Select Mobile App.
   Description	Enter an optional internal description.

5. Click Save.

6. Open the new channel.

The channel contains the SCREENS, TRANSLATION, and SETTINGS tabs.

2. Configure Translations

1. Open the TRANSLATION tab.
2. Select the required language from the language list.
3. Use the search field to find a translation by its label or key.
4. Complete or review all customer-facing values.
5. Click Save.
6. Repeat the process for every language that will be enabled under Available Languages.

Preserve Dynamic Placeholders

Some translations contain dynamic placeholders for values such as:

• timestamps
• amounts and currencies
• counts
• dates and time units

Translate the surrounding text, but preserve the placeholder exactly as shown in the editor. Changing a placeholder can prevent the app from inserting the dynamic value correctly.

Configure the Embedded Menu URL

The embed:menu_link navigation route uses a URL stored in translations.

1. Search for common or Menu Link.
2. Locate Menu Link (common.menu_link).
3. Enter the complete destination URL, including https://.
4. Save the translation.
5. Repeat this check for every enabled language.

3. Apply App Colors

Use SETTINGS → COLORS to define channel-wide colors. The available fields cover the main screen background and specific elements such as error messages, bottom-navigation icons, Homepage tiles, login controls, and card-pair components.

1. Enable the color setting that you want to override.
2. Enter or select the approved color.
3. Review the effect in the relevant screen preview.
4. Repeat for the required elements.
5. Click Save after completing the channel settings.

Use sufficient contrast between backgrounds, text, icons, and buttons. Verify the design on physical devices because the final result can vary with screen size and content length.

4. Configure Languages and Default Map Position

In SETTINGS → GENERAL, configure the following baseline settings:

Mapbox Position

Enter the default coordinates in the format expected by the editor. Use a position that provides a useful initial map view for the project.

Initial and Available Languages

1. Enable Initial Language and select the default language.
2. Enable Available Languages and add every supported language.
3. Confirm that each available language has a completed translation set in the TRANSLATION tab.
4. Save the settings.

5. Configure the Bottom Navigation

The Menu Routes setting controls the destinations and order of the bottom navigation.

1. In SETTINGS → GENERAL, enable Menu Routes.
2. Enter an ordered array of supported route values.
3. Save the settings.
4. Verify every navigation item in the app preview and on a test device.

Example:

The array order determines the navigation order.

6. Configure a Shared Header

A shared header is optional. When configured under SETTINGS → HEADER WIDGETS, it is displayed on Mobile App screens unless a screen overrides it.

1. Locate HEADER WIDGETS.

2. Select Header in Widget for header.

3. Configure the common controls:

   Setting	Purpose
   Internal title	Administrative name used in the editor.
   Display title	Controls whether the internal/display title is shown to the customer.
   Visibility	Restricts the header by login state or hides it.
   Segments	Restricts the header to selected member segments.

4. Choose a Background option:

   • Solid
   • Full width image
   • Transparent

5. Configure the logo position or select No logo.

6. Configure a greeting if required. A greeting can include personalized member information supported by the project's template configuration.

7. Add header links if required.

8. Review the preview and save the settings.

To display a header on only one screen, leave the global header empty and add a Header widget to that screen instead.

7. Configure App Welcome

App Welcome is the first-run journey. It is displayed once when the customer opens the app after a fresh installation.

1. Open SCREENS.

2. Select App Welcome.

3. Click Add new.

4. Select a screen type:

   Screen type	Use
   Welcome screen	Introduces the application.
   Language screen	Allows the customer to choose the app language.
   Info screen	Displays informational text and optional media.

5. Configure the fields displayed for the selected type. These can include:

   • Internal title
   • Action
   • customer-facing Title and Description
   • image or video
   • button labels
   • visibility toggles for title, description, navigation, or skip controls
   • background, text, navigation, border, and button colors

6. Add additional screens if the journey requires more than one step.

7. Drag the items into the required order.

8. Review each step in the preview.

9. Click Save as Draft.

8. Configure Onboarding

Onboarding is displayed after the customer's first login or registration.

1. Open SCREENS.

2. Select Onboarding.

3. Click Add new.

4. Select a screen type:

   Screen type	Use
   Welcome screen	Introduces the loyalty experience after authentication.
   Info screen	Displays informational text and optional media.
   Card screen	Supports pairing an existing loyalty card or generating a new card according to the project flow.
   Preference center screen	Users can choose their interests or preferences. It usually shows a list of Public Segments (for example: “Running”, “Vegan options”, “Food news”). Users can select the ones they like, and those selections become their preferences.

5. Configure the content, controls, media, and colors shown for the selected type.

6. Add and reorder additional screens as required.

7. Review the complete sequence in the preview.

8. Click Save as Draft.

9. Build the Homepage

1. Open SCREENS → Homepage.

2. Click Add new. A new widget is added to the end of the list and initially uses the Static type.

3. Enter an Internal title.

4. Enable Display title only if the title should be visible to customers.

5. Select the required Widget type.

6. Configure Visibility:

   Value	Who sees the widget
   All (default)	Anonymous and logged-in customers, subject to segment targeting.
   Only anonymous	Customers who are not logged in.
   Only logged in	Logged-in customers.
   None	Nobody. Use this to prepare a widget without displaying it.

7. Under Segments, click Add new if the widget should be limited to selected member segments. Leave the list empty if no segment restriction is required.

8. Configure the type-specific content and appearance.

9. Review the mobile preview.

10. Repeat the process for all Homepage widgets.

11. Drag widgets into the required order.

12. Click Save as Draft.

Recommended Baseline Homepage

A practical baseline can include:

• a shared or screen-specific Header
• a Card, Points, or Tier widget for the member's loyalty status
• one or more Feed widgets for relevant content
• Static or Button widgets for priority actions
• Spacer or Line widgets where visual separation is needed

Use Mobile App Other Functions to select and configure the appropriate widget types.

10. Build the Profile Screen

The Profile screen uses the same widget workflow as the Homepage.

1. Open SCREENS → Profile.
2. Add the required widgets.
3. Configure visibility and segment targeting.
4. Reorder the widgets.
5. Review the preview.
6. Click Save as Draft.

A Profile widget can display the member's name, email, registration phone number, and other supported profile information. Selecting the widget takes the customer to the profile area.

11. Review and Publish

Complete the following process for every configurable screen:

1. Click Save as Draft.
2. Review the draft and its preview.
3. Publish the screen through the available screen publication action.
4. Return to the SCREENS list.
5. Confirm that the screen shows PUBLISHED rather than DRAFT.

12. Test the Baseline Experience

Test on physical devices and with realistic data.

1. Test the app after a fresh installation.
2. Verify the complete App Welcome sequence.
3. Verify the default language and switch to every available language.
4. Test login and registration.
5. Verify the complete Onboarding sequence after the first login or registration.
6. Test the bottom navigation in the configured order.
7. Verify the embedded menu URL if embed:menu_link is used.
8. Test the Homepage and Profile as:
   • an anonymous customer
   • a logged-in member
   • a member inside each targeted segment
   • a member outside the targeted segments
9. Test every button, internal link, item-detail link, and website link.
10. Verify the fallback map position with device location permission denied, if maps are used.
11. Confirm that every changed screen is published.

Launch Checklist

• The Mobile App channel exists and uses a clear internal name.

• Your brand colors are set.

• The initial language is correct.

• Every available language has complete saved translations.

• Dynamic translation placeholders remain unchanged.

• Menu routes use supported values and appear in the correct order.

• The embedded menu URL is configured for every relevant language.

• App Welcome works after a fresh installation.

• Onboarding works after the first login or registration.

• Homepage and Profile widgets are ordered correctly.

• Widget visibility and segment targeting have been tested.

• All destinations and external URLs work.

• The fallback map position is correct where required.

• Every required screen shows PUBLISHED.

• The final experience has been tested on supported physical devices.

Next Step

Continue with Mobile App Other Functions for the complete widget catalog, link behavior, global footer, Custom JavaScript, Mobile Wallet controls, and other optional settings.