Web Scheduler Button Colors Configuration Guide

Key configuration options | Example | Before going live

The Web Scheduler Button Colors module customizes the appearance and color palette of interactive buttons in FrontOffice+'s web scheduler. Configure the theme mode and the colors for buttons in their default and selected states to match your clinic's brand identity.

Key configuration options

General appearance (Web Scheduler Appearance)

• Web Scheduler Appearance: Controls theme adaptation:
  • Auto: Automatically adjusts to match the patient's device settings for dark or light mode.
  • Light: Forces light mode permanently, regardless of the patient's device settings. (Default)

Default state (Light Button - Default State)

Configure the color combination for buttons in their resting or unselected state:

• Background: Adjusts the background color of the button.
• Border: Adjusts the border color of the button.
• Text: Adjusts the text color.
• Preview: Displays an instant preview of the resting button state.

Selected state (Light Button - Selected State)

Define the appearance of buttons when a patient selects them:

• Background: Adjusts the background color in the active state.
• Border: Adjusts the border color in the active state.
• Text: Adjusts the text color in the active state.
• Preview: Displays an instant preview of the highlighted button state.

Example

• Scenario: A clinic wants to customize web scheduler buttons to match their official brand colors (navy blue and white).
• Setup: For Light Button - Default State, set a white background with a navy blue border and text. For Light Button - Selected State, invert the colors to a navy blue background with a white border and text.
• Outcome: Patients interact with legible buttons that fill with solid navy blue when an option is selected.

Before going live

Confirm:

• Theme mode: Select Auto to adapt to patient device settings or Light to force light mode.
  • Button color changes only appear in Light mode, not Dark mode.
• Legibility and contrast: Review buttons in the Preview boxes to make sure there's sufficient contrast between text and background colors.
• Brand consistency: Enter your clinic's exact hex color codes for seamless visual branding across the scheduler.