Home

Customization Guide

Different UI views

All Appointments

"attributes" section

Required attributes to display widget in All appointment list view.

Upcoming Appointment only

"attributes" section

Required attributes to display widget in upcoming appointment only view.

JSON Configuration File

{
  "interfaces": {
    "tenant": {
      "tenantCode": "dignity-health"
    },
    "filter": ["All", "Upcoming", "Past", "Canceled"]
  },
  "endpoints": {
    "appointments": "appointments",
    "cancelAppointment": "v1/Appointments"
  },
  "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"
    }
  },
  "morelessPagination": {
    "pageLimitAll": 3,
    "pageLimitSection": 5,
    "upcomingPageLimitInMobileView": 1
  },
  "hideRescheduleButton": false,
  "isCaptchaEnabled": true,
  "videoVisitTypeIds": [
    "TPC",
    "TEL",
    "THN",
    "THV",
    "existing-patient-video-visit",
    "telehealth-established-patient-complex",
    "new-patient-video-visit",
    "established-patient-video-visit"
  ],
  "appointmentCancelReasons": [
    "Scheduling conflict",
    "Bad weather",
    "Transportation issues",
    "Financial issues",
    "Wait too long",
    "Others"
  ],
  "greetingSubHeader": [
    "We're here for you.",
    "How can we help you today?",
    "We care for you.",
    "We're in this together.",
    "Healing starts here.",
    "Make this day count.",
    "Care with heart.",
    "You matter.",
    "Be kind to yourself.",
    "Kindness counts."
  ],
  "bookingBaseUrl": "",
  "covidConfig": {
    "covid19VaccineModerna": "covid19-vaccine-1st-dose",
    "covid19VaccinePfizer": "covid19-vaccine-1st-dose-pfizer",
    "covid1stDose": "Covid Vaccine 1st Dose",
    "covid": "covid",
    "covidImgPath": "/image/Covid_Appt_Card_Icon.svg"
  }
}

Interfaces

"filter" section

Controls filters/tabs text on my appointments listing page.

Endpoints

Controls endpoints for different services.

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.

MoreLessPagination

Controls pagination on my appointments listing.

hideRescheduleButton

Defines to show/hide Reschedule button in upcoming appointments.

isCaptchaEnabled

Configuration to enable Captcha in schedule an appointment.

VideoVisitTypeIds

Defines the different types of video visits.

appointmentCancelReasons

Configuration to change cancel appointmen reasons.

bookingBaseUrl

Configuration to set the redirect distinction for book again flow.

**Under Development**