@mypatientspace/chatbot-widget 1.0.20 → 1.0.22
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 +46 -0
- package/dist/mypatientspace-widget.es.js +3739 -3697
- package/dist/mypatientspace-widget.umd.js +68 -60
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@ A standalone chatbot widget that third-party websites can embed via a single `<s
|
|
|
8
8
|
|
|
9
9
|
- Self-contained React application bundled into a single JS file
|
|
10
10
|
- Easy integration with any website
|
|
11
|
+
- Floating button mode (default) or embedded mode
|
|
11
12
|
- Customizable theming
|
|
12
13
|
- Style isolation (won't conflict with host site CSS)
|
|
13
14
|
- Native mobile support via WebView
|
|
@@ -107,6 +108,49 @@ ChatbotWidget.toggle(); // Toggle open/close
|
|
|
107
108
|
ChatbotWidget.destroy(); // Remove widget completely
|
|
108
109
|
```
|
|
109
110
|
|
|
111
|
+
## Embedded Mode
|
|
112
|
+
|
|
113
|
+
By default, the widget displays as a floating button that opens a popup. You can also embed the chat directly inside any container on your page.
|
|
114
|
+
|
|
115
|
+
### Using containerSelector
|
|
116
|
+
|
|
117
|
+
Embed the chat inside an existing element:
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<div id="my-chat" style="width: 400px; height: 600px;"></div>
|
|
121
|
+
|
|
122
|
+
<script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
|
|
123
|
+
<script>
|
|
124
|
+
ChatbotWidget.init({
|
|
125
|
+
apiEndpoint: 'https://your-api.com/chat',
|
|
126
|
+
containerSelector: '#my-chat'
|
|
127
|
+
});
|
|
128
|
+
</script>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Using embedMode
|
|
132
|
+
|
|
133
|
+
Enable embedded styling without a specific container:
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<script>
|
|
137
|
+
ChatbotWidget.init({
|
|
138
|
+
apiEndpoint: 'https://your-api.com/chat',
|
|
139
|
+
embedMode: true
|
|
140
|
+
});
|
|
141
|
+
</script>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Comparison
|
|
145
|
+
|
|
146
|
+
| Feature | `containerSelector` | `embedMode: true` |
|
|
147
|
+
|---------|---------------------|-------------------|
|
|
148
|
+
| Container | Your element | Auto-created |
|
|
149
|
+
| Sizing | Your CSS controls it | 100% of parent |
|
|
150
|
+
| FAB button | Hidden | Hidden |
|
|
151
|
+
| Chat visibility | Always open | Always open |
|
|
152
|
+
| On destroy | Container preserved | Container removed |
|
|
153
|
+
|
|
110
154
|
## Mobile Integration
|
|
111
155
|
|
|
112
156
|
### Android (Kotlin)
|
|
@@ -235,6 +279,8 @@ When no value is provided, these defaults are used:
|
|
|
235
279
|
| `brandingLogo` | https://web.mypatientspace.com/img/logo-symbol.png |
|
|
236
280
|
| `fabIcon` | https://web.mypatientspace.com/img/logo-symbol.png |
|
|
237
281
|
| `position` | "bottom-right" |
|
|
282
|
+
| `containerSelector` | undefined (floating mode) |
|
|
283
|
+
| `embedMode` | false (auto-enabled when containerSelector is set) |
|
|
238
284
|
| `quickActions` | Book Appointment, Hours, Contact, Location |
|
|
239
285
|
|
|
240
286
|
## License
|