@mypatientspace/chatbot-widget 1.0.34 → 1.0.35

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 CHANGED
@@ -71,16 +71,65 @@ npm install @mypatientspace/chatbot-widget
71
71
  # Install dependencies
72
72
  yarn install
73
73
 
74
- # Start dev server
74
+ # Start dev server (includes demo UI)
75
75
  yarn dev
76
76
 
77
77
  # Build for production
78
- yarn build
78
+ yarn build # Builds both widget and demo
79
+ yarn build:widget # Widget only
80
+ yarn build:demo # Demo only
79
81
 
80
82
  # Preview production build
81
83
  yarn preview
82
84
  ```
83
85
 
86
+ ## Demo Widget
87
+
88
+ An embeddable demo page with configuration panel and live preview. Useful for testing and showcasing the widget.
89
+
90
+ ### Via CDN
91
+
92
+ ```html
93
+ <div id="chatbot-demo" style="height: 600px;"></div>
94
+ <script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-demo.umd.js"></script>
95
+ <script>
96
+ ChatbotWidgetDemo.init({
97
+ containerSelector: '#chatbot-demo',
98
+ showJsonEditor: true,
99
+ initialConfig: {
100
+ headerTitle: 'My Healthcare Bot',
101
+ theme: { colors: { primary: '#007bff' } }
102
+ },
103
+ onConfigChange: (config) => console.log('Config:', config)
104
+ });
105
+ </script>
106
+ ```
107
+
108
+ ### Demo API
109
+
110
+ ```javascript
111
+ ChatbotWidgetDemo.init(config); // Initialize demo
112
+ ChatbotWidgetDemo.destroy(); // Remove demo
113
+ ChatbotWidgetDemo.update(config); // Update configuration
114
+ ```
115
+
116
+ ### Demo Configuration
117
+
118
+ | Option | Type | Default | Description |
119
+ |--------|------|---------|-------------|
120
+ | `containerSelector` | `string` | Required | CSS selector for container |
121
+ | `showConfigPanel` | `boolean` | `true` | Show left config panel |
122
+ | `showPreviewPanel` | `boolean` | `true` | Show right preview panel |
123
+ | `showJsonEditor` | `boolean` | `true` | Show Form/JSON toggle |
124
+ | `showDisplaySettings` | `boolean` | `true` | Show display settings section |
125
+ | `showSessionSettings` | `boolean` | `true` | Show session settings section |
126
+ | `showAppearanceSettings` | `boolean` | `true` | Show appearance section |
127
+ | `showThemeSettings` | `boolean` | `true` | Show theme colors section |
128
+ | `showContentSettings` | `boolean` | `true` | Show content settings section |
129
+ | `showQuickActions` | `boolean` | `true` | Show quick actions section |
130
+ | `initialConfig` | `Partial<WidgetConfig>` | `{}` | Pre-fill widget config |
131
+ | `onConfigChange` | `(config) => void` | - | Called when config changes |
132
+
84
133
  ## Web Integration
85
134
 
86
135
  ### Minimal Setup