Setting up and customizing White Label App for iOS

White Label App allows you to customize the appearance of the app so that it looks unique and attracts users. This is important because the first impression of the design influences user interest. A unique style emphasizes the features of your brand and fosters a long-term relationship with your audience, as well as increases the chances of passing App Store validation.

Before customizing your app, be sure to follow all the steps from the article Preparing the configuration file and accessing data.

Note! Most changes are made in the configuration.json file. After making changes, be sure to save the changes to the file, run the fastlane setup command in the terminal, and rebuild and launch the build.

Application name

You can set the name of the application that will be displayed for the users below its icon in the apps list. To do this:

1. Open the configuration.json file and find the following code:

… 
    "display_name": {
      "base": "en",    // 
      "localized": {
        "en": "Travel App EN Git", // Name in English
        "es": "Travel App ES Git" // Name in Spanish
      }
    }
…

2. In the base field, specify the main language of the app’s name. This language will be used if the language selected on the user's device is not included in your app. For example, if the user has the Thai language selected in the device settings, but you do not have an app name in That language, then the user will see the name in the main language.

3. You can specify the application name in multiple languages by specifying the language code and the name in the given language.

For example, the application is available in English, Spanish, and French, and the primary language is Spanish. The code should look like this:

… 
    "display_name": {
      "base": "es",    // primary language is Spanish
      "localized": {
        "en": "Voyages", // Name in English
        "es": "Los viajes", //  Name in Spanish
        "fr": "Les voyages" // Name in French
      }
    }
…

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Tabs selection

The application can have 2 to 5 sections in the tab bar (an interface element that shows which sections exist in the application and where the user is at any given time). For example:

You can remove or add sections and change the subsections within some of them.

Tickets and Hotels tabs

Tickets and Hotels are tabs for searching flights and hotels, and you can add or remove them. To do this:

1. Open the configuration.json file and find the following code:

…   
"white_label_config": {
    "screens_to_display": [
      {
        "type": "flights" // Tickets tab
      },
      {
        "type": "hotels" // Hotels tab
      }
    ]
  }
…

2. To remove the tab delete an unnecessary line from the code. For example, remove airline tickets:

…   
"white_label_config": {
    "screens_to_display": [
      {
        "type": "hotels" // Hotels tab
      }
    ]
  }
…

3. In this case, only the Hotels and the Information tabs will be present in the app.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Other tab

Other tab – the tab in which, when clicked, the application will open the specified link in WebView format (a web page within the mobile application). For example, you can add a link to a car rental search in this section or to your own blog.

You can add up to 2 such sections in the app, for example:

To add the tab:

1. Open the configuration.json file and find the following code:

…  
"white_label_config": {
    "screens_to_display": [
      {
        "type": "other", // Other section
        "parameters": {
          "icon": "ic_other_1", //  Icon for the "Other" tab
          "title": {  // Tab title
            "base": "en",
            "localized": {
              "en": "Other",
              "es": "Otros"
            }
          },
          "url": {  // link
            "base": "en",
            "localized": {
              "en": "https://www.google.com",
              "es": "https://www.google.es"
            }
          }
        }
      }
    ]
  }
…

3. In the title field specify the tab title. You can add titles in multiple languages if needed (see localization in the configuration file).

4. In the url field, specify the link that will open when a user clicks this tab. If the application has multiple languages, make sure to add links for different localizations.

5. Make similar changes for the second "Other" tab. If you don't plan to use this section, just delete the code from the file.

6. You can also add your own icons for the "Other" tabs. To do this go to the white-label-app-ios-main/Resources/images` folder and:

For the "Other 1" tab: Replace the default icon `ic_other_1.pdf` in the `ic_other_1.imageset` folder with your own icon.
For "Other 2": Replace the default icon `ic_other_2.pdf` in the `ic_other_2.imageset` folder with your own icon.
Icon format: pdf

Make sure to keep the names "ic_other_1.pdf" and "ic_other_2.pdf" intact, as the application won't be able to find the added icons otherwise.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Information tab

Information tab contains favorites, regional settings, price settings, a link to the user agreement, and other subsections, where:

The 'Favorites,' 'About the App,' 'Rate this App,' and 'Share the App' sections are optional and can be removed/added.
The 'Regional Settings,' 'Display Prices,' and 'Privacy' sections cannot be removed.

The Information tab cannot be deleted, but you can make changes to the subsections within, for this purpose:

1. Open the configuration.json file and find the following code:

…  
 "info_screen_config": {
    "items_to_display": [
      "favorites", // favorites section
      "about_app", // about the app
      "rate_app", // rate this app
      "share_app" // share the app
    ],
...

2. For example, if you want to remove the "Favorites" and “Share the app” subsections, simply delete them from the items_to_display field.

…  
 "info_screen_config": {
    "items_to_display": [
      "about_app", // about the app
      "share_app" // share the app
    ],
…

The application will look like the following Before and After:

4. To add the description for the About the App subsection find the following code:

…  
 "info_screen_config": {
    "items_to_display": [
      "about_app", // about the app
     … 
    ],
    "about_app_info": {
      "description": {
        "base": "en",
        "localized": {
          "en": "Application description",
          "es": "Descripción de la aplicación"
        }
      },
      "developer": {
        "base": "en",
        "localized": {
          "en": "CleverPunpkin Ltd.",
          "es": "OOO CleverPumpkin"
        }
      },
      "partner_url": {
        "base": "en",
        "localized": {
          "en": "https://www.google.com",
          "es": "https://www.google.es"
        }
      }
    }
  },
…

5. Make changes to the following fields:

description — specify the application description (localized for all languages in the application (see localization in the configuration file).
developer — add the name of your company (localized, if desired).
partner_url — add a link where the user can go to your website, social network, etc.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Color settings and palette

All colors in the application are automatically generated based on one primary base color. To change the color:

1. Open the configuration.json file and find the following code:

...  
 "style": {
    "base_color": "#7648C5", // base color
    … 
    "palette": "lab" // The principle of generating a palette
  },
...

2. In the base_color field, specify the HEX code of the primary base color for the light theme, the entire palette, including colors for the dark theme, will be generated automatically.

3. In the palette field specify one of the proposed methods of palette generation:

hsv: The base color will remain as you entered it (recommended for bright colors).
lab or null: The contrast of the base color will be modified (recommended to choose if the base color itself is not very contrasting).

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

It is recommended to build a build with your base color and different palette generation principles for light and dark themes to see which one looks better for your application. Here are the examples of different colors:

How to override colors

To override the colors in your app, add the overridden_colors block in the style section of the configuration file. Add the name of the element which color you want to override and specify colors for light and dark themes.

Example:

"style": {
...
"overridden_colors": {
"ios": {
"primary": {
"light": "#C71585",
"dark": "#21ffe5"
}
}
}
}

After that, run the fastlane setup command to apply the changes.

List of elements:

Main сolors

primary – primary accent color of the application.
primaryDisable – primary color in a disabled state (e.g., on "Find Tickets"/"Find Hotels" buttons).
primaryPressed – primary color in a pressed state (e.g., when a button is pressed);
surfaceTint – background color for elements/secondary buttons (e.g., date range in the calendar, Filters button, Price Chart).
onPrimary – text on buttons with a primary color background.
onPrimaryDisable – text on buttons with a primary color background in light theme, disabled state.
onSurfacePrimary – text on elements/secondary buttons.
onSurfaceDisable – text on elements/secondary buttons in light theme, disabled state, and icon colors.
surfaceSecondary – text on elements with a "gray" background (e.g., input fields on the start screen) and icon colors.
homeScreenText – text on the background of the start search screens.

Colors of small interface elements – a color palette for small decorative and functional elements (e.g., borders, dividers, badges), giving the interface a finished look.

surfaceBackground – primary background color.
surfaceCardBackground – background color for lists, for example the list of hotels, tickets, hotel offers.
surfaceSuccess – background color of the “Payment by Card” label in hotel booking offer
onSurfaceSecondary – color for secondary text on element backgrounds;
homeScreenOverlay – overlay color on the home screen.
system – color of the status bar (top part of the screen displaying system indicators such as time, battery level, network signal, Wi-Fi, etc.) and the home indicator color (small horizontal bar at the bottom of the screen on devices without a physical Home button).
outline – color of the border around a button that helps it stand out from other elements and the border around text fields, indicating where users can enter text.
overlay – background color of the modal window overlay, a semi-transparent layer applied over main content when a modal window appears.
modalAlert – background color for alert modal windows;
modalAppbar – color of the top bar (panel with back arrow/close arrow, screen title).
modalCard – background color for cards within a modal window;
modalTabbar – background color of the tab bar;
modalAppbarScroll – toolbar color when scrolling in a modal window, maintaining its visibility during movement.
skeletonBaseColor – base accent color for content loading animation.
skeletonSecondaryColor – secondary color for content loading animation.
searchbar – color of the search bar.
divider – color of the dividing line, used for visually separating sections, e.g., in lists and on hotel and ticket info screens.
error – color for elements indicating errors;
success – color for elements indicating successful actions or outcomes;
warning – color for warnings.

Badge Colors for Tickets

badgeTicketAd – color for "Ad" ticket badge;
badgeTicketComfort – color for "Most Comfortable" tickets badge;
badgeTicketWalk – color for tickets with a walking option;
badgeTicketPopular – color for "Most Popular" tickets badge;
badgeTicketFast – color for "Fastest" tickets badge;
badgeTicketCheap – color for "Cheapest" tickets badge.

Hotel Badge Colors

badgeHotelBlue – badge color for hotels with beach, pool, lake, or river amenities;
badgeHotelRed – badge color for hotels with casinos, boutique, luxury hotels, and Airbnb Plus hotels;
badgeHotelOrange – badge color for hotels categorized as business, gym, new, party, popular, romantic, sports, trendy;
badgeHotelPurple – badge color for hotels in adult-only, dinner, kid-friendly, restaurants, shopping, top-rated, wellness categories;
badgeHotelGreen – badge color for hotels categorized as comfortable, eco-friendly, budget, family, friendly, golf, kitchen, quiet, resort, terrace, value;
badgeHotelDarkBlue – badge color for hotels with shuttle, attractions, transport, view, airport, architecture, landmark, downtown, city, highway, metro, nightlife, train station categories.

Element corners settings

Corner rounding is applied to all elements on the screen, including buttons, input fields, icons, and illustrations. To change the corner settings of the elements:

1. Open the configuration.json file and find the following code:

…   
"style": {
   … 
    "corners_type": "sharp", // Corners type (sharp, default, round)
…

2. In the corners_type field specify one of the offered styles:

sharp
default
round

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Icon Style

The icons in the application have corner rounding and also a style. To make changes to the style:

1. Open the configuration.json file

2. In the style field find the icons_type parameter:

… 
  "style": {
    … 
    "icons_type": "line" // Icon style
  },
…

3. In the icons_type field, specify one of the icon styles: filled, tint, or line.

filled
tint
line

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Google Maps

For working with maps in the iOS application, integration with Google Maps is not required, so you need to remove the line "google_maps_api_key": "token" from the configuration file.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Feedback and rating of the application

In order for the user to be able to interact with the “Contact us” and “Rate the app” sections:

1. Open the configuration.json file and find the following code:

… 
  "constants": {
    … 
    },
    "feedback_email": "test@test.com",
    … 
    "appstore_id": "",
…

2. Insert your information into the following fields:

feedback_email — an email address for users to send feedback after clicking the 'Contact Us' button.
appstore_id — the application id, which is assigned to the application when it is created in App Store Connect. If the application id is not added, then when the user clicks the “Rate this app” button, they will not be able to get into the App Store and leave a review.

If you are not planning to include these sections in your app, remove the "feedback_email": and "appstore_id": from the configuration file.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Firebase

You can use Firebase services in the application, for example, for analytics monitoring. To complete this setup:

Register in the Firebase console.
Create a project and add your new iOS application to it (find out more in the Setting up a Firebase project and registering apps article).
After adding the application to your project, navigate to Firebase 'Project settings' -> 'General'.
Under 'Apple apps', locate and download the google-services.json file. There will be two separate files for debug and release projects.
Rename the downloaded files to `GoogleService-Info-Debug.plist` and `GoogleService-Info-Release.plist` respectively.
Go to white-label-app-ios-main/Supporting Files` and replace the files `GoogleService-Info-Debug.plist` and `GoogleService-Info-Release.plist` with the ones downloaded from Firebase.

Table with analytics events in the file – White Label App – Firebase [ENG].

Appodeal advertisements

Appodeal advertisements can look like this:

If you don’t need advertisements in the application, remove the advertising{ } block with all the values inside it from the configuration.json file.

To add advertising to the application:

1. Register with Appodeal.
2. Open the configuration.json file and find the following code:

…     
"advertising": {
    "appodeal_api_key": "",
    "google_admob_app_id": "",
    "placements": {
        "air_ticket_placement_interstitial": "",
        "air_ticket_placement_banner": "",
        "hotels_placement_interstitial": "",
        "hotels_placement_banner": ""
      }
    },
…

3. Insert your API key from your Appodeal account into the appodeal_api_key field.

4. For the google_admob_app_id field, insert your AdMob ID from your AdMob account if available. If AdMob is not connected, remove the line entirely from the file.

5. In the placements field, specify where advertising will be displayed:

placement_interstitial: Display advertising as a full-screen banner when searching for tickets and/or hotels.
placement_banner: Display advertising as a small banner above the search results cards.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Learn more about Appodeal Placements.

AppsFlyer

With AppsFlyer Onelink in White Label App, you can share a link to the app. You do not need to integrate the AppsFlyer SDK additionally to work with links.

If you want to track attribution and analytics of app link clicks and opens, register with AppsFlyer and add the appsflyer_dev_key to your configuration.json file (find out more in Retrieve the dev key).

If you do not plan to track analytics, remove the appsflyer_dev_key parameter from the file.

… 
  "constants": {
    … 
    "appsflyer_dev_key": null
…

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Share ticket

From the screen of a particular ticket in the Tickets tab, you can share a screenshot of that ticket as well as a link.

To implement this functionality:

1. Open the configuration.json file and find the following code:

… 
  "constants": {
    … 
    "sharing_data": {
        "sharing_link": "https://www.google.com",
        "handling_link": "https://www.google.com"
…

2. Make changes to the following parameters:

sharing_link — insert a link that will be sent along with the screenshot. It can, for example, redirect the user to your website.
handling_link — specify the link that will open your application if it is installed, or your website if it is not installed. To do this, you also need to add to your website the ability to open the application using a link to your website (see Add the associated domain file to your website).

If your application doesn't have a Tickets section or you don't need this functionality, the constants{} block can be removed.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

App Icon

To change an application icon:

1. Navigate to white-label-app-ios-main/Resources/images/ic_application.appiconset`.
`ic_application.appiconset` is the application icon (the default icon is used by default).

2. Replace the default icon with your own. It is mandatory to keep the file name as "ic_application.appiconset" because the application won't be able to find it otherwise.

The application icon should be 1024x1024 in size and in .png format.

You can also replace the icon through Xcode:

Refer to the Technical Requirements for App Store Icons for icon appearance recommendations.

Search Screen Titles

You can change the headings in the "Tickets" and "Hotels" sections.

You can add titles in multiple languages if needed. To do this simply open the folder with the needed language two-letter code (see point 1 below).

Note: If the title doesn't fit in a single line, the text will wrap by words.

Flight search screen title

1. Open the white-label-app-ios-main/Resources/Strings/SDK/[language two-letter code].lproj/FlightsSearch.strings file (it contains strings for the flight search screen).

2. Find the "title" parameter – this is the title text displayed on the flight search screen.

3. Replace the default text "Search cheap flight tickets" with your new title.

// MARK: - Titles

"title" = "Search cheap flight tickets";

// MARK: - Placeholders

"departure_airport_placeholder" = "From";
"arrival_airport_placeholder" = "To";
"dates_placeholder" = "Departure";
"passengers_placeholder" = "Passengers and class";

// MARK: - Button titles

"search_button_title" = "Search";

Important: Do not change the name of the "title" parameter, only the text stored in it. Otherwise, the application won't be able to find it.

Hotels search screen title

1. Open the white-label-app-ios-main/Resources/Strings/SDK/[language two-letter code].lproj/HotelsSearch.strings file (it contains strings for the hotel search screen).

2. Find the "title" parameter – this is the title text displayed on the hotel’s search screen.

3. Replace the default text "Search unforgettable hotels" with your new title.

// MARK: - Titles

"title" = "Search unforgettable hotels";
"my_location_button_title" = "Current location";
"map_location_button_title" = "Point on the map";

// MARK: - Placeholders

"location_placeholder" = "City or hotel";

// MARK: - Button titles

"search_button_title" = "Search";

// MARK: - Messages

"location_troubles_title" = "We couldn't determine\nyour location";
"location_troubles_close" = "Close";
"restricred_location_access_message" = "Allow this app to determine your location";
"restricred_location_access_not_now" = "Later";
"restricred_location_access_settings" = "Settings";

Important: Do not change the name of the "title" parameter, only the text stored in it. Otherwise, the application won't be able to find it.

Input Field Labels

The input field label is the text prompt that is displayed in the form fields before the user enters any data:

For Tickets, default texts are "From," "To," "Departure," and "Passengers and class." For Hotels the default text is "City or hotel."

Field labels can be specified in multiple languages if necessary. To do this simply open the folder with the needed language two-letter code (see point 1 below).

Tickets screen input field labels

1. Open the white-label-app-ios-main/Resources/Strings/SDK/[language_code].lproj/FlightsSearch.strings file. This file contains strings for the flight search screen.

2. Find the parameters 'departure_airport_placeholder', 'arrival_airport_placeholder', 'dates_placeholder', and 'passengers_placeholder'. These correspond to the text prompts 'From,' 'To,' 'Departure,' and 'Passengers and class,' respectively.

3. Replace the default text prompts with your desired values.

// MARK: - Titles

"title" = "Search cheap flights tickets";

// MARK: - Placeholders

"departure_airport_placeholder" = "From";
"arrival_airport_placeholder" = "To";
"dates_placeholder" = "Departure";
"passengers_placeholder" = "Passengers and class";

// MARK: - Button titles

"search_button_title" = "Search";

Important: Do not change the parameter names 'departure_airport_placeholder', 'arrival_airport_placeholder', 'dates_placeholder', and 'passengers_placeholder'. Only modify the text stored within them, as changing the parameter names could prevent the application from locating them.

Hotels screen input field labels

1. Open the white-label-app-ios-main/Resources/Strings/SDK/[language_code].lproj/HotelsSearch.strings` file. This file contains strings for the hotel search screen.

2. Find the "location_placeholder"parameter = hint text "City or hotel".

3. Replace the default text with your desired value.

// MARK: - Titles

"title" = "Search unforgettable hotels";
"my_location_button_title" = "Current location";
"map_location_button_title" = "Point on the map";

// MARK: - Placeholders

"location_placeholder" = "City or hotel";

// MARK: - Button titles

"search_button_title" = "Search";

// MARK: - Messages

"location_troubles_title" = "We couldn't determine\nyour location";
"location_troubles_close" = "Close";
"restricred_location_access_message" = "Allow this app to determine your location";
"restricred_location_access_not_now" = "Later";
"restricred_location_access_settings" = "Settings";

Background Image

By default, the background for Tickets and Hotels tabs is a single-color fill with a vector pattern, based on colors from the generated palette (see Colors settings). But you can add your custom background image instead of a plain fill, for example:

Note!

The background image will be the same for both Tickets and Hotels tabs.
The app is designed for vertical orientation, so if you upload a horizontal image, it will stretch vertically and compress horizontally to fit the screen size.
Two types of images are supported: vector and raster.

How to add a vector image

1. Go to white-label-app-ios-main/Resources/images/img_search_background

2. Select "Scale: Individual and Single Scales" on the left panel

3. By default, the background is in the form of two vector images - one for the dark theme (Dark) and one for the light theme (Any Appearance).
4. Replace them with your two images for both dark and light themes.

The default resolution for vector images is 390x844, which is recommended for new images as well.

How to add a raster image

1. Go to white-label-app-ios-main/Resources/images/img_search_background`.

2. Select "Scale: Individual and Single Scales" on the left panel.

3. By default, the background is in the form of two vector images - one for the dark theme (Dark) and one for the light theme (Any Appearance). Delete the default vector images by selecting the image and pressing "Backspace."

4. Add two images instead of the deleted ones, but these images may not fit all device screen sizes on which the app will be installed. Therefore, it is recommended to add six images - three for each theme (for more information on image formats in iOS, refer to the Human Interface Guidelines, and for resolutions of existing devices, refer to The Ultimate Guide To iPhone Resolutions).

Language (Localization)

By default, the application supports 26 languages. All texts in the application are translated into these languages and are set as default options in the device settings.

All strings used in the application are stored in: white-label-app-ios-main/Resources/Strings`.

Folders with translations are organized by language and further divided into main modules: tickets, hotels, information, and general.

Important: When making any changes to translations, do not alter the keys (names) of the strings, as doing so may cause the application not to process and display them.

Changing strings in existing languages:

Go to white-label-app-ios-main/Resources/Strings/SDK`.
Find the folder for the desired language.
Modify the necessary strings.
Execute the command fastlane setup in the command line.

Adding a New Language:

Create a copy of one of the folders in white-label-app-ios-main/Resources/Strings/SDK`, e.g., "en.lproj."
Rename the copy in the format "[two-letter language code, ISO 639-1 standard].lproj."
Translate all strings in all files in the folder to the desired language.
Ensure the folder with translations is in white-label-app-ios-main/Resources/Strings/SDK`.
After adding a new language, remember to add it to the translations in `configuration.json`.
Execute the command fastlane setup in the command line.

Note: When using Right-to-Left (RTL) localizations, the application will automatically adapt to them, mirroring the interface compared to Left-to-Right (LTR) localizations.

How to add translations to other languages in the application

You can add translations into different languages for the following titles via a configuration file:

Application name
Other tabs titles
Application description in the About the app section of the application

To do this, specify in the configuration file:

base – the language (localization) whose translated string will be used if the selected device language is not in the application.
localized – translated string for multiple languages, if necessary.

Languages are specified in the format of a two-letter code (ISO 639-1 standard).

Splash Screen

White Label App uses the Coordinator approach to implement routing and splash screens. By default, there are 2 coordinators implemented in the application:

AppCoordinator – responsible for application routing at startup. Using it, you can implement additional onboarding logic and/or a custom splash screen. It is located in Sources/Presentation Layer/App in the project folder.
TabsCoordinator – responsible for routing between tabs Tickets, Hotels, etc. You can add your custom tabs to it. It is located in Sources/Presentation Layer/Tabs in the project folder.