@mypatientspace/chatbot-widget 1.0.0 → 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.
Files changed (4) hide show
  1. package/README.md +66 -23
  2. package/dist/mypatientspace-widget.es.js +5795 -5545
  3. package/dist/mypatientspace-widget.umd.js +77 -43
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  A standalone chatbot widget that third-party websites can embed via a single `<script>` tag.
4
4
 
5
+ [![npm version](https://img.shields.io/npm/v/@mypatientspace/chatbot-widget.svg)](https://www.npmjs.com/package/@mypatientspace/chatbot-widget)
6
+
5
7
  ## Features
6
8
 
7
9
  - Self-contained React application bundled into a single JS file
@@ -17,6 +19,25 @@ A standalone chatbot widget that third-party websites can embed via a single `<s
17
19
  - Emotion (CSS-in-JS for style isolation)
18
20
  - lucide-react (icons)
19
21
 
22
+ ## Installation
23
+
24
+ ### Via CDN (Recommended)
25
+
26
+ **unpkg:**
27
+ ```html
28
+ <script src="https://unpkg.com/@mypatientspace/chatbot-widget@1.0.0/dist/mypatientspace-widget.umd.js"></script>
29
+ ```
30
+
31
+ **jsDelivr:**
32
+ ```html
33
+ <script src="https://cdn.jsdelivr.net/npm/@mypatientspace/chatbot-widget@1.0.0/dist/mypatientspace-widget.umd.js"></script>
34
+ ```
35
+
36
+ ### Via npm
37
+ ```bash
38
+ npm install @mypatientspace/chatbot-widget
39
+ ```
40
+
20
41
  ## Development
21
42
 
22
43
  ```bash
@@ -37,7 +58,7 @@ yarn preview
37
58
 
38
59
  ### Minimal Setup (uses all defaults)
39
60
  ```html
40
- <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
61
+ <script src="https://unpkg.com/@mypatientspace/chatbot-widget@1.0.0/dist/mypatientspace-widget.umd.js"></script>
41
62
  <script>
42
63
  ChatbotWidget.init({
43
64
  apiEndpoint: 'https://your-api.com/chat'
@@ -47,7 +68,7 @@ yarn preview
47
68
 
48
69
  ### Full Customization
49
70
  ```html
50
- <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
71
+ <script src="https://unpkg.com/@mypatientspace/chatbot-widget@1.0.0/dist/mypatientspace-widget.umd.js"></script>
51
72
  <script>
52
73
  ChatbotWidget.init({
53
74
  apiEndpoint: 'https://your-api.com/chat',
@@ -69,6 +90,15 @@ yarn preview
69
90
  </script>
70
91
  ```
71
92
 
93
+ ### Via npm import
94
+ ```javascript
95
+ import '@mypatientspace/chatbot-widget';
96
+
97
+ ChatbotWidget.init({
98
+ apiEndpoint: 'https://your-api.com/chat'
99
+ });
100
+ ```
101
+
72
102
  ### API Methods
73
103
  ```javascript
74
104
  ChatbotWidget.open(); // Open chat window
@@ -99,7 +129,7 @@ class ChatActivity : AppCompatActivity() {
99
129
  <meta name="viewport" content="width=device-width, initial-scale=1">
100
130
  </head>
101
131
  <body style="margin:0;padding:0;">
102
- <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
132
+ <script src="https://unpkg.com/@mypatientspace/chatbot-widget@1.0.0/dist/mypatientspace-widget.umd.js"></script>
103
133
  <script>
104
134
  ChatbotWidget.init({
105
135
  apiEndpoint: 'https://your-api.com/chat'
@@ -119,6 +149,7 @@ class ChatActivity : AppCompatActivity() {
119
149
 
120
150
  ### iOS (Swift)
121
151
  ```swift
152
+ import UIKit
122
153
  import WebKit
123
154
 
124
155
  class ChatViewController: UIViewController {
@@ -131,16 +162,18 @@ class ChatViewController: UIViewController {
131
162
  config.preferences.javaScriptEnabled = true
132
163
 
133
164
  webView = WKWebView(frame: view.bounds, configuration: config)
165
+ webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
134
166
  view.addSubview(webView)
135
167
 
136
168
  let html = """
137
169
  <!DOCTYPE html>
138
170
  <html>
139
171
  <head>
140
- <meta name="viewport" content="width=device-width, initial-scale=1">
172
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
173
+ <style>body { margin: 0; padding: 0; }</style>
141
174
  </head>
142
- <body style="margin:0;padding:0;">
143
- <script src="https://your-cdn.com/mypatientspace-widget.umd.js"></script>
175
+ <body>
176
+ <script src="https://unpkg.com/@mypatientspace/chatbot-widget@1.0.0/dist/mypatientspace-widget.umd.js"></script>
144
177
  <script>
145
178
  ChatbotWidget.init({
146
179
  apiEndpoint: 'https://your-api.com/chat'
@@ -160,25 +193,35 @@ class ChatViewController: UIViewController {
160
193
  ```jsx
161
194
  import { WebView } from 'react-native-webview';
162
195
 
163
- const ChatScreen = () => (
164
- <WebView
165
- source={{ uri: 'https://your-domain.com/chat.html' }}
166
- javaScriptEnabled={true}
167
- domStorageEnabled={true}
168
- />
169
- );
196
+ const ChatScreen = () => {
197
+ const html = `
198
+ <!DOCTYPE html>
199
+ <html>
200
+ <head>
201
+ <meta name="viewport" content="width=device-width, initial-scale=1">
202
+ </head>
203
+ <body style="margin:0;padding:0;">
204
+ <script src="https://unpkg.com/@mypatientspace/chatbot-widget@1.0.0/dist/mypatientspace-widget.umd.js"></script>
205
+ <script>
206
+ ChatbotWidget.init({
207
+ apiEndpoint: 'https://your-api.com/chat'
208
+ });
209
+ ChatbotWidget.open();
210
+ </script>
211
+ </body>
212
+ </html>
213
+ `;
214
+
215
+ return (
216
+ <WebView
217
+ source={{ html }}
218
+ javaScriptEnabled={true}
219
+ domStorageEnabled={true}
220
+ />
221
+ );
222
+ };
170
223
  ```
171
224
 
172
- ### Alternative: Host a Chat Page
173
-
174
- Create a dedicated HTML page on your server and load it in the WebView:
175
-
176
- ```
177
- https://your-domain.com/chat.html
178
- ```
179
-
180
- This is the simplest approach - update the widget once and all apps get the update automatically.
181
-
182
225
  ## Default Configuration
183
226
 
184
227
  When no value is provided, these defaults are used: