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 tag.

$3

``html

`

$3

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

`html

`

Configuration Parameters

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

| Attribute | Description | Required | Default |
| :--- | :--- | :---: | :---: |
| src | Path to the widget JavaScript file. | Yes | - |
| data-widget-id | Unique ID for your clinic's implementation. | Yes | - |
| data-trigger-element-id| The generic DOM ID of the element where you want to render the inline trigger card (instead of floating). | No | null |
| data-locale | Language code (e.g., 'vi', 'en'). | No | vi |
| data-store-id | The Store ID associated with the booking system. | No | null |
| data-org-id | The Organization ID. | No | null |
| data-doctor-id | Pre-select a specific doctor context. | No | null |
| data-product-id | Pre-select a specific product or service package. | No | null |
| data-url-video | URL for the introductory video used in the permission flow. | No | null |

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.

`javascript
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

$3

* Node.js (v18+)
* npm

$3

1. Clone the repository.
2. Install dependencies:
`bash
npm install
`

$3

To start the development server with Hot Module Replacement (HMR):
`bash
npm run dev
`
Open the URL provided (usually http://localhost:5173) and navigate to test_widget.html to see the widget in action.

$3

To generate the optimized, minified script for distribution:
`bash
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.

$3

To verify the final build behaves as expected:
1. Run the build command:
`bash
npm run build
`
2. 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