Home

Developer Guide

Provider Card

You can find a working version of Provider Card here.

To get started with using the FAD Provider Card on your HTML page, you will need three items:

  1. A script tag with a link to the JavaScript file
  2. A custom element on your HTML page where you want the Provider Card to appear
  3. A path where the application will live relative to the site root. For example, if you are hosting the app at https://www.example.com/search/doctors, the path you will need would be /search/doctors.

Once added to the page, your code snippet should look like this:

<fad-provider-cards configuration-url="/fad-provider-cards/fad-configuration.json" fad-base-url="/example-application" base-url="/fad-provider-cards" 
  input-params='{"radius":10, "location":"Phoenix, AZ", "searchTerm": "Family Medicine", "heading": "Find Providers near you", "subHeading": "Find a Family Medicine Doctor near you", "numberOfItems": 20}'>
</fad-provider-cards>

<script type="text/javascript" src="https://fad.dignityhealth.org/fad-saas.js"></script>

Please note that the order of the elements is important, and the custom element should come first.

Element Options

There are options available to further customize the behavior of the application. They are added as attributes on the custom element that you included in the browser, and are not required for the component to function.

Attribute Description Type Required Defaults
configuration-url Path to the JSON file that you provide string No Defaults to fad-configuration.json relative to base url.
Best to provider a value.
fad-base-url Path for FAD SaaS application string yes
base-url Path for Provider Card "Widget" string No /
input-params Json object containing configuration for this instance of the provider cards string yes (See below for Json key/values)

Input Parameters options

The input parameters Json string contains some optional and required values. Case is important!

Key Description Type Required Defaults
radius Search radium in miles to search for providers number No 25 miles
Allowed values: 1, 5, 10, 25, 50, 100
location location to search (City, State) string No
searchTerm Search term to include in Provider search string No
heading Heading for Provider Card string No "Find a Provider near you"
subHeading Subheading at the top of the Provider Card. Below the Heading string No 'This list has been handpicked just for you. You may also search our networks by clicking the button below.'
numberOfItems Number of Providers to show in "Widget" number No 12
displaySearchButton Show search button below all providers boolean No true
Note: If true, button click will take user to url defined in fad-base-url
medGroup MedGroup Code to search within string piped strings No

Here is an example of searching for 'Family Medicine' in 'Phoenix, AZ'

<fad-provider-cards fad-base-url="/find-a-doctor" base-url="/provider-card"
  configuration-url="/provider-card/fad-configuration.json"
  input-params='{"radius":10, "location":"Phoenix, AZ", "searchTerm": "Family Medicine", "heading": "Find Providers near you", "subHeading": "Find a Family Medicine Doctor near you", "numberOfItems": 20, "medGroup": "mic|arizona"}'>
</fad-provider-cards>
<script type="text/javascript" src="https://fad.dignityhealth.org/fad-saas.js"></script>