clinic-connect-widget

v1.1.6

Published

11 days ago

Healthcare booking widget

0High
0Medium
0Low

longvansoftware

widget clinic booking

Clinic Connect Widget

Clinic Connect is a lightweight, embeddable medical booking and tele-consultation widget designed for clinics and hospitals. It allows patients to book appointments, view doctor availability, and initiate video consultations directly from the clinic's existing website.

Features

Zero Dependencies: Built with Vanilla JavaScript, ensuring fast load times and no conflicts with existing frameworks (React, Vue, jQuery, etc.).
Shadow DOM Isolation: Styles and logic are encapsulated, preventing your site's CSS from breaking the widget and vice versa.
Inline Triggers: Can be embedded as a floating button or integrated into specific page elements (e.g., "Book Now" sections).
Comprehensive Flow:
- Inline Doctor Availability Status with "Consult Now" CTA.
- Patient Information & Booking Form.
- Simulated Video Consultation Interface.
- Post-consultation Summary.
Responsive Design: Optimized for both Desktop and Mobile experiences.

Installation

To add the Clinic Connect widget to your website, simply include the compiled script file near the end of your <body> tag.

Basic Embed

<script 
    src="https://your-cdn.com/clinic-widget.umd.js"
    data-widget-id="YOUR_CLINIC_ID"
    data-locale="vi">
</script>

Advanced Embed (With Dynamic Doctor/Product)

You can pre-select a doctor or product context by passing additional attributes.

<script 
    src="https://your-cdn.com/clinic-widget.umd.js"
    data-widget-id="YOUR_CLINIC_ID"
    data-store-id="YOUR_STORE_ID"

    data-org-id="YOUR_ORG_ID"
    
    data-doctor-id="YOUR_DOCTOR_ID"
    data-product-id="YOUR_PRODUCT_ID"
    data-url-video="YOUR_VIDEO_URL"
    data-locale="vi">
</script>

Configuration Parameters

The widget is highly configurable via data- attributes on the script tag.

Client Hooks (API)

The widget exposes a global window.Clinic object that allows your website to listen for widget events and interact with the instance.

window.Clinic = {
    /**
     * Called when the widget is fully loaded and ready.
     */
    onReady: () => {
        console.log('Widget loaded and ready');
    },

    /**
     * Called when the user successfully starts a consultation session.
     * Useful for tracking analytics conversions.
     */
    onConsultationStarted: () => {
        console.log('User started a consultation');
    },

    /**
     * Called when the consultation flow is finished.
     */
    onCompleted: () => {
        console.log('Consultation finished');
    },

    // The active widget instance
    instance: { ... } 
};

Development Guide

Prerequisites

Node.js (v18+)
npm

Setup

Clone the repository.
Install dependencies:
```
npm install
```

Running Locally

To start the development server with Hot Module Replacement (HMR):

npm run dev

Open the URL provided (usually http://localhost:5173) and navigate to test_widget.html to see the widget in action.

Building for Production

To generate the optimized, minified script for distribution:

npm run build

The output files will be in the dist/ folder:

clinic-widget.umd.js: For direct browser usage (Standard).
clinic-widget.es.js: For ES Module imports.

Testing Production Build

To verify the final build behaves as expected:

Run the build command:
```
npm run build
```
Open test_build.html in your browser. This file is pre-configured to load the built script from dist/clinic-widget.umd.js to ensure the production artifact works correctly.

Project Structure

src/api/: Handles API simulation and fetching widget configuration.
src/core/: Main widget logic (ClinicWidget class), lifecycle management, and event binding.
src/state/: Centralized state management (Store pattern).
src/ui/: Contains HTML Templates (templates.js) and CSS Styles (styles.js).
src/index.js: Entry point that parses configuration and initializes the widget.

License

ISC