Shortcodes & Widgets

Doctor Listing Widget

Shortcode & Elementor Widget

Overview

The KiviCare Doctor Listing Widget displays a modern, responsive directory of doctors on the frontend of your website. It allows patients to browse doctors, view detailed profiles, and book appointments directly.

Each doctor card displays essential information such as specialties, qualifications, contact details, and session schedules. A built-in “Book Appointment” button opens the KiviCare booking modal with the selected doctor (and clinic, if specified) automatically pre-selected.

The widget works in two ways:

  • As a shortcode, usable anywhere on your site
  • As an Elementor widget, with full drag-and-drop and styling support

Both methods provide identical functionality.


How to Add the Doctor Listing

Add via Shortcode

(Gutenberg, Classic Editor, Widgets, or custom templates)

Insert the shortcode directly or use the Shortcode block:

JAVASCRIPT
[kivicare_doctor_list]

Add via Elementor Widget

  1. Edit a page using Elementor
  2. Search for “KiviCare Doctor List”
  3. Drag and drop the widget onto the page

Widget Details

  • Category: KiviCare
  • Icon: User Circle (eicon-user-circle-o)
  • Keywords: doctor, list, kivicare

Customization Options

Shared Options (Shortcode Attributes = Elementor Controls)
Option (Shortcode Attribute)Elementor Control TypeDefaultDescription
clinic_idDropdown (Elementor)Filter doctors to a specific clinic (optional).
selected_doctorsMulti-select (Elementor)Show only specific selected doctors (comma-separated IDs in shortcode).
enable_filterSwitcherYesShow filter bar (Specialty, Service, Search).
per_pageNumber5Doctors per page – pagination auto-appears for more.
show_imageSwitcherYesShow doctor profile image.
show_nameSwitcherYesShow doctor name.
show_specialitySwitcherYesShow doctor’s specialty.
show_numberSwitcherYesShow doctor’s contact number.
show_emailSwitcherYesShow doctor’s email.
show_qualificationSwitcherYesShow doctor’s qualifications (degrees, university, year).
show_sessionSwitcherYesShow doctor’s session schedule (day + time slots).

Elementor-Only Options

These settings are available only in Elementor:

  • Specific Doctor Add (Switcher): Enables the multi-select doctor picker
  • Hide Space Between Doctors (Switcher): Removes spacing between cards for a compact layout

Label Customization

Each visible field supports custom labels, allowing you to tailor text to your website’s tone or language.

Attribute / ControlDefault ValueExample
name_labelName“Doctor Name”
speciality_labelSpeciality“Specialization”
number_labelContact No“Phone”
email_labelEmail ID“Email”
qualification_labelQualification“Degrees”
session_labelSchedule Appointment“Available Times”

Labels can be set:

  • As text fields in Elementor
  • As attributes in the shortcode

Styling (Elementor Only – Style Tab)

The Style tab in Elementor provides complete design control:

Card Styling

  • Background color
  • Box shadow
  • Border and border radius

Image Styling

  • Width and height
  • Border, radius, and color
  • Image style options

Field Styling

  • Separate controls for labels and values
  • Typography, color, spacing, alignment

Session Schedule Styling

  • Dedicated container settings
  • Cell size, height, background, and borders
  • Font color and typography

Book Appointment Button Styling

  • Background and text colors
  • Typography
  • Padding and border radius

Key Features

Doctor Filtering (When enable_filter="yes")

  • Specialty Filter: Dropdown listing all available specialties
  • Service Filter: Dropdown showing services offered by listed doctors
  • Search Box: Search doctors by name or email
  • Click “Filter Doctor” to apply selected filters

Pagination

  • Automatically enabled when the number of doctors exceeds per_page
  • Includes Previous / Next buttons
  • Displays page indicators (e.g., Page 2 of 5)

Doctor Cards

  • Clean, modern, and responsive layout
  • Optional profile image
    • If no image is set, a placeholder with the doctor’s initials is shown
  • All fields are fully configurable via attributes or Elementor controls

Session Schedule Display

  • Displays abbreviated weekdays (e.g., Mon, Tue)
  • Supports multiple time slots per day
  • Time slots are shown as comma-separated values

Book Appointment Button

  • Each doctor card includes a “Book Appointment” button
  • Clicking the button opens the KiviCare booking modal
  • The selected doctor and clinic (if defined) are automatically pre-filled

Security & Role Restrictions

For privacy and security:

  • Administrator, Doctor, Receptionist, and Clinic Admin users cannot view the doctor listing
  • Instead, they see the message:
    “Current user can not view the widget. Please open this page in incognito mode or use another browser.”

No Doctors Found Message

If no doctors are available—or filters return no results—the widget displays:

“No doctors found.”


Example Shortcode Usage

  1. Default List (All Doctors, with Filters)
JAVASCRIPT
   [kivicare_doctor_list]
  1. Doctors from Specific Clinic
JAVASCRIPT
   [kivicare_doctor_list clinic_id="7"]
  1. Specific Doctors Only
JAVASCRIPT
   [kivicare_doctor_list selected_doctors="12,15,23"]
  1. Compact List (No Filters, Fewer Fields)
JAVASCRIPT
   [kivicare_doctor_list per_page="10" enable_filter="no" show_qualification="no" show_session="no"]
  1. Custom Labels
JAVASCRIPT
   [kivicare_doctor_list name_label="Our Doctor" session_label="Available Slots"]

Suggestions & Improvements

Your email address will not be published. Required fields are marked *