Asset catalog for the White Label Mobile App

This article details the assets and information you need to provide to Haiilo after purchasing the White Label Mobile App add-on. You must provide the required assets and information via a form.

Each section in this article corresponds to a section in the form. You should gather all the assets and information before filling out the form, as everything must be submitted in a single submission.

When you're ready to submit the required assets and information, use this form:

You can find information on the white label app in these articles: White Label Mobile App and Rolling out the White Label Mobile App. Please review the articles carefully so you understand the process.

Basic information

Field Information Input requirements
Your email address

Enter the email address of the user submitting the form.

This email is also used if we need to contact you for follow-up questions.

Format: jane.smith@haiilo.com
Tenant domain Enter the URL of your Haiilo platform Format: example.haiilo.app / example.coyocloud.com
Server

Choose the cloud on which your platform is hosted: Cloud or Private Cloud.

You can find the information in your contract.

 
Emails and passwords for two test accounts

Provide the credentials (email and password) for two regular user accounts in your platform that can be used for testing. These accounts are required for our developers to test and confirm the white-label app works before we can release it.

The accounts need to have basic permissions to access the features of the mobile app, including Chat permission.

We recommend creating two new local user accounts for this purpose. This allows for the accounts to be deactivated after the app is released.

There are separate fields for each test account. First, you'll be asked to enter the credentials for test account 1, followed by the credentials for test account 2.

App information

Field Information Input requirements Example (click to view)
App display name

Enter the official name for your app to display on the mobile device screen. This can be different from the app name in the App Stores (which is provided later).

There is limited space for an app name. If a name is too long, it will be truncated by the mobile device. The actual limit before truncation depends on the characters' actual width (e.g., iiiiiiiii vs. www) and the font size settings on the individual mobile device.

You cannot use the name "Connect" as the display name as it is reserved by Apple. However, "XYZ Connect" can be used. App display name.png
Accent color Enter the HEX code color to use for the accent color. The accent color is used for highlighted elements inside the app (e.g., the blue-green color in the example). Format: #313131 Accent color
Send feedback button

Enter the email address to which submissions to the Send feedback button will be directed.

We recommend using a group email, such as communications@acme.com.

Format: communications@acme.com Send feedback button.png
App lock

Choose if you want to enforce the app lock function for every user. If the app lock is enforced, the user cannot deactivate it.

If you decide against enforced app lock, each user still has the option to activate it for their app in their settings.

  app lock.png

App store

Field Information Input requirements Example (click to view)
App full name

Enter the official name for your app in the App Stores.

Since the app name in the App Store can be different from the app display name (see above), you could, for example, include your company name in the App Store name (Haiilo GmbH - Haiilo).

The name needs to be unique, cannot be longer than 30 characters, and cannot contain any vowel mutations (e.g., ü)

App full name.png

 

Full description

Define a full description for your app in English and/or German. The description is displayed in the App Stores.

Each description can be a maximum of 4000 characters.

There are separate fields for each language version of the description. If you don't want to provide a description in either English or German, leave the second description field unanswered.

Full description, Android.png

Short description Define a short description for your app in English and/or German. The description is displayed in the App Stores.

Each description can be a maximum of 80 characters.

There are separate fields for each language version of the description. If you don't want to provide a description in either English or German, leave the second description field unanswered.

Short description, Android.png

Screenshot background color

Enter the HEX code color to use for the screenshot background color used in the App Stores' screenshots.

The screenshots themselves cannot be changed and are always hardcoded.

Format: #313131 Screenshot background color.png

General app assets

All Android and most iOS icons (see details below) must be provided as .svg files containing only shapes, paths, or compound paths. Furthermore, the .svg files cannot contain any of the following:

The most common issues related to preparing visual assets for the white label app and how to fix them can be found at the bottom of this article. Please review the suggestions to ensure your visual assets align with Haiilo's requirements.

Field Information Input requirements Example (click to view)
Company logo in the app header

Upload the company logo, which will appear at the top of the app.

  • Size: 450 x 100 px
  • Format: Real vector (.svg)
  • Background: Transparent or white
Company logo in the app header.png

iOS app assets

Field Information Input requirements Example (click to view)
iOS rollout method

Choose your rollout method for the app on iOS.

Apple's guidelines prevent the app from being released into the public Apple App Store. Therefore, we need to upload the app to Apple's App Store as a private unlisted app.

  • BYOD / MDM: Select this option if you have both BYOD (bring your own device) mobile users who aren't managed by MDM (mobile device management) and company mobile users whose mobiles are managed by MDM. Your users will get the app as follows:
    • The BYOD users will use a URL to download the app. You will receive the download URL after we finish the app.
    • The MDM users will receive the app from your MDM system. You need to add the app to the MDM after we finish the app.
  • MDM only: Select this option if you only have managed devices at your company and want to distribute the app via MDM. We will link the app from the private App Store with your Apple Business Manager (see following questions).
  • No iOS: Select this option if you don't need an iOS app at all.

 

Apple Business Manager organization name

Enter the name of your company's Apple Business Manager organization

You only fill out this field if you selected MDM only in the iOS rollout method question

 

Apple Business Manager organization ID

Enter the ID of your company's Apple Business Manager organization

You only fill out this field if you selected MDM only in the iOS rollout method question

 

iOS app icon

Upload a .zip file of the app icons for the iOS app.

Each icon should be in .png format, but the icons must be zipped into an archive before submission.

  • You can read about the different app icons and sizes in the next column or in Apple's icon guidelines.
  • You can use online tools to help generate these icons based on a single icon, e.g., EasyAppIcon.com.

Individual icons in .png, all zipped into an archive (.zip) before submission.

Below are the required icon sizes. All sizes must be provided:

  • 20 x 20 px
  • 40 x 40 px
  • 60 x 60 px
  • 29 x 29 px
  • 58 x 58 px
  • 87 x 87 px
  • 80 x 80 px
  • 120 x 120 px
  • 180 x 180 px
  • 76 x 76 px
  • 152 x 152 px
  • 167 x 167 px
  • 1024 x 1024 px

App icon, iOS.png

iPad empty state icon

Upload a .svg file of the icon to display when you use the iPhone app on an iPad and no content (such as a blog article) is open.

  • Size: 350 x 350 px
  • Format: Real vector (.svg)
  • Background: Transparent
iPad empty state icon.png

Android app assets

Field Information Input requirements Example (click to view)
Android rollout method Choose your desired rollout method. Unlike the iOS app, the Android app can be distributed in the public Google Play Store.
  • BYOD / MDM: Select this option if you have both BYOD (bring your own device) mobile users who aren't managed by MDM (mobile device management) and company mobile users whose mobiles are managed by MDM. Your users will get the app as follows:
    • The BYOD users will find and download the app from the public Google Play Store after we finish the app.
    • The MDM users will receive the app from your MDM system. You need to add the app to the MDM after we finish the app.
  • MDM only: Select this option if you only have managed devices at your company and want to distribute the app via MDM. We will link the app with your Google Workspace organization (see following questions).
  • No Android: Select this option if you don't need an Android app at all.

 

Google Workspace organization name

Enter the name of your company's Google Workspace organization

You only fill out this field if you selected MDM only in the Android rollout method question

 

Google Workspace organization ID Enter the ID of your company's Google Workspace organization

You only fill out this field if you selected MDM only in the Android rollout method question

 

Android app icon

Upload .svg files of the app icons for the Android app. You need to provide the icon in two sizes.

These icons must have an empty padding, and the actual icon should be in the middle area. Read more below.

  • Icon size of first upload: 512 x 512 px (centered 312 px)
  • Icon size of second upload: 108 x 108 px (centered 66 px)
  • Format: Real vector (.svg)

App icon, Android.png

Push notification icon

Upload a .svg file of the icon for push notifications. The icon will be displayed whenever you get a push notification on Android.

  • Size: 96 x 96 px
  • Format: Real vector (.svg)
  • Background: Transparent
  • Icon color: Plain white
Push notification icon.png
Splash screen icon

Upload a .svg file of the icon for the splash screen. The icon will be displayed when loading the app on Android.

The logo inside the icon needs to have padding on either side since it is always round.

  • Size: 220 x 300 px
  • Format: Real vector (.svg)
  • Background: Transparent

Splash screen icon, Android.png

Statement for usage of the client's brand in English

Upload a written and signed .pdf file in English proving that we have permission to use your intellectual property in "our" app or store listing (e.g., brand names, logos, graphic assets, etc.).

The statement needs to be written on your own company paper and signed.

  • Format: .pdf

Please use the below text as a template.

  • Authorization for usage of logo and title in app stores
    To whom it may concern,

    We hereby authorize Haiilo GmbH to place our company logo and title in order to distribute the app via the Google Play Store.

    Haiilo GmbH shall use the logo solely in the manner, for the purpose, and in the media described above and in no other manner, for no other purpose and in no other media.
     
    All rights remain with COMPANY NAME.

    Best regards,
    Signer

 

Common issues related to preparing visual assets

Clipping paths

In the context of vector graphics, clipping paths are graphical elements that do not have a visual representation, as they are used only to hide parts of another shape or layer. Many designers use them to produce complex shapes by hiding parts of them with other shapes. However, some rendering libraries, like the ones Apple uses, parse the clipping paths as regular shapes, displaying the hidden content and/or showing the clipping paths themselves. For this reason, clipping paths cannot be used in the asset files.

  • How to identify it: Every vector editing software labels a clipping path in different ways, but usually, the clipping path layer will have a clip in its name. Alternatively, you can open the .svg file with a text editor and search for the keywords clip or clipping.
  • How to fix it: There are two ways:
    • Completely remove the clipping path object/layer if it does not affect the appearance of the asset.
    • In case the removal affects the appearance, use any editing software tool that can produce a cutout of a shape using the outline of another shape. In Adobe Illustrator, this tool is the Pathfinder in Crop mode.

A green teapot with a handle

The logo above is made up of a teapot shape and a circular clipping path

A green teapot with a green handle

The same shape, removing the clipping path with Illustrator's pathfinder tool (Crop mode)

Non-editable text shapes

Text objects that are not expanded (that is, editable text objects) cause many issues when rendered, e.g., inexistent fonts and inexact kerning/leading. For this reason, all texts in the asset must be converted/expanded into shapes.

  • How to identify it: The text can be easily edited with vector graphics software.
  • How to fix it: Almost all vector editing software offers a specific tool for it. In Adobe Illustrator, it is done via Object > Expand.

Editable text (above) and expanded text (below)

Incorrectly scaled assets

Android icons are extensively cropped to adapt them to the menu style. For this reason, we need the actual icon to be in the middle in a so-called safe zone.

  • For the 512 px icon, anything outside a centered 312 px-diameter circle will be cropped out.
  • For the 108 px icon, anything outside a centered 66 px-diameter circle will be cropped out.
  • How to fix it: The image's logo, symbol, or relevant elements should be scaled down (zoomed) to keep them inside the visible part of the asset.

The visible areas (not in scale) of the icons

Raster images inside vector assets

It is advisable to avoid embedding raster (bitmap) images such as photographs in the .svg file unless necessary. This is because raster (bitmap) images can increase the file size, negatively impact the application's performance, and lead to a poor user experience when the image quality degrades upon enlargement.

  • How to identify it: When zoomed, the raster images start degrading in quality.
  • How to fix it: If possible, the raster image should be replaced by shapes.

A screenshot of a computer

Description automatically generatedA

Raster circle (red) vs vector circle (green)

Was this article helpful?