Home

Customization Guide

JSON Configuration File

The JSON configuration file helps control customizations for the FAD SAAS application so that you can fine tune certain colors and content to fit your organization. It consists of two parts: the interfaces and the theme. An example is provided for your reference:

{
  "interfaces": {
    "search": {
      "locationSearchCookieName": "exampleName",
      "medgroupDictionary": [
        {
          "code": "medGroup1",
          "identifiers": "med-group-1|medgroup1",
          "title": "CommonSpirit - Medgroup1",
          "city": "Phoenix",
          "state": "AZ",
          "latitude": "33.448261",
          "longitude": "-112.075768"
        },
        {
          "code": "medGroup2",
          "identifiers": "med-group-2|medgroup2",
          "title": "CommonSpirit - Medgroup2",
          "city": "",
          "state": "",
          "latitude": "",
          "longitude": ""
        }
      ]
    },
    "tenant": {
      "tenantCode": "tenant-code"
    },
    "suggestAnEdit": {
      "enabled": true,
      "linkScheme": "/forms/suggestedit?Npi={0}"
    },
    "emergencyCare": {
      "enabled": true,
      "linkScheme": "https://www.commonspirit.org/emergency-care"
    },
    "quickLinks": {
      "enabled": true,
      "categories": [
        "Video Visits",
        "Primary Care",
        "Cardiology",
        "Gynecology"
      ]
    },
    "myProviders": {
      "enabled": true,
      "linkScheme": "https://www.commonspirit.org/profile/myproviders"
    },
    "helplineNumbers": {
      "enabled": true,
      "heading": "Prefer to talk to someone? We're here, 24/7",
      "numbers": [
        {
            "heading": "Arizona",
            "phone": "(855) 697-0781"
        },
        {
            "heading": "California",
            "phone": "(866) 914-3627"
        },
        {
            "heading": "Nevada",
            "phone": "(866) 984-3627"
        }
      ]
    },
    "landingPage": {
      "landingPageHeader": "Find a doctor"
    }
  },
  "theme": {
    "fonts": {
      "fontFamily": "CustomFont",
      "fontUrl": "/assets/fonts/custom-font.ttf",
      "fontType": "truetype"
    },
    "colors": {
      "locationPinColor": "#ed711c",
      "locationPinOutline": "#c85200",
      "locationPinLabel": "#fff",
      "badgeValidColor": "#c85200",
      "badgeInvalidColor": "#4d525a",
      "actionContent": "#0079d0",
      "videoBadgeBackground": "#e6f5ff",
      "actionHoverstate": "#005591",
      "videoBadgeContent": "#0061a7",
      "contentBackground": "#fff",
      "bodyContent": "#4d525a",
      "footerBackground": "#f4f4f4",
      "activeProviderOffice": "#e3e1dc",
      "inactiveProviderOffice": "#0079d0",
      "calendarDateDisabled": "#b0a9a1",
      "toolTipBackground": "#fff",
      "toolTipColor": "#666",
      "toolTipBoxShadow": "#ccc",
      "loadingCircleColor": "#ed711c",
      "scheduleAppointmentBoxShadow": "#e7e7e7",
      "callIcon": "#575C65", 
      "appointmentInfoTooltip": "#0079d0",
      "dateColorInactive": "#4d525a80",
      "dateColorActive": "#4d525a",
      "whiteColor": "#ffffff",
      "providerSearchIcon": "#ed711c",
      "locationSearchIcon": "#ed711c",
      "dividerColor": "#e3e1dc"
    }
  }
}

You can also find another example as raw JSON here.

Interfaces

This section of the JSON controls certain items like links, medical groups, and search behavior.

"search" section

• locationSearchCookieName: when a user enters their location, a cookie is set so that it can be quickly retrieved once they return to the site. This value controls the name of that cookie.
• medgroupDictionary: array of objects that helps to define the possible medical groups that a user can search for providers. Each object in the array has the following specification:

Key	Description	Required
code	Medical group code	yes
identifiers	Pipe-delimited alternate identifiers	yes
title	Title for search results heading	yes
city	City for the medical group	no
state	State for the medical group	no
latitude	Latitude for the medical group	no
longitude	Longitude for the medical group	no

"tenant" section

Controls tenant-specific data for API requests

• tenantCode: tenant identifier used in the request headers of Provider Search API requests

"suggestAnEdit" section

Controls destination and appearance of the Suggest an Edit link on the provider details page.

• enabled: toggles the Suggest an Edit link on/off
• linkScheme: provides a format to help link providers to an edit form. The component will attempt to replace {0} with the NPI of that provider

"emergencyCare" section

Controls the destination and appearance of the Emergency Care link found below the quicklinks section on the search landing page.

• enabled: toggles the Emergency Care section on/off
• linkScheme: the URL of the Emergency Care link

"quickLinks" section

Controls the terms and appearance of the quicklinks on the search landing page.

• enabled: toggles the quicklinks section on/off
• categories: string array of search terms

"myProviders" section

Controls the destination and appearance of the link to a user's saved providers.

• enabled: toggles the saved providers section on/off
• linkScheme: the URL to navigate to a user's saved providers

"helplineNumbers" section

Controls the contact numbers and appearance of regional helpline numbers.

Key	Description	Required
enabled	Toggles the regional helplines section on/off	yes
heading	Heading section for regional helplines	no
numbers	Array of objects, with each object having a required heading and phone section	no

"landingPage" section

• landingPageHeader: large text that appears above the search boxes on the search landing page

Theme

This section of the JSON controls color schemes and fonts for the application.

"fonts" section

Here you can define your own custom font to be used throughout the page.

Key	Description	Required
fontFamily	Name of the custom font you are providing	yes
fontUrl	URL of the font binary file	yes
fontType	Format of the font you are providing	yes

"colors" section

Here you can define colors for the various components within the application.

**Under Development**