clinic-connect-widget 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +119 -119
- package/dist/clinic-widget.es.js +344 -344
- package/dist/clinic-widget.umd.js +1 -1
- package/package.json +32 -31
package/README.md
CHANGED
|
@@ -1,119 +1,119 @@
|
|
|
1
|
-
# Clinic Connect Widget
|
|
2
|
-
|
|
3
|
-
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.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
* **Zero Dependencies**: Built with Vanilla JavaScript, ensuring fast load times and no conflicts with existing frameworks (React, Vue, jQuery, etc.).
|
|
8
|
-
* **Shadow DOM Isolation**: Styles and logic are encapsulated, preventing your site's CSS from breaking the widget and vice versa.
|
|
9
|
-
* **Inline Triggers**: Can be embedded as a floating button or integrated into specific page elements (e.g., "Book Now" sections).
|
|
10
|
-
* **Comprehensive Flow**:
|
|
11
|
-
* Inline Doctor Availability Status with "Consult Now" CTA.
|
|
12
|
-
* Patient Information & Booking Form.
|
|
13
|
-
* Simulated Video Consultation Interface.
|
|
14
|
-
* Post-consultation Summary.
|
|
15
|
-
* **Responsive Design**: Optimized for both Desktop and Mobile experiences.
|
|
16
|
-
|
|
17
|
-
## Installation for Clients
|
|
18
|
-
|
|
19
|
-
To add the Clinic Connect widget to your website, simply include the compiled script file near the end of your `<body>` tag.
|
|
20
|
-
|
|
21
|
-
### 1. Basic Embedding
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
<script
|
|
25
|
-
src="https://your-cdn.com/clinic-widget.umd.js"
|
|
26
|
-
data-widget-id="YOUR_CLINIC_ID"
|
|
27
|
-
data-locale="vi">
|
|
28
|
-
</script>
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
### 2. Advanced Embedding with Inline Trigger
|
|
32
|
-
|
|
33
|
-
If you want the widget to render an "Online Status" card inside a specific element on your page (e.g., inside your booking section), add the `data-trigger-element-id` attribute.
|
|
34
|
-
|
|
35
|
-
**HTML Structure:**
|
|
36
|
-
```html
|
|
37
|
-
<!-- Your specific container for the doctor status card -->
|
|
38
|
-
<div id="booking-section-trigger"></div>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
**Script Tag:**
|
|
42
|
-
```html
|
|
43
|
-
<script
|
|
44
|
-
src="./dist/clinic-widget.umd.js"
|
|
45
|
-
data-widget-id="clinic-123"
|
|
46
|
-
data-trigger-element-id="booking-section-trigger"
|
|
47
|
-
data-locale="vi">
|
|
48
|
-
</script>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Configuration Attributes
|
|
52
|
-
|
|
53
|
-
| Attribute | Description | Required | Default |
|
|
54
|
-
| :--- | :--- | :---: | :---: |
|
|
55
|
-
| `src` | Path to the widget JavaScript file. | Yes | - |
|
|
56
|
-
| `data-widget-id` | Unique ID for your clinic/configuration. | Yes | - |
|
|
57
|
-
| `data-trigger-element-id`| The DOM ID of the element where you want to render the inline trigger card. | No | `null` |
|
|
58
|
-
| `data-locale` | Language code (e.g., 'vi', 'en'). | No | `vi` |
|
|
59
|
-
|
|
60
|
-
## Client Hooks
|
|
61
|
-
|
|
62
|
-
The widget exposes a global `window.Clinic` object that allows your website to listen for widget events.
|
|
63
|
-
|
|
64
|
-
```html
|
|
65
|
-
<script>
|
|
66
|
-
window.Clinic = {
|
|
67
|
-
onReady: () => {
|
|
68
|
-
console.log('Widget loaded and ready');
|
|
69
|
-
},
|
|
70
|
-
onConsultationStarted: () => {
|
|
71
|
-
console.log('User started a consultation');
|
|
72
|
-
// Useful for tracking analytics pixels
|
|
73
|
-
},
|
|
74
|
-
onCompleted: () => {
|
|
75
|
-
console.log('Consultation finished');
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
</script>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
## Development Guide
|
|
82
|
-
|
|
83
|
-
### Prerequisites
|
|
84
|
-
* Node.js (v18+)
|
|
85
|
-
* npm
|
|
86
|
-
|
|
87
|
-
### Setup
|
|
88
|
-
1. Clone the repository.
|
|
89
|
-
2. Install dependencies:
|
|
90
|
-
```bash
|
|
91
|
-
npm install
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### Running Locally
|
|
95
|
-
To start the development server with Hot Module Replacement (HMR):
|
|
96
|
-
```bash
|
|
97
|
-
npm run dev
|
|
98
|
-
```
|
|
99
|
-
Open the URL provided (usually `http://localhost:5173`) and navigate to `test_widget.html` to see the widget in action.
|
|
100
|
-
|
|
101
|
-
### Building for Production
|
|
102
|
-
To generate the optimized, minified script for distribution:
|
|
103
|
-
```bash
|
|
104
|
-
npm run build
|
|
105
|
-
```
|
|
106
|
-
The output files will be in the `dist/` folder:
|
|
107
|
-
* `clinic-widget.umd.js`: For direct browser usage (Standard).
|
|
108
|
-
* `clinic-widget.es.js`: For ES Module imports.
|
|
109
|
-
|
|
110
|
-
## Project Structure
|
|
111
|
-
|
|
112
|
-
* `src/api/`: Handles API simulation and fetching widget configuration.
|
|
113
|
-
* `src/core/`: Main widget logic (`ClinicWidget` class), lifecycle management, and event binding.
|
|
114
|
-
* `src/state/`: Centralized state management (Store pattern).
|
|
115
|
-
* `src/ui/`: Contains HTML Templates (`templates.js`) and CSS Styles (`styles.js`).
|
|
116
|
-
* `src/index.js`: Entry point that parses configuration and initializes the widget.
|
|
117
|
-
|
|
118
|
-
## License
|
|
119
|
-
MIT
|
|
1
|
+
# Clinic Connect Widget
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
* **Zero Dependencies**: Built with Vanilla JavaScript, ensuring fast load times and no conflicts with existing frameworks (React, Vue, jQuery, etc.).
|
|
8
|
+
* **Shadow DOM Isolation**: Styles and logic are encapsulated, preventing your site's CSS from breaking the widget and vice versa.
|
|
9
|
+
* **Inline Triggers**: Can be embedded as a floating button or integrated into specific page elements (e.g., "Book Now" sections).
|
|
10
|
+
* **Comprehensive Flow**:
|
|
11
|
+
* Inline Doctor Availability Status with "Consult Now" CTA.
|
|
12
|
+
* Patient Information & Booking Form.
|
|
13
|
+
* Simulated Video Consultation Interface.
|
|
14
|
+
* Post-consultation Summary.
|
|
15
|
+
* **Responsive Design**: Optimized for both Desktop and Mobile experiences.
|
|
16
|
+
|
|
17
|
+
## Installation for Clients
|
|
18
|
+
|
|
19
|
+
To add the Clinic Connect widget to your website, simply include the compiled script file near the end of your `<body>` tag.
|
|
20
|
+
|
|
21
|
+
### 1. Basic Embedding
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<script
|
|
25
|
+
src="https://your-cdn.com/clinic-widget.umd.js"
|
|
26
|
+
data-widget-id="YOUR_CLINIC_ID"
|
|
27
|
+
data-locale="vi">
|
|
28
|
+
</script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 2. Advanced Embedding with Inline Trigger
|
|
32
|
+
|
|
33
|
+
If you want the widget to render an "Online Status" card inside a specific element on your page (e.g., inside your booking section), add the `data-trigger-element-id` attribute.
|
|
34
|
+
|
|
35
|
+
**HTML Structure:**
|
|
36
|
+
```html
|
|
37
|
+
<!-- Your specific container for the doctor status card -->
|
|
38
|
+
<div id="booking-section-trigger"></div>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
**Script Tag:**
|
|
42
|
+
```html
|
|
43
|
+
<script
|
|
44
|
+
src="./dist/clinic-widget.umd.js"
|
|
45
|
+
data-widget-id="clinic-123"
|
|
46
|
+
data-trigger-element-id="booking-section-trigger"
|
|
47
|
+
data-locale="vi">
|
|
48
|
+
</script>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Configuration Attributes
|
|
52
|
+
|
|
53
|
+
| Attribute | Description | Required | Default |
|
|
54
|
+
| :--- | :--- | :---: | :---: |
|
|
55
|
+
| `src` | Path to the widget JavaScript file. | Yes | - |
|
|
56
|
+
| `data-widget-id` | Unique ID for your clinic/configuration. | Yes | - |
|
|
57
|
+
| `data-trigger-element-id`| The DOM ID of the element where you want to render the inline trigger card. | No | `null` |
|
|
58
|
+
| `data-locale` | Language code (e.g., 'vi', 'en'). | No | `vi` |
|
|
59
|
+
|
|
60
|
+
## Client Hooks
|
|
61
|
+
|
|
62
|
+
The widget exposes a global `window.Clinic` object that allows your website to listen for widget events.
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<script>
|
|
66
|
+
window.Clinic = {
|
|
67
|
+
onReady: () => {
|
|
68
|
+
console.log('Widget loaded and ready');
|
|
69
|
+
},
|
|
70
|
+
onConsultationStarted: () => {
|
|
71
|
+
console.log('User started a consultation');
|
|
72
|
+
// Useful for tracking analytics pixels
|
|
73
|
+
},
|
|
74
|
+
onCompleted: () => {
|
|
75
|
+
console.log('Consultation finished');
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
</script>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Development Guide
|
|
82
|
+
|
|
83
|
+
### Prerequisites
|
|
84
|
+
* Node.js (v18+)
|
|
85
|
+
* npm
|
|
86
|
+
|
|
87
|
+
### Setup
|
|
88
|
+
1. Clone the repository.
|
|
89
|
+
2. Install dependencies:
|
|
90
|
+
```bash
|
|
91
|
+
npm install
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Running Locally
|
|
95
|
+
To start the development server with Hot Module Replacement (HMR):
|
|
96
|
+
```bash
|
|
97
|
+
npm run dev
|
|
98
|
+
```
|
|
99
|
+
Open the URL provided (usually `http://localhost:5173`) and navigate to `test_widget.html` to see the widget in action.
|
|
100
|
+
|
|
101
|
+
### Building for Production
|
|
102
|
+
To generate the optimized, minified script for distribution:
|
|
103
|
+
```bash
|
|
104
|
+
npm run build
|
|
105
|
+
```
|
|
106
|
+
The output files will be in the `dist/` folder:
|
|
107
|
+
* `clinic-widget.umd.js`: For direct browser usage (Standard).
|
|
108
|
+
* `clinic-widget.es.js`: For ES Module imports.
|
|
109
|
+
|
|
110
|
+
## Project Structure
|
|
111
|
+
|
|
112
|
+
* `src/api/`: Handles API simulation and fetching widget configuration.
|
|
113
|
+
* `src/core/`: Main widget logic (`ClinicWidget` class), lifecycle management, and event binding.
|
|
114
|
+
* `src/state/`: Centralized state management (Store pattern).
|
|
115
|
+
* `src/ui/`: Contains HTML Templates (`templates.js`) and CSS Styles (`styles.js`).
|
|
116
|
+
* `src/index.js`: Entry point that parses configuration and initializes the widget.
|
|
117
|
+
|
|
118
|
+
## License
|
|
119
|
+
MIT
|