{"id":957,"date":"2025-12-26T04:26:51","date_gmt":"2025-12-26T04:26:51","guid":{"rendered":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/?p=957"},"modified":"2026-02-18T04:41:30","modified_gmt":"2026-02-18T04:41:30","slug":"clinic-list","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/kivicare-lite\/documentation\/shortcodes-widgets\/clinic-list\/","title":{"rendered":"Clinic List Widgets"},"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<p>The <strong>KiviCare Clinic List<\/strong> feature allows you to display a modern, responsive directory of your clinics on the frontend. Patients can browse clinic details and click <strong>&#8220;Book Appointment&#8221;<\/strong> to start booking directly (with the selected clinic pre-filled in the modal).<\/p>\n\n\n\n<p>It works identically whether used as a <strong>shortcode<\/strong> (anywhere on your site) or as an <strong>Elementor widget<\/strong> (drag-and-drop in Elementor pages).<\/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 It<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Via Shortcode (Gutenberg, Classic Editor, Widgets, etc.)<\/strong><\/h5>\n\n\n\n<p>Use the Shortcode block or directly insert:<\/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_clinic_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<h5 class=\"wp-block-heading\"><strong>Via Elementor Widget<\/strong><\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Edit a page with Elementor.<\/li>\n\n\n\n<li>Search for <strong>&#8220;KiviCare Clinic List&#8221;<\/strong>.<\/li>\n\n\n\n<li>Drag it 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>: Building (eicon-building)<\/li>\n\n\n\n<li><strong>Keywords<\/strong>: clinic, 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>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 (shortcode) \/ 2 (widget)<\/td><td>Clinics 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 clinic profile image.<\/td><\/tr><tr><td><code>show_name<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show clinic name.<\/td><\/tr><tr><td><code>show_speciality<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show specialties (comma-separated).<\/td><\/tr><tr><td><code>show_number<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show clinic phone.<\/td><\/tr><tr><td><code>show_email<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show clinic email.<\/td><\/tr><tr><td><code>show_address<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show full address.<\/td><\/tr><tr><td><code>show_administrator<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show administrator name.<\/td><\/tr><tr><td><code>show_admin_number<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show admin phone.<\/td><\/tr><tr><td><code>show_admin_email<\/code><\/td><td>Switcher<\/td><td>Yes<\/td><td>Show admin email.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Additional Elementor-Only Options:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hide Space Between Clinics<\/strong> (Switcher) \u2013 Removes card gaps for 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 has a custom label (text field in Elementor; attribute in shortcode).<\/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;Our Clinic&#8221;<\/td><\/tr><tr><td><code>speciality_label<\/code><\/td><td>Speciality<\/td><td>&#8220;Departments&#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>address_label<\/code><\/td><td>Address<\/td><td>&#8220;Location&#8221;<\/td><\/tr><tr><td><code>administrator_label<\/code><\/td><td>Administrator<\/td><td>&#8220;Clinic Manager&#8221;<\/td><\/tr><tr><td><code>admin_number_label<\/code><\/td><td>Contact No<\/td><td>&#8220;Manager Phone&#8221;<\/td><\/tr><tr><td><code>admin_email_label<\/code><\/td><td>Email ID<\/td><td>&#8220;Manager Email&#8221;<\/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>Styling (Elementor Only \u2013 Style Tab)<\/strong><\/h2>\n\n\n\n<p>Full design control:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Card<\/strong>: Background, shadow, border, radius<\/li>\n\n\n\n<li><strong>Image<\/strong>: Height, width, border, radius, style, color<\/li>\n\n\n\n<li><strong>Individual Fields<\/strong>: Separate sections for label &amp; value (color, typography, margin, padding, alignment)<\/li>\n\n\n\n<li><strong>Administrator Section<\/strong>: Dedicated label styling<\/li>\n\n\n\n<li><strong>Book Appointment Button<\/strong>: Background color, text color, typography, radius, padding<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Features<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Filtering Options<\/strong> (when enable_filter=&#8221;yes&#8221;):<\/li>\n\n\n\n<li><strong>Specialty Filter<\/strong>: Dropdown of all unique specialties available across clinics.<\/li>\n\n\n\n<li><strong>Service Filter<\/strong>: A dropdown of all services offered in any clinic.<\/li>\n\n\n\n<li><strong>Search Box<\/strong>: Searches by clinic name or email.<\/li>\n\n\n\n<li>Click the <strong>&#8220;Filter Clinic&#8221;<\/strong> button to apply filters.<\/li>\n\n\n\n<li><strong>Pagination<\/strong>: Automatic &#8220;Previous&#8221; and &#8220;Next&#8221; buttons with page info (e.g., &#8220;Page 2 of 5&#8221;) when there are more clinics than per_page.<\/li>\n\n\n\n<li><strong>Clinic Cards<\/strong>:<\/li>\n\n\n\n<li>Clean, modern card layout.<\/li>\n\n\n\n<li>Optional image (with automatic placeholder showing clinic initials if no image is set).<\/li>\n\n\n\n<li>All information is configurable via attributes.<\/li>\n\n\n\n<li><strong>Book Appointment Button<\/strong>:<\/li>\n\n\n\n<li>Each clinic card has a <strong>&#8220;Book Appointment&#8221;<\/strong> button.<\/li>\n\n\n\n<li>Clicking it opens the KiviCare booking modal with that clinic automatically pre-selected.<\/li>\n\n\n\n<li><strong>Security<\/strong>:<\/li>\n\n\n\n<li>Staff users (Administrator, Doctor, Receptionist, Clinic Admin) cannot view the list.<\/li>\n\n\n\n<li>They see a friendly message: &#8220;Current user can not view the widget. Please open this page in incognito mode or use another browser.&#8221;<\/li>\n\n\n\n<li><strong>No Clinics Message<\/strong>:<\/li>\n\n\n\n<li>If no clinics are found (or after filtering), it displays: &#8220;No clinics found.&#8221;<\/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>Example Usages<\/strong><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Default List with Filters<\/strong><\/h5>\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_clinic_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<h5 class=\"wp-block-heading\"><strong>More Clinics Per Page, No Filters<\/strong><\/h5>\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_clinic_list per_page=&quot;12&quot; enable_filter=&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<h5 class=\"wp-block-heading\"><strong>Minimal Card (Name + Address + Book Button Only)<\/strong><\/h5>\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_clinic_list show_image=&quot;no&quot; show_speciality=&quot;no&quot; show_number=&quot;no&quot; show_email=&quot;no&quot; show_administrator=&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<h5 class=\"wp-block-heading\"><strong>Custom Labels<\/strong><\/h5>\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_clinic_list name_label=&quot;Clinic&quot; address_label=&quot;Visit Us At&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<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Shortcode &amp; Elementor Widget The KiviCare Clinic List feature allows you to display a modern, responsive directory of your clinics on the frontend. Patients can browse clinic details and click &#8220;Book Appointment&#8221; to start booking directly (with the selected clinic pre-filled in the modal). It works identically whether used as a shortcode (anywhere on your [&hellip;]<\/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-957","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\/957","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=957"}],"version-history":[{"count":10,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/957\/revisions"}],"predecessor-version":[{"id":3005,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/posts\/957\/revisions\/3005"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/media?parent=957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/categories?post=957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivicare-wordpress\/wp-json\/wp\/v2\/tags?post=957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}