clinic-connect-widget 1.0.4 → 1.0.6

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.
Files changed (4) hide show
  1. package/README.md +61 -38
  2. package/dist/clinic-widget.es.js +245 -81
  3. package/dist/clinic-widget.umd.js +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -14,11 +14,11 @@ Clinic Connect is a lightweight, embeddable medical booking and tele-consultatio
14
14
  * Post-consultation Summary.
15
15
  * **Responsive Design**: Optimized for both Desktop and Mobile experiences.
16
16
 
17
- ## Installation for Clients
17
+ ## Installation
18
18
 
19
19
  To add the Clinic Connect widget to your website, simply include the compiled script file near the end of your `<body>` tag.
20
20
 
21
- ### 1. Basic Embedding
21
+ ### Basic Embed
22
22
 
23
23
  ```html
24
24
  <script
@@ -28,54 +28,69 @@ To add the Clinic Connect widget to your website, simply include the compiled sc
28
28
  </script>
29
29
  ```
30
30
 
31
- ### 2. Advanced Embedding with Inline Trigger
31
+ ### Advanced Embed (With Dynamic Doctor/Product)
32
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.
33
+ You can pre-select a doctor or product context by passing additional attributes.
34
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
35
  ```html
43
36
  <script
44
- src="./dist/clinic-widget.umd.js"
45
- data-widget-id="clinic-123"
46
- data-trigger-element-id="booking-section-trigger"
37
+ src="https://your-cdn.com/clinic-widget.umd.js"
38
+ data-widget-id="YOUR_CLINIC_ID"
39
+ data-store-id="YOUR_STORE_ID"
40
+ data-doctor-id="YOUR_DOCTOR_ID"
41
+ data-product-id="YOUR_PRODUCT_ID"
42
+ data-url-video="YOUR_VIDEO_URL"
47
43
  data-locale="vi">
48
44
  </script>
49
45
  ```
50
46
 
51
- ## Configuration Attributes
47
+ ## Configuration Parameters
48
+
49
+ The widget is highly configurable via `data-` attributes on the script tag.
52
50
 
53
51
  | Attribute | Description | Required | Default |
54
52
  | :--- | :--- | :---: | :---: |
55
53
  | `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` |
54
+ | `data-widget-id` | Unique ID for your clinic's implementation. | **Yes** | - |
55
+ | `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` |
58
56
  | `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>
57
+ | `data-store-id` | The Store ID associated with the booking system. | No | `null` |
58
+ | `data-org-id` | The Organization ID. | No | `null` |
59
+ | `data-doctor-id` | Pre-select a specific doctor context. | No | `null` |
60
+ | `data-product-id` | Pre-select a specific product or service package. | No | `null` |
61
+ | `data-url-video` | URL for the introductory video used in the permission flow. | No | `null` |
62
+
63
+ ## Client Hooks (API)
64
+
65
+ The widget exposes a global `window.Clinic` object that allows your website to listen for widget events and interact with the instance.
66
+
67
+ ```javascript
68
+ window.Clinic = {
69
+ /**
70
+ * Called when the widget is fully loaded and ready.
71
+ */
72
+ onReady: () => {
73
+ console.log('Widget loaded and ready');
74
+ },
75
+
76
+ /**
77
+ * Called when the user successfully starts a consultation session.
78
+ * Useful for tracking analytics conversions.
79
+ */
80
+ onConsultationStarted: () => {
81
+ console.log('User started a consultation');
82
+ },
83
+
84
+ /**
85
+ * Called when the consultation flow is finished.
86
+ */
87
+ onCompleted: () => {
88
+ console.log('Consultation finished');
89
+ },
90
+
91
+ // The active widget instance
92
+ instance: { ... }
93
+ };
79
94
  ```
80
95
 
81
96
  ## Development Guide
@@ -107,6 +122,14 @@ The output files will be in the `dist/` folder:
107
122
  * `clinic-widget.umd.js`: For direct browser usage (Standard).
108
123
  * `clinic-widget.es.js`: For ES Module imports.
109
124
 
125
+ ### Testing Production Build
126
+ To verify the final build behaves as expected:
127
+ 1. Run the build command:
128
+ ```bash
129
+ npm run build
130
+ ```
131
+ 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.
132
+
110
133
  ## Project Structure
111
134
 
112
135
  * `src/api/`: Handles API simulation and fetching widget configuration.
@@ -116,4 +139,4 @@ The output files will be in the `dist/` folder:
116
139
  * `src/index.js`: Entry point that parses configuration and initializes the widget.
117
140
 
118
141
  ## License
119
- MIT
142
+ ISC