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. | |
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 | |
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 | |
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 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., ü) |
|
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. |
|
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. |
|
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 |
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:
- Raster images
- Text objects (text should be expanded to paths)
- Clipping mask
- Transparency masks
- Grouping (only one layer with one level)
- Bitmaps
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. |
|
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. |
|
|
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.
|
Individual icons in .png, all zipped into an archive (.zip) before submission. Below are the required icon sizes. All sizes must be provided:
|
|
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. |
|
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. |
|
|
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.
|
|
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. |
|
|
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.
|
|
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.
Please use the below text as a template.
|
|
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 keywordsclip
orclipping
. -
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.
The logo above is made up of a teapot shape and a circular clipping path
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
Raster circle (red) vs vector circle (green)