devx-web-widget 1.2.3 → 1.2.4
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 +11 -42
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,47 +27,13 @@ pnpm add devx-web-widget
|
|
|
27
27
|
yarn add devx-web-widget
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
**
|
|
31
|
-
|
|
32
|
-
CDN (recommended for quick start):
|
|
33
|
-
|
|
34
|
-
Include the prebuilt CDN-hosted bundle directly from unpkg:
|
|
35
|
-
|
|
36
|
-
```html
|
|
37
|
-
<script src="https://app.unpkg.com/devx-web-widget@1.1.0/files/dist/feedback-widget.js"></script>
|
|
38
|
-
<script>
|
|
39
|
-
|
|
40
|
-
const DEFAULT_CONFIG = {
|
|
41
|
-
buttonLabel: 'Feedback',
|
|
42
|
-
backgroundColor: '#111827',
|
|
43
|
-
textColor: '#ffffff',
|
|
44
|
-
accentColor: '#2F6FED',
|
|
45
|
-
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
46
|
-
position: 'right',
|
|
47
|
-
widgetType: 'default'
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
const feedbackWidget = new FeedbackWidget("api_key", DEFAULT_CONFIG);
|
|
51
|
-
|
|
52
|
-
window.addEventListener('feedbackwidget:submit', (event) => {
|
|
53
|
-
console.log(event)
|
|
54
|
-
});
|
|
55
|
-
</script>
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
Note: using the CDN is the simplest way to get started; it serves the built `dist/feedback-widget.js` for versioned consumption.
|
|
59
|
-
|
|
60
|
-
Local bundle (if you need to customize or avoid CDN):
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
**Usage — npm package / ES module (DevX projects)**
|
|
30
|
+
**Usage — npm package / ES module**
|
|
64
31
|
Import the shipped module and instantiate the widget in an ESM environment (recommended for DevX apps):
|
|
65
32
|
|
|
66
33
|
```js
|
|
67
34
|
import { FeedbackWidget } from 'devx-web-widget';
|
|
68
35
|
|
|
69
|
-
|
|
70
|
-
const widget = new FeedbackWidget(/* apiKeyOrEmpty */ '', {
|
|
36
|
+
const widget = new FeedbackWidget({
|
|
71
37
|
buttonLabel: 'Feedback',
|
|
72
38
|
accentColor: '#2F6FED',
|
|
73
39
|
position: 'right' // 'left' | 'right'
|
|
@@ -76,17 +42,17 @@ const widget = new FeedbackWidget(/* apiKeyOrEmpty */ '', {
|
|
|
76
42
|
// programmatic control
|
|
77
43
|
widget.open('visible');
|
|
78
44
|
widget.close();
|
|
79
|
-
|
|
45
|
+
widget.destroy();
|
|
80
46
|
|
|
81
47
|
window.addEventListener('feedbackwidget:submit', (e) => {
|
|
82
48
|
console.log('feedback payload', e.detail);
|
|
83
49
|
});
|
|
84
50
|
```
|
|
85
51
|
|
|
86
|
-
|
|
52
|
+
If you are using the package from a local build, the shipped `dist/` files are already available in the repository.
|
|
87
53
|
|
|
88
54
|
**Configuration options**
|
|
89
|
-
Pass the config
|
|
55
|
+
Pass the config object directly to the constructor:
|
|
90
56
|
|
|
91
57
|
- `buttonLabel` (string) — label shown on the side tab (default: `Feedback`)
|
|
92
58
|
- `backgroundColor` (string) — widget background color (hex)
|
|
@@ -96,10 +62,13 @@ Pass the config as the second constructor argument (or use `window.FeedbackWidge
|
|
|
96
62
|
- `position` (`left` | `right`)
|
|
97
63
|
- `widgetType` (`default` | `chatbot`)
|
|
98
64
|
|
|
65
|
+
The `chatbot` type is available as a widget variant, but it currently renders the same feedback UI as the default type.
|
|
99
66
|
|
|
100
67
|
**Event payload**
|
|
101
68
|
The widget emits `feedbackwidget:submit` with `event.detail` containing:
|
|
102
69
|
|
|
103
|
-
- `
|
|
104
|
-
- `
|
|
105
|
-
- `
|
|
70
|
+
- `title`
|
|
71
|
+
- `body`
|
|
72
|
+
- `user_handle`
|
|
73
|
+
|
|
74
|
+
The `body` text includes the page title, page URL, selected element selector (when available), option type, and submission timestamp.
|