{"id":40,"date":"2025-12-18T09:06:45","date_gmt":"2025-12-18T09:06:45","guid":{"rendered":"http:\/\/192.168.1.159\/wp_plugins\/dev\/kivicare-revamp\/2025\/12\/18\/doctor-listing-widget\/"},"modified":"2026-02-18T04:44:25","modified_gmt":"2026-02-18T04:44:25","slug":"doctor-listing-widget","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/kivicare-lite\/documentation\/shortcodes-widgets\/doctor-listing-widget\/","title":{"rendered":"Doctor Listing Widget"},"content":{"rendered":"<div class=\"nolwrap\">\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><strong>Shortcode &amp; Elementor Widget<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Overview<\/strong><\/h2>\n\n\n\n<p>The <strong>KiviCare Doctor Listing Widget<\/strong> 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.<\/p>\n\n\n\n<p>Each doctor card displays essential information such as <strong>specialties, qualifications, contact details, and session schedules<\/strong>. A built-in <strong>\u201cBook Appointment\u201d<\/strong> button opens the KiviCare booking modal with the selected doctor (and clinic, if specified) automatically pre-selected.<\/p>\n\n\n\n<p>The widget works in two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As a <strong>shortcode<\/strong>, usable anywhere on your site<\/li>\n\n\n\n<li>As an <strong>Elementor widget<\/strong>, with full drag-and-drop and styling support<\/li>\n<\/ul>\n\n\n\n<p>Both methods provide identical functionality.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Add the Doctor Listing<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Add via Shortcode<\/strong><\/h5>\n\n\n\n<p><em>(Gutenberg, Classic Editor, Widgets, or custom templates)<\/em><\/p>\n\n\n\n<p>Insert the shortcode directly or use the <strong>Shortcode block<\/strong>:<\/p>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">[kivicare_doctor_list]<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Add via Elementor Widget<\/strong><\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Edit a page using <strong>Elementor<\/strong><\/li>\n\n\n\n<li>Search for <strong>\u201cKiviCare Doctor List\u201d<\/strong><\/li>\n\n\n\n<li>Drag and drop the widget onto the page<\/li>\n<\/ol>\n\n\n\n<p><strong>Widget Details<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Category:<\/strong> KiviCare<\/li>\n\n\n\n<li><strong>Icon:<\/strong> User Circle (<code>eicon-user-circle-o<\/code>)<\/li>\n\n\n\n<li><strong>Keywords:<\/strong> doctor, list, kivicare<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Customization Options<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Shared Options (Shortcode Attributes = Elementor Controls)<\/strong><\/h5>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><span style=\"color: #7093e5\" class=\"stk-highlight\">Option (Shortcode Attribute)<\/span><\/th><th><span style=\"color: #7093e5\" class=\"stk-highlight\">Elementor Control Type<\/span><\/th><th><span style=\"color: #7093e5\" class=\"stk-highlight\">Default<\/span><\/th><th><span style=\"color: #7093e5\" class=\"stk-highlight\">Description<\/span><\/th><\/tr><\/thead><tbody><tr><td><code>clinic_id<\/code><\/td><td>Dropdown (Elementor)<\/td><td>\u2014<\/td><td>Filter doctors to a specific clinic (optional).<\/td><\/tr><tr><td><code>selected_doctors<\/code><\/td><td>Multi-select (Elementor)<\/td><td>\u2014<\/td><td>Show only specific selected doctors (comma-separated IDs in shortcode).<\/td><\/tr><tr><td><code>enable_filter<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show filter bar (Specialty, Service, Search).<\/td><\/tr><tr><td><code>per_page<\/code><\/td><td>Number<\/td><td>5<\/td><td>Doctors per page \u2013 pagination auto-appears for more.<\/td><\/tr><tr><td><code>show_image<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show doctor profile image.<\/td><\/tr><tr><td><code>show_name<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show doctor name.<\/td><\/tr><tr><td><code>show_speciality<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show doctor&#8217;s specialty.<\/td><\/tr><tr><td><code>show_number<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show doctor&#8217;s contact number.<\/td><\/tr><tr><td><code>show_email<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show doctor&#8217;s email.<\/td><\/tr><tr><td><code>show_qualification<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show doctor&#8217;s qualifications (degrees, university, year).<\/td><\/tr><tr><td><code>show_session<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show doctor&#8217;s session schedule (day + time slots).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Elementor-Only Options<\/strong><\/h2>\n\n\n\n<p>These settings are available <strong>only in Elementor<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Specific Doctor Add (Switcher):<\/strong> Enables the multi-select doctor picker<\/li>\n\n\n\n<li><strong>Hide Space Between Doctors (Switcher):<\/strong> Removes spacing between cards for a compact layout<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Label Customization<\/strong><\/h2>\n\n\n\n<p>Each visible field supports <strong>custom labels<\/strong>, allowing you to tailor text to your website\u2019s tone or language.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><span style=\"color: #7093e5\" class=\"stk-highlight\">Attribute \/ Control<\/span><\/th><th><span style=\"color: #7093e5\" class=\"stk-highlight\">Default Value<\/span><\/th><th><span style=\"color: #7093e5\" class=\"stk-highlight\">Example<\/span><\/th><\/tr><\/thead><tbody><tr><td><code>name_label<\/code><\/td><td>Name<\/td><td>&#8220;Doctor Name&#8221;<\/td><\/tr><tr><td><code>speciality_label<\/code><\/td><td>Speciality<\/td><td>&#8220;Specialization&#8221;<\/td><\/tr><tr><td><code>number_label<\/code><\/td><td>Contact No<\/td><td>&#8220;Phone&#8221;<\/td><\/tr><tr><td><code>email_label<\/code><\/td><td>Email ID<\/td><td>&#8220;Email&#8221;<\/td><\/tr><tr><td><code>qualification_label<\/code><\/td><td>Qualification<\/td><td>&#8220;Degrees&#8221;<\/td><\/tr><tr><td><code>session_label<\/code><\/td><td>Schedule Appointment<\/td><td>&#8220;Available Times&#8221;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Labels can be set:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As <strong>text fields in Elementor<\/strong><\/li>\n\n\n\n<li>As <strong>attributes in the shortcode<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Styling (Elementor Only \u2013 Style Tab)<\/strong><\/h2>\n\n\n\n<p>The <strong>Style tab<\/strong> in Elementor provides complete design control:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Card Styling<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Background color<\/li>\n\n\n\n<li>Box shadow<\/li>\n\n\n\n<li>Border and border radius<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Image Styling<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Width and height<\/li>\n\n\n\n<li>Border, radius, and color<\/li>\n\n\n\n<li>Image style options<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Field Styling<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Separate controls for <strong>labels<\/strong> and <strong>values<\/strong><\/li>\n\n\n\n<li>Typography, color, spacing, alignment<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Session Schedule Styling<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dedicated container settings<\/li>\n\n\n\n<li>Cell size, height, background, and borders<\/li>\n\n\n\n<li>Font color and typography<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Book Appointment Button Styling<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Background and text colors<\/li>\n\n\n\n<li>Typography<\/li>\n\n\n\n<li>Padding and border radius<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Key Features<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Doctor Filtering (When <code>enable_filter=\"yes\"<\/code>)<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Specialty Filter:<\/strong> Dropdown listing all available specialties<\/li>\n\n\n\n<li><strong>Service Filter:<\/strong> Dropdown showing services offered by listed doctors<\/li>\n\n\n\n<li><strong>Search Box:<\/strong> Search doctors by name or email<\/li>\n\n\n\n<li>Click <strong>\u201cFilter Doctor\u201d<\/strong> to apply selected filters<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Pagination<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Automatically enabled when the number of doctors exceeds <code>per_page<\/code><\/li>\n\n\n\n<li>Includes <strong>Previous \/ Next<\/strong> buttons<\/li>\n\n\n\n<li>Displays page indicators (e.g., <em>Page 2 of 5<\/em>)<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Doctor Cards<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clean, modern, and responsive layout<\/li>\n\n\n\n<li>Optional profile image\n<ul class=\"wp-block-list\">\n<li>If no image is set, a placeholder with the doctor\u2019s initials is shown<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>All fields are fully configurable via attributes or Elementor controls<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Session Schedule Display<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Displays abbreviated weekdays (e.g., <strong>Mon, Tue<\/strong>)<\/li>\n\n\n\n<li>Supports multiple time slots per day<\/li>\n\n\n\n<li>Time slots are shown as comma-separated values<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Book Appointment Button<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Each doctor card includes a <strong>\u201cBook Appointment\u201d<\/strong> button<\/li>\n\n\n\n<li>Clicking the button opens the KiviCare booking modal<\/li>\n\n\n\n<li>The selected <strong>doctor and clinic<\/strong> (if defined) are automatically pre-filled<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Security &amp; Role Restrictions<\/strong><\/h2>\n\n\n\n<p>For privacy and security:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Administrator, Doctor, Receptionist, and Clinic Admin<\/strong> users cannot view the doctor listing<\/li>\n\n\n\n<li>Instead, they see the message:<br><em>\u201cCurrent user can not view the widget. Please open this page in incognito mode or use another browser.\u201d<\/em><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>No Doctors Found Message<\/strong><\/h2>\n\n\n\n<p>If no doctors are available, or filters return no results, the widget displays:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>\u201cNo doctors found.\u201d<\/strong><\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Example Shortcode Usage<\/strong><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Default List (All Doctors, with Filters)<\/strong><\/li>\n<\/ol>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">   [kivicare_doctor_list]<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Doctors from Specific Clinic<\/strong><\/li>\n<\/ol>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">   [kivicare_doctor_list clinic_id=&quot;7&quot;]<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Specific Doctors Only<\/strong><\/li>\n<\/ol>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">   [kivicare_doctor_list selected_doctors=&quot;12,15,23&quot;]<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Compact List (No Filters, Fewer Fields)<\/strong><\/li>\n<\/ol>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">   [kivicare_doctor_list per_page=&quot;10&quot; enable_filter=&quot;no&quot; show_qualification=&quot;no&quot; show_session=&quot;no&quot;]<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    \n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Custom Labels<\/strong><\/li>\n<\/ol>\n\n\n    <div class=\"docsy-code-block with-line-numbers\" data-language=\"javascript\">\n                \n        <div class=\"code-header\">\n            <span class=\"code-language\">JAVASCRIPT<\/span>\n            <button class=\"code-copy-btn\" aria-label=\"Copy code\">\n                <i class=\"ph ph-copy\"><\/i>\n                <span class=\"copy-text\">Copy<\/span>\n                <span class=\"copied-text\">Copied!<\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"code-wrapper\">\n            <pre class=\"language-javascript\"><code class=\"language-javascript\">   [kivicare_doctor_list name_label=&quot;Our Doctor&quot; session_label=&quot;Available Slots&quot;]<\/code><\/pre>\n            \n                            <div class=\"line-numbers-wrapper\" aria-hidden=\"true\">\n                                            <span class=\"line-number\">1<\/span>\n                                    <\/div>\n                    <\/div>\n        \n            <\/div>\n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Complete guide to Doctor Listing Widget in KiviCare Lite. Learn how to effectively use this feature with step-by-step instructions and best practices.<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-shortcodes-widgets"],"featured_image_src":null,"author_info":{"display_name":"wordpressadminiq","author_link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/author\/wordpressadminiq\/"},"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":9,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":3007,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/40\/revisions\/3007"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}