Defining Screens and Menu items in the Mobile App

Defining Screens and Menu items in the Mobile App

What are the different type of Mobile App Screens available?

The screen types are as follows:

  • Custom - A text based screen that is often used for "Conference Information", "About Our Organization", "Hotel Information", or anything else you'd like.
  • PDF - A link to a PDF file that has been uploaded.
  • Image - A link to an a image file. This is useful for maps of the venue, hotel or city. Recommended image format is .png or .jpg
  • External Link - The menu item will be linked to a website (e.g. your own site). Set it to open in the app or outside of it in an external browser.
  • Exhibitors - A link to the exhibitor module of the app (See below).
  • Exhibitor Floor Plan - A link to an image file of the exhibitor floor plan. A supporting JPG or PNG file must be uploaded.
  • Sponsors - A link to the sponsor module of the app (See below).

Each screen will be linked off of the app slide-in menu.
Each page should also have an icon affiliated with it.

How to Create a Mobile App Screen?

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, select the app from the dropdown menu
  4. Click App Screens in horizontal menu
  5. Select New Screen
  6. Enter a Screen Title (i.e. the Screen Name such as TwitterFeed)
  7. For Display Menu On, select where you want this menu option to appear
    • If NOT using the Mobile app and only the Online program, select Web Program Only
    • Some screens are only applicable to the Mobile app and are not available in the Online Program e.g. My Notes, My Itinerary
  8. Select a Screen Type (e.g. image)
  9. Click Add Screen
    • Depending on the screen type selected, you may be asked to upload a file or provide more information
    • For example, if you selected a screen type of Image, the screen will refresh and you will be able to upload a file

EXAMPLES

A. Adding a Twitter Feed

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, select the app from the dropdown menu
  4. Click App Screens in horizontal menu
  5. Select New Screen
  6. Enter a Screen Title = Twitter
  7. Select a Screen Type = Twitter
  8. Click Add Screen
  9. In Twitter Query, enter your Hashtag reference e.g. #2018Conference
  10. Click Update Screen button

B. Adding a Screen for Evaluations/CME

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, select the app from the dropdown menu
  4. Click App Screens in horizontal menu
  5. Select New Screen
  6. Enter a Screen Title = Evaluations/CME
  7. Set Auto-Login = Yes
  8. Select a Screen Type = External Link
  9. Click Add Screen
  10. Add Link URL = Front-End Landing URL from Credits Management Screen
  11. Click Update Screen button

C. Adding Floor plan image

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, select the app from the dropdown menu
  4. Click App Screens in horizontal menu
  5. Select New Screen
  6. Enter a Screen Title = Floor Plan
  7. Select a Screen Type = Image
  8. Click Add Screen
  9. Upload an Image file
  10. Click Update Screen button

How to Configure the Mobile App Home Screen?

  1. Click Dashboard
  2. Click Mobile App Management in left side menu
  3. Select the corresponding Conference from the dropdown list
  4. Click Home Page
    • You may configure up to 6 rows of up to 3 icons per row for your mobile app Home Page
    • Click in a field and a dropdown box of available defined screens will appear, select the screen you wish to place in the Home Page layout
    • The Preview Home Screen will update as you add/remove the screens in the layout

How to upload a list of Exhibitors in the Mobile App?

The exhibitor module is a special page of the app that is a directory of companies.
Each company can have a name, website, description, and booth number.
This data is entered into the app via a CSV upload.

NOTE:

  • The order of the companies does not matter as they will appear within an alphabetical directory.
  • Our exhibitor directory does not currently have images included.
  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, click the app from the grid
  4. Under Get Set section, click Exhibitors
  5. Enter Screen Title e.g. Exhibitor Directory
  6. Set the Display Menu on option as:
    • Native Mobile App Only = if only using mobile app
    • Both Web Program & Native Mobile App = if using both online web and mobile app
  7. Click Add Screen
  8. Click the link to the right for 'Download the Import template' file
  9. Click the link to Download Import Template file
  10. Open the File in Excel
  11. Copy and Paste your data in the file
    NOTE: There will be a sample record in the file as an example.
  12. Save the File in CSV format
    • For PC's, use Save as File Type CSV UTF-8 (*.csv)
    • For MAC's, use Save as Windows Comma Separated (.csv)
  13. Upload the CSV file by Clicking Upload Exhibitor CSV

How to Edit the Exhibitors list in the Mobile App?

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, click on the app in the grid
  4. Under Get Set Section, click Exhibitors
  5. Click Download Current Directory
  6. Edit the CSV file
  7. Re-upload the CSV file by clicking Upload Exhibitor CSV

How to add Sponsor logos in the Mobile App?

The sponsor module is a special page of the app that allows the display of sponsors logos. The logos may be hyperlinked to the respective sponsor website.

To add sponsors, prepare the following items:

  1. Sponsor CSV File - An edited CSV with all sponsor info in order that they should appear
  2. Sponsor Image Files - Mobile-ready images for all sponsors

All of these files should be uploaded as a single Zip file.

TIPS:

  • The order the companies appear within this file is the order they will display within the app.
  • URLs must start with http://
  • The image file names must match exactly. It is case-sensitive.
  • You may create customized 'line breaks' like "Gold Sponsor" to separate the companies. The template you downloaded creates a header "We appreciate our sponsors" as an example.
  • The sponsor image files (the jpg or png files) should be added to a zip file that has all of them in it.
  • Images should be no more than 300 pixels wide. If you upload excessively large files they are scaled down but are not re-sized. This means your final app will be larger than it needs to be and the end-users will have to download a larger app.

Create the Sponsor Upload File

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, click on the app from the grid
  4. Under the 'Get Set' section of the screen, click Sponsors
  5. Enter Screen Title e.g. Sponsors
  6. Set the Display Menu on option as:
    • Native Mobile App Only = if only using mobile app
    • Both Web Program & Native Mobile App = if using both online web and mobile app
  7. Click Add Screen
  8. Click the link to the right for 'Download the Import template' file
  9. Open the File in Excel
  10. Copy and Paste the data in the file
    NOTE: There will be a sample record in the file as an example.
  11. Save the File in CSV format
    • For PC's, use Save as File Type CSV UTF-8 (*.csv)
    • For MAC's, use Save as Windows Comma Separated (.csv)
  12. Create a single zip file containing, the CSV file just created and all of the sponsor images
  13. Upload the file by Clicking Upload File button

The sponsor page in the app will eventually look something like this:

How to edit Sponsors or add a new one to the Mobile App?

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, select the app from the dropdown menu
  4. Click App Screens in the horizontal menu
  5. Select All Screens
  6. Click Update button beside Sponsors
  7. Click Download Current Data
  8. Edit the CSV file and if applicable, update the ZIP file with any new/revised images
    • For PC's, use Save as File Type CSV UTF-8 (*.csv)
    • For MAC's, use Save as Windows Comma Separated (.csv)
  9. Re-upload the ZIP file by clicking Upload File.

What are my options for Advertising Space in the Mobile App?

There are 3 main ways to sell advertising or sponsorship of your mobile app.

  1. Start Up / Splash Screen Ad
  2. Footer Ads
  3. In-Menu Ad

You may use all 3 options if desired.
The company may create any of these images to their liking.

Start Up / Splash Screen Ad

  • A splash ad will load in addition to the app's normal splash image.
  • The app will display the conference splash image for 1.5 seconds.
  • Then change to display a company/advertising splash image.
  • You may have more than 1 company advertise here.
  • Start Up / Splash Screen Ad image dimensions are: 640 x 1136 pixels
    • Note: Image must be 72 dpi PNG format; Non-transparent background; Image should have a solid colour edge and inner padding as image edges may get clipped.
    • Upload to Module Artwork Module Loading Sponsor Ad
      • Currently there are 2 spots, if you need to upload more than 2 images, contact X-CD at: sales@x-cd.com

  • You may have 1 footer ad or rotate between any number of ads for different companies.
  • Footer ads may be linked to any website.
  • Footer Ad image dimensions are: 1200 x 180 pixels
    • Note: Image must be 72 dpi PNG format; Non-transparent background; Image should have a solid colour edge and inner padding as image edges may get clipped.
    • Upload to Module Artwork Footer Banner Ad
      • Currently there are 3 spots, if you need to upload more than 3 images, contact X-CD at: sales@x-cd.com


How to Update the Attendee Directory in the Mobile App?

If using the X-CD Attendee Module, we link to the attendee module and it will automatically display the up-to-date information from the attendee module.

How to add a Twitter feed to the Mobile App?

  1. Click Dashboard
  2. Click Mobile App Management in the left side menu
  3. If there is more than one app defined, select the app from the dropdown menu
  4. Click App Screens in horizontal menu
  5. Select New Screen
  6. Enter a Screen Title (i.e. Twitter)
  7. For Screen Type, select Twitter
  8. Click Add Screen
  9. In the Twitter Query field, enter from:[Keyword] OR #[Keyword]
    • Note: replace [Keyword] with the conference Keyword e.g. from:event2018 OR #event2018
  10. Click Update Screen button


Overview

The app is a collection of different screens that may be built.

Main App Screens

The base of the app are the 4 following screens. They will automatically be added.

  1. Sessions - The program data that has bee setup in the program module. This is the program directory which is browseable by day and time.
  2. Speakers - This is the speaker directory. Each speaker has their own 'profile page' which may display biography or image if available from the system. Each speaker will also have a listing of the presentations to which they are connected to.
  3. Announcements - This screen is a feed of any announcements that are added to the app going forward.
  4. Favourite Sessions - A personal page for app users which will list any sessions which they have tagged as favourite.

The title of any auto-generated page may be edited.


    • Related Articles

    • E-Commerce Store Menu Screens

      How to Add a Menu Screen in a Store Form? Click Dashboard Click E-Commerce tab Click Manage Existing Stores icon Click on Store name Click Settings button Click Registration Setup in horizontal menu Select Registration Menu Click Add New button ...
    • Beginner's Guide: Creating a Conference Mobile App

      IMPORTANT!  The below guide is only for clients who have their own Apple developer account. The purpose of this article is to provide a series of steps in the process of creating the mobile app. This article is useful for beginners, but also to those ...
    • Mobile App Artwork

      Overview All images must have a solid background color - no gradients or transparency. All images must be PNG format and be 72 dpi. All images must have a few pixels of padding to prevent anything from being cut-off when Apple or Google use the ...
    • How to Create Custom Menu Screens in the Online Program

      What are the different type of Menu Screen available? The types are as follows: Custom - A text based screen that is often used for "Conference Information", "About Our Organization", "Hotel Information", or anything else you'd like. PDF - A link to ...
    • Mobile App Overview

      There are 2 layers of mobile apps available through the X-CD software. The most popular is the Conference Mobile App. The other is an Association/Corporate App that encompasses additional member type services including the ability to access more than ...