Customization Guide

Different UI views

Notifications

`"attributes"` section

Required attributes to display notifications.

configuration-url: used to specify the location for a json file with custom configuration for endpoints, color … .
base-url: used to specify the root location for the widget.

JSON Configuration File

{
  "interfaces": {
    "tenantCode": "common-spirit"
  },
  "endpoints": {},
  "theme": {
    "fonts": {
      "fontFamily": "CustomFont",
      "fontUrl": "/assets/fonts/TradeGothicNextLTPro-Rg.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"
    }
  }
}

Interfaces

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

Endpoints

Controls endpoints for different services.

yet to update

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

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**