Set up the mobile app

Welcome to your new app! After the initial setup process, making changes to your app is as easy as editing content in any other module. This article will walk you through what you need to do to get your app up and running and onto the Apple App Store and the Google Play Store.

Before you begin 

The iOS/Android app works with the newest Finalsite modules, Messages and Resources. Messages is required to send push notifications, and Resources is necessary for displaying your header and other images. Before construction of your app can start, these modules must be enabled on your site.

If you have not already done so, please refer to the Self-Enabling Messages Guide and the Enabling Resources Guide to complete that process. Don’t worry, you can still use eNotify and File Manager for other things, if you prefer.

Step 1: Complete the survey

As you embark on the app-development journey, your project team will provide you with a survey form to fill out so that they can perform the initial build of your app. Following are some of the details you’ll be asked to provide. 

Name

The name of your app is what will appear in the app stores. It should be a short name that easily identifies the app as belonging to your organization. 

Display name

This short name displays under your app’s icon on the user's devices. Because of space constraints, it should be limited to 12 to 14 characters, depending on the width of individual letters in the name.

Note: If the display name is too long, any spaces will be removed and an ellipsis will be added to replace the overflow text.

App header

The app header is a wide but short area that consists of a logo on a dark background.

Logo

The app header logo should be a horizontal logo that can be used on a dark background. 

Vector (.eps, .ai, .svg) artwork is preferred, or a .png file with a transparent background that is at least 160 pixels tall.

Note: The logo on your website may not be large enough. Please double-check the dimensions before submitting.

Color

Please provide the hex code of the color you would like to use as the header background.

This color will also be used as the font color elsewhere on the app, so it needs to be dark enough to be legible on a white background. 

If you do not know the hex code for the color you’d like to use, you may be able to find it on the Style Guide pages in the Production branch of your site. If you are still unable to locate the code, you may also provide an example of where the color is located on your site. 

App icon and loading screen

The app icon and loading screen will share an icon and background color.

Icon

The app icon is a square icon that will be used with a solid color background. 

Vector (.eps, .ai, .svg) artwork is preferred, or a .png file with a transparent background that is at least 1024 pixels square.

Color

Please provide the hex code of the color you’d like to use as the app icon background, or the location of the color on your site. This can be any color, light or dark, as long as it works behind the icon.

Privacy policy URL

It is required to include a privacy policy for your app. Because you’re asking people to put this app on their personal devices, it’s necessary to demonstrate that you have considered the implications. The URL for this privacy policy should go in this field. For some guidance on creating your organization’s privacy policy, see Creating a Privacy Policy.

Support URL

It is also required to include a link to a page on your website where app users can get in touch with you if they require help using your app. This page will be linked in your app’s page in the app stores under “App Support” and will also appear as the "Contact Us" link on the app's More screen.

We suggest that this link go to a page on your website with a form on it. This form should include at least two required fields: a text area field for users to describe what assistance they’re looking for and an email address field so that you can contact them later.

Support email

In addition to the support URL, Google requires a support email address for the app. Please provide an email address that app users can use to get help from your organization.

User login

The app can be set up to allow for user login to access private content categories, such as directory information. Constituents can log in using the same credentials they would use to log into their portal accounts on your website. 

Home screen content

In the initial app setup, we’ll configure the app home screen to show a posts slideshow and calendar list. Although these can be changed later in the process (and even after you deploy the app), please provide one or more Posts boards and Calendar Manager calendars to use as demo content.  

Note: For best results, the posts on the board you supply should have thumbnail images.

 

Step 2: Download your test app

If you have an iOS device, you will be able to see your content live on the app before the app is actually live, using an app called Testflight. You will receive a link from your project team to access your app using test flight, and up to five users can download the test app to their iOS device.

Changes you make to your app on the Mobile Apps module, or in any of the content areas linked to the app, will be reflected as soon as the app is refreshed. 

 

Step 3: Select your content

After you submit the survey form and our team completes the initial build of your app, you’ll be given access to the app settings in the Mobile Apps module. Now it’s time to configure your content. 

Home

The home screen of your app has a section for Posts and a section for events.

Choose the Posts collection, board, or boards you want to display on the home screen, and decide whether to display them as a poster image (slideshow) or a list.

Choose the calendar(s) you want to display from Calendar Manager, ensuring that at least one is set to public in the “LMS/App Availability” section of the Calendar Settings screen.

For more information, see Mobile app Home screen.

Other content

Your main app content comes directly from the content that you’re already displaying on your website, whether it’s from Posts, Resources, Calendar Manager, Athletics Manager, or Constituent Manager. You can also add custom links that go to your website, your LMS, or other helpful locations. 

Click on the edit pencil icon next to the section name to edit the label, the content, and the menu icon. A variety of icons is available, but new icons cannot be added.

Note: If you do not want to include any of this content in your app, simply do not select anything for that section. The icon will not appear in the navigation.

Drag and drop the gray bars for each section to reorder the sections in your navigation. The first three icons will appear in the bottom navigation, while the rest will appear in the “More” menu.

Posts

The Posts section displays a list of posts from the board(s) you select. See Mobile app Posts screen for more details and best practices.

Resources

Display public or private Resources galleries on this tab and allow users to view and share files. See Mobile app Resources screen for more details and best practices.

Events

Select the calendars from Calendar Manager that you wish to display in the app on the Events tab. See Mobile app Events screen for more details and best practices.

Athletics

Choose teams from the dropdown menu to display a list of athletic events in the app. See Mobile app Athletics screen for more details and best practices.

Directory

A constituent directory may be included in your app content. Select the role or roles you want to appear in the directory from the checklist, then use the radio buttons and dropdown menu to determine who each role will be visible to. See Mobile app Directory screen for more details and best practices.

Note: Privacy settings for the directory will follow those set in the Constituent Manager Settings section. Before you make your constituent information available to the public, please check these settings to ensure their privacy is respected.

Custom links

Click “Add Custom Link” to place an external link in the application that will open in the mobile device’s web browser. These may be external links, such as social media sites, or internal site pages. Enter the label and the full web URL, including https://, for the link you want to create. See Mobile app custom links for more details and best practices.

Custom links may be deleted using the trashcan icon next to the link label. 

 

Step 4: Deploy your app

Once you are ready to roll out your app to the public, it’s time to submit it to the app stores for approval. Your project team will take care of most of this process for you, but you will need to supply some information. 

App store information

The project team will send you another survey form, which asks how you want the app to be described and catalogued in the app stores. If you’ve never thought about this before, that’s OK! You can use the examples provided in the form and customize them to apply to your app. 

App store description

This text is displayed as the main app description in each app store. Users who browse to your app will read this to understand what the app will do for them.

Short description

This text is displayed as a quick summary of the app. It is only used in the Google Play store. There is a strict 80-character limit for this description.

Keywords

Keywords are used behind the scenes to help users find your app. Think of a few keywords that may help users search for your app. Your keywords can be up to 100 characters total.

iOS Developer account

To submit the app to the Apple App Store, you'll need to create an iOS Developer account with Apple. Instructions for how to do so are available at Set up an iOS Developer account.

User login

If login is enabled, we’ll need to provide a username and password when submitting the app for approval to Apple/Google. To allow Apple & Google to review the app, Finalsite will create a hidden account on your site. This user will not be visible on your website.