@eka-care/medassist-widget-embed 0.2.16 → 0.2.17

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 (2) hide show
  1. package/README.md +81 -122
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,39 +1,33 @@
1
1
  # @eka-care/medassist-widget-embed
2
2
 
3
- A lightweight, embeddable widget loader for MedAssist that uses Web Components for easy integration into any website. This package provides
3
+ Lightweight, embeddable widget loader for MedAssist using Web Components. Add the script and the `<eka-medassist-widget>` custom element to any page for a framework-agnostic, lazy-loaded chat widget.
4
4
 
5
5
  ## Overview
6
6
 
7
- The widget-embed package provides:
8
-
9
- - **Custom Web Component**: `<eka-medassist-widget>` for easy embedding
10
- - **Lazy Loading**: Widget assets are loaded only when the user clicks the button
11
- - **Framework Agnostic**: Works with any website, no React or build step required
12
- - **Isolated Styling**: Shadow DOM prevents style conflicts with host websites
13
- - **Simple Integration**: Just add a script tag and custom element
7
+ - **Custom Web Component** – `<eka-medassist-widget>` for easy embedding
8
+ - **Lazy loading** – Widget assets load when the user opens the widget
9
+ - **Framework agnostic** – No React or build step required
10
+ - **Isolated styling** – Shadow DOM avoids conflicts with host styles
11
+ - **Simple integration** – Script tag + custom element
14
12
 
15
13
  ## Installation
16
14
 
17
- Install from npm to self-host the assets or reference the package from a CDN such as jsDelivr or UNPKG:
18
-
19
15
  ```bash
20
16
  npm install @eka-care/medassist-widget-embed
21
17
  ```
22
18
 
23
- To load directly from a CDN, point the script tag to the published package (replace the version with the one you intend to use):
19
+ Or load from a CDN (replace the version as needed):
24
20
 
25
21
  ```html
26
22
  <script
27
- src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@0.0.1/index.js"
23
+ src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js"
28
24
  async></script>
29
25
  ```
30
26
 
31
- The script automatically looks for the accompanying `src/medassist-widget.*` files, so host those assets alongside `index.js`.
27
+ For self-hosting, ensure the built widget assets (`medassist-widget.js`, `medassist-widget.css`) are served alongside `index.js`, or use the package’s default CDN for widget assets (see [How it works](#how-it-works)).
32
28
 
33
29
  ## Usage
34
30
 
35
- Add the widget to any HTML page:
36
-
37
31
  ```html
38
32
  <!DOCTYPE html>
39
33
  <html>
@@ -41,99 +35,109 @@ Add the widget to any HTML page:
41
35
  <title>My Website</title>
42
36
  </head>
43
37
  <body>
44
- <h1>Welcome to my site!</h1>
38
+ <h1>Welcome</h1>
45
39
 
46
- <!-- Add the widget custom element -->
47
40
  <eka-medassist-widget agent-id="your-agent-id-here"></eka-medassist-widget>
48
41
 
49
- <!-- Load the widget loader script -->
50
- <script src="https://your-cdn.com/widget-embed/index.js" async></script>
42
+ <script src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js" async></script>
51
43
  </body>
52
44
  </html>
53
45
  ```
54
46
 
55
- That's it! The widget will appear as a floating button in the bottom-right corner.
47
+ The widget appears as a floating button; clicking it loads and opens the chat.
56
48
 
57
49
  ## Configuration
58
50
 
59
- ### Required Attributes
51
+ ### Required attributes
52
+
53
+ - **`agent-id`** – Your MedAssist agent identifier
54
+
55
+ ### Optional attributes
56
+
57
+ - **`icon-url`** – Custom icon URL for the widget button (default: Eka CDN icon)
58
+ - **`title`** – Widget title
59
+ - **`base-url`** – Base URL for API/agent config
60
+ - **`display-mode`** – `"widget"` (floating button) or `"full"` (inline full view)
61
+ - **`context`** – JSON string of context key-value pairs
60
62
 
61
- - `agent-id` (required): Your MedAssist agent identifier
63
+ ### Programmatic config with `EkaMedAssist.init()`
62
64
 
63
- ### Optional Attributes
65
+ After the script loads, you can set or override config before the user opens the widget:
64
66
 
65
- - `icon-url`: Custom icon URL for the widget button (default: `./assets/bot-icon.svg`)
67
+ ```javascript
68
+ window.EkaMedAssist.init({
69
+ agentId: "your-agent-id",
70
+ title: "MedAssist",
71
+ iconUrl: "https://example.com/icon.svg",
72
+ baseUrl: "https://api.example.com",
73
+ context: { key: "value" },
74
+ theme: {
75
+ background: "#1a1738",
76
+ primary: "#09FBD3",
77
+ textColor: "white",
78
+ },
79
+ });
80
+ ```
66
81
 
67
- ### Example with Custom Icon
82
+ ### Custom icon example
68
83
 
69
84
  ```html
70
85
  <eka-medassist-widget
71
- agent-id="your-agent-id-here"
86
+ agent-id="your-agent-id"
72
87
  icon-url="https://example.com/custom-icon.svg"></eka-medassist-widget>
73
88
  ```
74
89
 
75
- ## How It Works
90
+ ## How it works
91
+
92
+ 1. **Initial load** – The script registers the custom element `<eka-medassist-widget>`.
93
+ 2. **Button** – The element shows a floating button (or full view if `display-mode="full"`).
94
+ 3. **Lazy load** – On first open, the script fetches the widget JS and CSS (from the same origin or from `https://unpkg.com/@eka-care/medassist-widget@latest/dist/` by default).
95
+ 4. **Isolation** – The widget runs inside Shadow DOM to avoid style and script conflicts.
96
+
97
+ To use your own widget assets (e.g. after building [@eka-care/medassist-widget](https://www.npmjs.com/package/@eka-care/medassist-widget)), host `medassist-widget.js` and `medassist-widget.css` and point the script via the `data-widget-assets` attribute:
76
98
 
77
- 1. **Initial Load**: The loader script (`index.js`) registers the custom element `<eka-medassist-widget>`
78
- 2. **Button Display**: The custom element renders a floating button in the bottom-right corner
79
- 3. **Lazy Loading**: When the user clicks the button:
80
- - The widget CSS is fetched and injected into the shadow DOM
81
- - The widget JavaScript bundle is loaded
82
- - The widget is rendered inside the shadow DOM
83
- 4. **Isolation**: All widget code runs in a Shadow DOM, preventing style and script conflicts
99
+ ```html
100
+ <script
101
+ src="/path/to/widget-embed/index.js"
102
+ data-widget-assets="/path/to/widget-assets/"
103
+ async></script>
104
+ ```
84
105
 
85
- ## File Structure
106
+ ## File structure
86
107
 
87
108
  ```
88
109
  widget-embed/
89
- ├── index.js # Web component loader and custom element definition
90
- ├── src/ # Generated widget assets (from widget package build)
91
- │ ├── medassist-widget.js
92
- │ └── medassist-widget.css
110
+ ├── dist/
111
+ │ ├── index.js # Loader and custom element
112
+ │ ├── iframe.js # Optional iframe helper
113
+ │ └── iframe.html # Optional iframe template
93
114
  ├── assets/
94
- │ └── bot-icon.svg # Default widget button icon
95
- └── test.html # Example integration page
115
+ │ └── bot-icon.svg # Default button icon (or CDN)
116
+ └── README.md
96
117
  ```
97
118
 
98
- ## Customization
99
-
100
- ### Custom Icon
101
-
102
- You can customize the widget button icon by setting the `icon-url` attribute:
119
+ ## Browser support
103
120
 
104
- ```html
105
- <eka-medassist-widget
106
- agent-id="your-agent-id"
107
- icon-url="/path/to/your-icon.svg"></eka-medassist-widget>
108
- ```
121
+ - Chrome, Firefox, Safari, Edge (latest)
122
+ - Requires Custom Elements, Shadow DOM, and ES6+
109
123
 
110
- ### Dynamic Attribute Updates
124
+ ## Development
111
125
 
112
- You can update widget attributes programmatically:
126
+ Build the package:
113
127
 
114
- ```javascript
115
- const widget = document.querySelector("eka-medassist-widget");
116
- widget.setAttribute("icon-url", "https://example.com/new-icon.svg");
128
+ ```bash
129
+ npm run build
117
130
  ```
118
131
 
119
- ## Browser Support
120
-
121
- - Chrome (latest)
122
- - Firefox (latest)
123
- - Safari (latest)
124
- - Edge (latest)
125
-
126
- Requires support for:
132
+ To build and bundle the widget assets locally:
127
133
 
128
- - Custom Elements (Web Components)
129
- - Shadow DOM
130
- - ES6+ JavaScript
131
-
132
- ## Development
134
+ ```bash
135
+ npm run build:with-widget
136
+ ```
133
137
 
134
- Use any static server or bundler workflow you prefer for local verification. The widget emits helpful console logs (asset loading status, errors) that you can inspect in the browser DevTools.
138
+ (Requires the widget package to be built first.)
135
139
 
136
- ## Integration Examples
140
+ ## Integration examples
137
141
 
138
142
  ### React
139
143
 
@@ -142,20 +146,15 @@ import { useEffect } from "react";
142
146
 
143
147
  function App() {
144
148
  useEffect(() => {
145
- // Load the widget script
146
149
  const script = document.createElement("script");
147
- script.src = "https://your-cdn.com/widget-embed/index.js";
150
+ script.src = "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js";
148
151
  script.async = true;
149
152
  document.body.appendChild(script);
150
-
151
- return () => {
152
- // Cleanup if needed
153
- };
154
153
  }, []);
155
154
 
156
155
  return (
157
156
  <div>
158
- <h1>My React App</h1>
157
+ <h1>My App</h1>
159
158
  <eka-medassist-widget agent-id="your-agent-id" />
160
159
  </div>
161
160
  );
@@ -167,21 +166,16 @@ function App() {
167
166
  ```vue
168
167
  <template>
169
168
  <div>
170
- <h1>My Vue App</h1>
171
169
  <eka-medassist-widget :agent-id="agentId" />
172
170
  </div>
173
171
  </template>
174
172
 
175
173
  <script>
176
174
  export default {
177
- data() {
178
- return {
179
- agentId: "your-agent-id",
180
- };
181
- },
175
+ data: () => ({ agentId: "your-agent-id" }),
182
176
  mounted() {
183
177
  const script = document.createElement("script");
184
- script.src = "https://your-cdn.com/widget-embed/index.js";
178
+ script.src = "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js";
185
179
  script.async = true;
186
180
  document.body.appendChild(script);
187
181
  },
@@ -189,45 +183,10 @@ export default {
189
183
  </script>
190
184
  ```
191
185
 
192
- ### Vanilla JavaScript
193
-
194
- ```html
195
- <!DOCTYPE html>
196
- <html>
197
- <head>
198
- <title>My Site</title>
199
- </head>
200
- <body>
201
- <eka-medassist-widget agent-id="your-agent-id"></eka-medassist-widget>
202
-
203
- <script>
204
- // Load widget script
205
- (function () {
206
- const script = document.createElement("script");
207
- script.src = "https://your-cdn.com/widget-embed/index.js";
208
- script.async = true;
209
- document.body.appendChild(script);
210
- })();
211
- </script>
212
- </body>
213
- </html>
214
- ```
215
-
216
186
  ## Troubleshooting
217
187
 
218
- ### Widget Not Appearing
219
-
220
- 1. Check that the `agent-id` attribute is set correctly
221
- 2. Verify that `index.js` is loading (check Network tab in DevTools)
222
- 3. Check browser console for errors
223
- 4. Ensure the widget assets (`medassist-widget.js` and `medassist-widget.css`) are accessible
224
-
225
- ### Styling Conflicts
226
-
227
- The widget uses Shadow DOM to isolate styles, but if you encounter issues:
228
-
229
- - Check that the widget is rendering inside the shadow DOM
230
- - Verify that host website styles aren't affecting the shadow root
188
+ - **Widget not appearing** – Check `agent-id`, ensure the loader script loads (Network tab), and check the console for errors.
189
+ - **Assets 404** – If using self-hosted assets, ensure `medassist-widget.js` and `medassist-widget.css` are served at the path given in `data-widget-assets` (or use the default CDN).
231
190
 
232
191
  ## License
233
192
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eka-care/medassist-widget-embed",
3
- "version": "0.2.16",
3
+ "version": "0.2.17",
4
4
  "description": "Embeddable MedAssist widget loader built with Web Components.",
5
5
  "author": "Geethanjali S",
6
6
  "license": "MIT",