Symptom Checker App
The right care at the right time
SUPPORT

How to: Configure the app

This guide will explain every symptom checker app general configuration option. Each control in the App Factory’s Application Details screen – General form is enumerated in this guide.

This guide assumes that you have access to the Symptom Checker App Factory and that you are configuring a symptom checker app for your brand and services. This guide covers every configuration option in the General form. Some options may not be relevant or available based on how you intend to implement the app or other details of your website. Please see the other How To posts for high level overviews of each implementation option.

To get started, navigate to https://app-factory.appcatalyst.com and sign in. Then select your existing app or click the New App button to create a new application. This will take you to the App Details screen. The App Details screen is organized into 4 tabular sections. This guide will take you through each control in the General tab.

The General Details form includes the majority of the controls for your applications configuration. It is organized into a main section and a few collapsible sections to make it easier to navigate.

Title

The Title input will control the title for your application. If you enter a title, save the form and navigate to your application by pressing the Launch App button, you should see your title in the active tab’s title in your browser window. It populates the html document’s <title> tag, found atop the head of the html document for your application. It is also how you will identify your app in the list of apps, the next time you visit the Apps screen.

Embed

The Embed radio group control should be set to Yes if your application will be embedded within another webpage in an iframe. If you are not embedding your application in an iframe or you are not interested in using our embedded application support library, select No.

If you select Yes:

  • The Copy Embed Script and Visit Host buttons should appear at the top of the App Details screen.
  • You should use our iframe-embedder support library to resize your iframe. It is included in our recommended embed script. It will enable support for deep linking, scrolling and resizing of the iframe.
  • Your app’s document height will be dynamic.
  • The Host and Scroll Rules field will be enabled. See the details for those controls later in this post to learn more about them.
  • The Host control will be required.

If you select No:

  • Your app’s document height will be 100%, your app will fill the height of the window.
  • You could still embed your app in an iframe, but you will be without the support offered by our iframe-embedder support library.

Host

The Host text input will only appear if you have selected Yes in the Embed control. It will require a value.

Enter the url for the webpage that you will embed the app in into the Host text input. This URL must be correct in order for the iframe-embedder support library to function properly. This URL will also be used for the Visit Host button that will appear at the top of the App Details screen. The Visit Host button will open the host page so that it is easy to access and check on any changes to your app.

Integrate with EHR

The Integrate with EHR radio group control will enable or disable your app’s support for EHR integration. In order to integrate your app with an EHR, you will need a compatible SMART on FHIR DSTU2 EHR environment.

If you select Yes:

  • The EHR tab of the App Details screen will be enabled. All of the details on this tab will be required to support your integration.
  • Your app will reveal the Sign In with EHR button on the initial screen of the symptom checker module and the collapsible section of the Patient panel in the app’s right side drawer.
  • Your app will support standalone and EHR launch scenarios, allowing users to sign into the EHR and use the symptom checker to check their symptoms.

Localization

The localization section of the General Details form contains the language and regional controls for your application.

Default Language

The Default Language select control allows you to set the default language for your app. A default language must be selected. Your app will load in the default language. Your apps users can select another language on the app’s Settings screen.

You can link or embed your app in another language by setting the app’s lang parameter to the language code for another language. Contact support for more information about linking or embedding your app in another language.

Default Skin Color

The Default Skin Color radio group control allows you to set the default skin color for the interactive body area search figure that is shown on the app’s Symptom Browser search screen. Your app’s users can select another skin color on the app’s Settings screen.

The Links section of the General Details form includes all of the controls for a few buttons that will optionally appear throughout the app.

Website

The Website text input allows you to provide the url for your organization’s website. If you provide a url, the Visit our Website button will appear at the bottom of the app’s right side navigation drawer. If you do not provide a url, this button will not appear in your app.

Share URL

The Share URL text input allows you to provide a url for sharing the app. If you provide a url, the Share this App button will appear at the bottom of the app’s right side navigation drawer. If you do not provide a url, this button will not appear in your app.

You might choose to link to another webpage with sharing options that user’s can use to share a link to your app. You might also choose to use a mailto url that will open a new email message in the user’s operating system’s default mail client. The following example will create a new email message with the subject “Check out this symptom checker!” and a body with the url to our demo app (you should use the url for your host page instead).


mailto:?subject=Check out this symptom checker!&body=https://www.appcatalyst.com/symptom-checker-app-demo

The Link to EHR radio group control allows you to enable or disable the Go to EHR button.

If you are going to embed your app inside of your patient portal, it does not make sense to enable this feature because the user will already be in the patient portal when they are using the app.

If you select Yes:

  • The Go to EHR button will appear at the bottom of the app’s right side navigation drawer.
  • The EHR Name and EHR URL fields will appear.
  • You will need to provide the url to your EHR (Patient Portal) and the name of your EHR.

EHR Name

The EHR Name text input allows you to provide the name of your EHR. The name of your EHR will appear in the Go to EHR button in the app’s right side navigation drawer.

If you have enabled EHR integration, the EHR Name will also appear in the Sign In with EHR button’s that appear on the initial screen of the Symptom Checker and in the Patient Panel in the app’s right side navigation drawer.

EHR URL

The EHR URL input allows you to provide the url for your EHR. The EHR URL will be used for the Go to EHR button in the app’s right side navigation drawer. This button allows users to navigate from the symptom checker app to your patient portal.

Look and Feel

The Look and Feel section of the General Details form includes all of the controls for styling your application.

Show Navigation Bar

The Show Navigation Bar radio control allows you to disable the first row of the app’s navigation bar. You should set this control to Yes, unless you are going to embed your app in a mobile app that already has its own fixed top navigation bar.

If you set this control to No:

  • The first row of the navigation bar (containing the title for the current screen and the toggle buttons for the left and right side navigation drawers) will be hidden
  • The toggle buttons for the left and right side navigation drawers will instead be fixed to the bottom on either side of the screen.

Scroll Rules

The Scroll Rules list will only appear if you have set the Embed control to Yes.

The Scroll Rules list allows you to configure the scrolling behavior for the host page of your embedded app. By default the iframe-embedder support library will scroll the host page back to the top of the iframe whenever the user navigates between screens in the embedded application. If your host page has a fixed top header for any window width, you might find that the default scrolling behavior leaves the upper portion of the embedded symptom checker app hidden behind your host page’s header.

To check to see if scroll rules should be implemented, scroll down on your host page. Does the page have a header that stayed in the same position at the top of the screen? If so, your host page likely has a fixed top header. You should also change the width of your browser window, making it as small and as large as you possibly can. At any browser window width, did a header appear fixed to the top of the screen? Did the size of the header change at different window widths? If so, your host page might need multiple scroll rules.

If your host page has a fixed top header, you can declare one or more scroll rules to configure the ideal scrolling behavior.

If you are unfamiliar with css or website layout patterns, you might need the help from someone who does. You might want to consult your web designer or our support team.

Follow these steps to configure scroll rules:

  1. Click on the New Scroll Rule button to declare a scroll rule.
  2. Specify the minimum and maximum window width range for the scroll rule (we use 100,000 as a “maximum” when another breakpoint is not evident)
  3. Specify one of the following
    • A css selector for the header element, so that the iframe-embedder support library can use this element to calculate the appropriate scroll offset. We recommend this option over using an explicit offset whenever possible.
    • An explicit offset in px that is equivalent to the header’s height.
  4. Click Done

If your fixed top header changes sizes and you are unable to use a css selector to identify it, you might need to create multiple scroll rules, one for each header size.

Stylesheet

The Stylesheet text input allows you to specify a url to a bootstrap 4 theme to be used for your app. Your organization might already have a bootstrap 4 theme designed for your brand. If so, try providing the url for that theme’s stylesheet. If not, we recommend using the Bootstrap Build tool to quickly develop a theme for your app. To do this, click on the Create Theme with Bootstrap Build button and create your theme. Follow this guide to use Bootstrap Build to create and upload a bootstrap 4 theme for your app.

Custom CSS

The Custom CSS text area allows you to author or paste in a block of css to add to or modify your bootstrap theme or styles for elements in your app. If you are not familiar with css and web design, you might want to work with your web designer or contact our support team for help.

If you are embedding your app within another webpage, you might not want to provide a logo. Typically your web page is already showing your brand’s logo and it does not need to be repeated in the embedded app.

The Logo text input allows you to provide the url for an optional logo image that will appear in the top of the left side navigation drawer of your app. You can use the url for an image that is already published on the internet, or you can upload a new image. To upload a new image, click on the Upload Logo button. After clicking the button, a file input will appear beneath the Logo text input. Drag and drop your logo image file onto the file input or click on the file input to browse for your file. After dropping or selecting your logo image file, the image will be uploaded to the App Factory and its public url will populate the Logo text input.

Favicon

If you are embedding your app within another webpage, you should not need to provide a favicon. The favicon will only be observable if users visit your app directly.

The Favicon text input allows you to provide the url for an optional favicon image that will show in the browser when users visit your app directly. You can use the url for an image that is already published on the internet, or you can click on the Upload Favicon button. After clicking the button, a file input will appear beneath the Favicon text input. Drag and drop your favicon image file onto the file input or click on the file input to browse for your file. After dropping or selecting your favicon image file, the image will be uploaded to the App Factory and its public url will populate the Favicon text input.

Analytics

The Analytics section allows you to enable or disable google analytics for your app, as well as provide your google analytics property ID.

Universal Analytics

The Universal Analytics radio group control allows you to enable or disable analytics for your app. We encourage you to enable analytics so that your team (and our support team) can measure the effectiveness of your symptom checker app. See Universal Analytics for more information about the analytics implementation details for the app.

Universal Analytics Property

The Universal Analytics Property text input allows you to provide a Universal Analytics property ID that your app should send pageview and event analytics to. If you are unfamiliar with Google Analytics / Universal Analytics, reference this guide or contact our support team.