@product7/product7-js 0.3.2 → 0.3.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.
Files changed (21) hide show
  1. package/README.md +53 -29
  2. package/dist/README.md +53 -29
  3. package/dist/product7-js.js +455 -139
  4. package/dist/product7-js.js.map +1 -1
  5. package/dist/product7-js.min.js +1 -1
  6. package/dist/product7-js.min.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/api/services/MessengerService.js +1 -30
  9. package/src/core/APIService.js +35 -1
  10. package/src/core/BaseAPIService.js +124 -11
  11. package/src/core/Product7.js +182 -18
  12. package/src/docs/api.md +253 -89
  13. package/src/docs/example.md +203 -153
  14. package/src/docs/framework-integrations.md +236 -358
  15. package/src/docs/installation.md +171 -143
  16. package/src/index.js +48 -41
  17. package/src/widgets/MessengerWidget.js +27 -29
  18. package/src/widgets/SurveyWidget.js +20 -0
  19. package/src/widgets/messenger/views/ChatView.js +14 -8
  20. package/src/widgets/messenger/views/HomeView.js +5 -2
  21. package/types/index.d.ts +34 -0
package/README.md CHANGED
@@ -32,16 +32,17 @@ import { Product7 } from '@product7/product7-js';
32
32
 
33
33
  const sdk = new Product7({
34
34
  workspace: 'your-workspace',
35
- metadata: {
36
- user_id: 'user_123',
37
- email: 'user@example.com',
38
- name: 'Jane Doe',
39
- },
40
35
  });
41
36
 
42
37
  await sdk.init();
38
+ await sdk.identify({
39
+ user_id: 'user_123',
40
+ email: 'user@example.com',
41
+ name: 'Jane Doe',
42
+ custom_fields: { plan: 'pro' },
43
+ });
43
44
 
44
- const widget = sdk.createWidget('button', { position: 'bottom-right' });
45
+ const widget = sdk.createFeedbackWidget({ position: 'bottom-right' });
45
46
  widget.mount();
46
47
  ```
47
48
 
@@ -51,37 +52,43 @@ widget.mount();
51
52
  <script src="https://cdn.jsdelivr.net/npm/@product7/product7-js@latest/dist/product7-js.min.js"></script>
52
53
  <script>
53
54
  const sdk = new window.Product7.Product7SDK({
54
- workspace: 'your-workspace',
55
- metadata: {
56
- user_id: 'user_123',
57
- email: 'user@example.com',
58
- name: 'Jane Doe',
59
- },
55
+ workspace: 'your-workspace',
60
56
  });
61
57
 
62
58
  await sdk.init();
59
+ await sdk.identify({
60
+ user_id: 'user_123',
61
+ email: 'user@example.com',
62
+ name: 'Jane Doe',
63
+ });
63
64
 
64
- const widget = sdk.createWidget('button', { position: 'bottom-right' });
65
+ const widget = sdk.createFeedbackWidget({ position: 'bottom-right' });
65
66
  widget.mount();
66
67
  </script>
67
68
  ```
68
69
 
69
- > Use `window.Product7.Product7SDK` on CDN — `window.Product7` is a plain object, not a constructor.
70
+ > Use `window.Product7.Product7SDK` on CDN. `window.Product7` is a plain object, not a constructor.
70
71
 
71
72
  ---
72
73
 
73
74
  ## Widgets
74
75
 
75
- | Widget | Type string | Description |
76
- | --------------- | ------------- | ----------------------------------------------------- |
77
- | Feedback button | `'button'` | Floating button that opens a feedback panel or modal |
78
- | Messenger | `'messenger'` | Live chat, help articles, and changelog in one widget |
79
- | Survey | `'survey'` | NPS, CSAT, CES, and custom multi-step surveys |
80
- | Inline | `'inline'` | Embed feedback directly into a page element |
76
+ | Widget | Type string | Description |
77
+ | --------- | ------------- | ----------------------------------------------------- |
78
+ | Feedback | `'feedback'` | Floating button that opens a feedback panel or modal |
79
+ | Messenger | `'messenger'` | Live chat, help articles, and changelog in one widget |
80
+ | Survey | `'survey'` | NPS, CSAT, CES, and custom multi-step surveys |
81
+ | Inline | `'inline'` | Embed feedback directly into a page element |
81
82
 
82
83
  ```javascript
84
+ // Feedback
85
+ const feedback = sdk.createFeedbackWidget({
86
+ position: 'bottom-right',
87
+ });
88
+ feedback.mount();
89
+
83
90
  // Messenger
84
- const messenger = sdk.createWidget('messenger', {
91
+ const messenger = sdk.createMessengerWidget({
85
92
  position: 'bottom-right',
86
93
  teamName: 'Support Team',
87
94
  enableHelp: true,
@@ -89,13 +96,28 @@ const messenger = sdk.createWidget('messenger', {
89
96
  });
90
97
  messenger.mount();
91
98
 
92
- // Survey — fetch active surveys and show on load
99
+ // Survey: fetch active surveys and show on load
93
100
  const surveys = await sdk.getActiveSurveys({ includeEligibility: true });
94
101
  if (surveys.length > 0) {
95
102
  sdk.showSurveyById(surveys[0].surveyId, { position: 'center' });
96
103
  }
97
104
  ```
98
105
 
106
+ ```javascript
107
+ // Headless feedback widget with your own trigger
108
+ const feedback = sdk.createFeedbackWidget({
109
+ headless: true,
110
+ boardName: 'feature-requests',
111
+ });
112
+ feedback.mount();
113
+
114
+ document
115
+ .querySelector('#leave-feedback')
116
+ ?.addEventListener('click', () => feedback.open());
117
+ ```
118
+
119
+ Legacy compatibility is still available through `sdk.createWidget('button', ...)`, but new integrations should prefer `sdk.createFeedbackWidget(...)` or `sdk.createWidget('feedback', ...)`.
120
+
99
121
  ---
100
122
 
101
123
  ## Key Options
@@ -103,18 +125,20 @@ if (surveys.length > 0) {
103
125
  ```javascript
104
126
  new Product7({
105
127
  workspace: 'your-workspace', // required
106
- metadata: {
107
- // recommended — identifies the user
108
- user_id: 'user_123',
109
- email: 'user@example.com',
110
- name: 'Jane Doe',
111
- custom_fields: { plan: 'pro' },
112
- },
113
128
  debug: false, // enable console logging
114
129
  mock: false, // run without a backend (dev/testing)
115
130
  });
116
131
  ```
117
132
 
133
+ ```javascript
134
+ await sdk.identify({
135
+ user_id: 'user_123', // required: user_id or email
136
+ email: 'user@example.com',
137
+ name: 'Jane Doe',
138
+ custom_fields: { plan: 'pro' },
139
+ });
140
+ ```
141
+
118
142
  ---
119
143
 
120
144
  ## Cleanup
package/dist/README.md CHANGED
@@ -32,16 +32,17 @@ import { Product7 } from '@product7/product7-js';
32
32
 
33
33
  const sdk = new Product7({
34
34
  workspace: 'your-workspace',
35
- metadata: {
36
- user_id: 'user_123',
37
- email: 'user@example.com',
38
- name: 'Jane Doe',
39
- },
40
35
  });
41
36
 
42
37
  await sdk.init();
38
+ await sdk.identify({
39
+ user_id: 'user_123',
40
+ email: 'user@example.com',
41
+ name: 'Jane Doe',
42
+ custom_fields: { plan: 'pro' },
43
+ });
43
44
 
44
- const widget = sdk.createWidget('button', { position: 'bottom-right' });
45
+ const widget = sdk.createFeedbackWidget({ position: 'bottom-right' });
45
46
  widget.mount();
46
47
  ```
47
48
 
@@ -51,37 +52,43 @@ widget.mount();
51
52
  <script src="https://cdn.jsdelivr.net/npm/@product7/product7-js@latest/dist/product7-js.min.js"></script>
52
53
  <script>
53
54
  const sdk = new window.Product7.Product7SDK({
54
- workspace: 'your-workspace',
55
- metadata: {
56
- user_id: 'user_123',
57
- email: 'user@example.com',
58
- name: 'Jane Doe',
59
- },
55
+ workspace: 'your-workspace',
60
56
  });
61
57
 
62
58
  await sdk.init();
59
+ await sdk.identify({
60
+ user_id: 'user_123',
61
+ email: 'user@example.com',
62
+ name: 'Jane Doe',
63
+ });
63
64
 
64
- const widget = sdk.createWidget('button', { position: 'bottom-right' });
65
+ const widget = sdk.createFeedbackWidget({ position: 'bottom-right' });
65
66
  widget.mount();
66
67
  </script>
67
68
  ```
68
69
 
69
- > Use `window.Product7.Product7SDK` on CDN — `window.Product7` is a plain object, not a constructor.
70
+ > Use `window.Product7.Product7SDK` on CDN. `window.Product7` is a plain object, not a constructor.
70
71
 
71
72
  ---
72
73
 
73
74
  ## Widgets
74
75
 
75
- | Widget | Type string | Description |
76
- | --------------- | ------------- | ----------------------------------------------------- |
77
- | Feedback button | `'button'` | Floating button that opens a feedback panel or modal |
78
- | Messenger | `'messenger'` | Live chat, help articles, and changelog in one widget |
79
- | Survey | `'survey'` | NPS, CSAT, CES, and custom multi-step surveys |
80
- | Inline | `'inline'` | Embed feedback directly into a page element |
76
+ | Widget | Type string | Description |
77
+ | --------- | ------------- | ----------------------------------------------------- |
78
+ | Feedback | `'feedback'` | Floating button that opens a feedback panel or modal |
79
+ | Messenger | `'messenger'` | Live chat, help articles, and changelog in one widget |
80
+ | Survey | `'survey'` | NPS, CSAT, CES, and custom multi-step surveys |
81
+ | Inline | `'inline'` | Embed feedback directly into a page element |
81
82
 
82
83
  ```javascript
84
+ // Feedback
85
+ const feedback = sdk.createFeedbackWidget({
86
+ position: 'bottom-right',
87
+ });
88
+ feedback.mount();
89
+
83
90
  // Messenger
84
- const messenger = sdk.createWidget('messenger', {
91
+ const messenger = sdk.createMessengerWidget({
85
92
  position: 'bottom-right',
86
93
  teamName: 'Support Team',
87
94
  enableHelp: true,
@@ -89,13 +96,28 @@ const messenger = sdk.createWidget('messenger', {
89
96
  });
90
97
  messenger.mount();
91
98
 
92
- // Survey — fetch active surveys and show on load
99
+ // Survey: fetch active surveys and show on load
93
100
  const surveys = await sdk.getActiveSurveys({ includeEligibility: true });
94
101
  if (surveys.length > 0) {
95
102
  sdk.showSurveyById(surveys[0].surveyId, { position: 'center' });
96
103
  }
97
104
  ```
98
105
 
106
+ ```javascript
107
+ // Headless feedback widget with your own trigger
108
+ const feedback = sdk.createFeedbackWidget({
109
+ headless: true,
110
+ boardName: 'feature-requests',
111
+ });
112
+ feedback.mount();
113
+
114
+ document
115
+ .querySelector('#leave-feedback')
116
+ ?.addEventListener('click', () => feedback.open());
117
+ ```
118
+
119
+ Legacy compatibility is still available through `sdk.createWidget('button', ...)`, but new integrations should prefer `sdk.createFeedbackWidget(...)` or `sdk.createWidget('feedback', ...)`.
120
+
99
121
  ---
100
122
 
101
123
  ## Key Options
@@ -103,18 +125,20 @@ if (surveys.length > 0) {
103
125
  ```javascript
104
126
  new Product7({
105
127
  workspace: 'your-workspace', // required
106
- metadata: {
107
- // recommended — identifies the user
108
- user_id: 'user_123',
109
- email: 'user@example.com',
110
- name: 'Jane Doe',
111
- custom_fields: { plan: 'pro' },
112
- },
113
128
  debug: false, // enable console logging
114
129
  mock: false, // run without a backend (dev/testing)
115
130
  });
116
131
  ```
117
132
 
133
+ ```javascript
134
+ await sdk.identify({
135
+ user_id: 'user_123', // required: user_id or email
136
+ email: 'user@example.com',
137
+ name: 'Jane Doe',
138
+ custom_fields: { plan: 'pro' },
139
+ });
140
+ ```
141
+
118
142
  ---
119
143
 
120
144
  ## Cleanup