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": [
  "appointmentCancelReasons": [
    "Scheduling conflict",
    "Bad weather",
    "Transportation issues",
    "Financial issues",
    "Wait too long",
  "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"


"filter" section

Controls filters/tabs text on my appointments listing page.


Controls endpoints for different services.


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.


Controls pagination on my appointments listing.


Defines to show/hide Reschedule button in upcoming appointments.


Configuration to enable Captcha in schedule an appointment.


Defines the different types of video visits.


Configuration to change cancel appointmen reasons.


Configuration to set the redirect distinction for book again flow.


Defines the configuration for the end point request's turn around time. By default it was defined as 45000 (45 secs), it can be increased or descreased based on business requirements.


Configs used to make configurable exception messages and the contact info


Configs used to enable skeleton view's for the widget or components

**Under Development**