@product7/feedback-sdk 1.0.5 → 1.0.7

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 (12) hide show
  1. package/dist/feedback-sdk.js +327 -278
  2. package/dist/feedback-sdk.js.map +1 -1
  3. package/dist/feedback-sdk.min.js +1 -1
  4. package/dist/feedback-sdk.min.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/core/FeedbackSDK.js +1 -1
  7. package/src/docs/api.md +104 -598
  8. package/src/docs/example.md +317 -681
  9. package/src/docs/installation.md +195 -187
  10. package/src/styles/styles.js +202 -201
  11. package/src/widgets/BaseWidget.js +127 -79
  12. package/src/widgets/ButtonWidget.js +2 -2
package/src/docs/installation.md CHANGED
@@ -1,264 +1,272 @@
1
- # Installation Guide
1
+ # Installation
2
2
 
3
- This guide covers all the ways to install and set up the Feedback Widget SDK in your project.
3
+ ## Package Installation
4
4
 
5
- ---
6
-
7
- ## 📦 Installation Methods
8
-
9
- ### 1. CDN (Recommended for Quick Setup)
5
+ ### NPM
10
6
 
11
- Load the SDK from our CDN:
7
+ ```bash
8
+ npm install @product7/feedback-sdk
9
+ ```
12
10
 
13
- ```html
14
- <!-- Latest version (not pinned, not recommended for production) -->
15
- <script src="https://cdn.jsdelivr.net/npm/@product7/feedback-sdk@1/dist/feedback-sdk.min.js"></script>
11
+ ### Yarn
16
12
 
17
- <!-- Specific version (recommended for production) -->
18
- <script src="https://cdn.jsdelivr.net/npm/@product7/feedback-sdk@1.0.0/dist/feedback-sdk.min.js"></script>
13
+ ```bash
14
+ yarn add @product7/feedback-sdk
19
15
  ```
20
16
 
21
- #### Basic Example
17
+ ### CDN
22
18
 
23
19
  ```html
24
- <!DOCTYPE html>
25
- <html>
26
- <head>
27
- <title>My App</title>
28
- </head>
29
- <body>
30
- <h1>Welcome to my app!</h1>
31
-
32
- <!-- Load the SDK -->
33
- <script src="https://cdn.jsdelivr.net/npm/@product7/feedback-sdk@1/dist/feedback-sdk.min.js"></script>
34
-
35
- <script>
36
- const feedback = new FeedbackSDK({
37
- workspace: 'your-workspace-name',
38
- boardId: 'your-board-id',
39
- });
40
-
41
- feedback.init().then(() => {
42
- const widget = feedback.createWidget('button');
43
- widget.mount();
44
- });
45
- </script>
46
- </body>
47
- </html>
20
+ <script src="https://cdn.product7.io/feedback-sdk/latest/feedback-sdk.js"></script>
48
21
  ```
49
22
 
50
23
  ---
51
24
 
52
- ### 2. NPM/Yarn
53
-
54
- For projects using a build system:
55
-
56
- ```bash
57
- # NPM
58
- npm install @product7/feedback-sdk
59
-
60
- # Yarn
61
- yarn add @product7/feedback-sdk
62
-
63
- # PNPM
64
- pnpm add @product7/feedback-sdk
65
- ```
66
-
67
- #### ES Modules
25
+ ## Quick Setup
68
26
 
69
- ```javascript
70
- import { FeedbackSDK } from '@product7/feedback-sdk';
71
-
72
- const feedback = new FeedbackSDK({ workspace: 'your-workspace' });
73
- await feedback.init();
74
- ```
75
-
76
- #### CommonJS
27
+ ### 1. Import and Initialize
77
28
 
78
29
  ```javascript
79
- const { FeedbackSDK } = require('@product7/feedback-sdk');
30
+ import FeedbackSDK from '@product7/feedback-sdk';
80
31
 
81
- const feedback = new FeedbackSDK({ workspace: 'your-workspace' });
82
- feedback.init().then(() => {
83
- // SDK ready
32
+ const sdk = new FeedbackSDK({
33
+ workspace: 'your-workspace',
34
+ userContext: {
35
+ user_id: 'user_123',
36
+ email: 'user@example.com',
37
+ name: 'John Doe'
38
+ }
84
39
  });
85
- ```
86
40
 
87
- ---
88
-
89
- ### 3. Direct Download
90
-
91
- Download from [GitHub Releases](https://github.com/product7/feedback-sdk/releases):
92
-
93
- ```html
94
- <script src="path/to/feedback-sdk.min.js"></script>
41
+ await sdk.init();
95
42
  ```
96
43
 
97
- ---
98
-
99
- ## 🔧 Build Tools Integration
100
-
101
- The SDK works out of the box with modern bundlers (Webpack, Rollup, Vite, Parcel):
44
+ ### 2. Create Widget
102
45
 
103
46
  ```javascript
104
- import { FeedbackSDK } from '@product7/feedback-sdk';
105
- // or
106
- const { FeedbackSDK } = require('@product7/feedback-sdk');
47
+ const widget = sdk.createWidget('button');
48
+ widget.mount();
107
49
  ```
108
50
 
109
51
  ---
110
52
 
111
- ## ⚙️ Configuration Setup
53
+ ## Installation Methods
112
54
 
113
- ### Basic
55
+ ### Method 1: NPM/ES Modules
114
56
 
115
57
  ```javascript
116
- const feedback = new FeedbackSDK({
117
- workspace: 'your-workspace', // Required
118
- boardId: 'your-board-id', // Optional
119
- theme: 'light',
120
- debug: false,
121
- });
122
- ```
58
+ import FeedbackSDK from '@product7/feedback-sdk';
123
59
 
124
- ### Advanced
60
+ const sdk = new FeedbackSDK({ /* config */ });
61
+ await sdk.init();
125
62
 
126
- ```javascript
127
- const feedback = new FeedbackSDK({
128
- workspace: 'your-workspace',
129
- apiKey: 'your-api-key',
130
- baseUrl: 'https://custom-api.com',
131
- theme: 'dark',
132
- position: 'bottom-left',
133
- language: 'en',
134
- debug: process.env.NODE_ENV === 'development',
135
- });
63
+ const widget = sdk.createWidget('button');
64
+ widget.mount();
136
65
  ```
137
66
 
138
- ### Environment Variables
67
+ ### Method 2: CDN with Auto-Init
139
68
 
140
- ```javascript
141
- const feedback = new FeedbackSDK({
142
- workspace: process.env.FEEDBACK_WORKSPACE,
143
- boardId: process.env.FEEDBACK_BOARD_ID,
144
- apiKey: process.env.FEEDBACK_API_KEY,
145
- debug: process.env.NODE_ENV === 'development',
146
- });
69
+ ```html
70
+ <script>
71
+ window.FeedbackSDKConfig = {
72
+ workspace: 'your-workspace',
73
+ userContext: {
74
+ user_id: 'user_123',
75
+ email: 'user@example.com'
76
+ }
77
+ };
78
+ </script>
79
+ <script src="https://cdn.product7.io/feedback-sdk/latest/feedback-sdk.js"></script>
80
+ <script>
81
+ // SDK auto-initializes and is available at window.FeedbackSDK
82
+ window.FeedbackSDK.onReady((sdk) => {
83
+ const widget = sdk.createWidget('button');
84
+ widget.mount();
85
+ });
86
+ </script>
147
87
  ```
148
88
 
149
- ---
150
-
151
- ## 🚀 Auto-Initialization
89
+ ### Method 3: Manual CDN
152
90
 
153
91
  ```html
92
+ <script src="https://cdn.product7.io/feedback-sdk/latest/feedback-sdk.js"></script>
154
93
  <script>
155
- window.FeedbackSDKConfig = {
94
+ const sdk = new window.FeedbackSDK({
156
95
  workspace: 'your-workspace',
157
- boardId: 'your-board-id',
158
- theme: 'light',
159
- autoCreate: {
160
- type: 'button',
161
- position: 'bottom-right',
162
- },
163
- // Or multiple:
164
- // autoCreate: [
165
- // { type: 'button', position: 'bottom-right' },
166
- // { type: 'inline', container: '#feedback-section' }
167
- // ]
168
- };
96
+ userContext: {
97
+ user_id: 'user_123',
98
+ email: 'user@example.com'
99
+ }
100
+ });
101
+
102
+ sdk.init().then(() => {
103
+ const widget = sdk.createWidget('button');
104
+ widget.mount();
105
+ });
169
106
  </script>
170
- <script src="https://cdn.jsdelivr.net/npm/@product7/feedback-sdk@1/dist/feedback-sdk.min.js"></script>
171
107
  ```
172
108
 
173
109
  ---
174
110
 
175
- ## 📋 Requirements
176
-
177
- **Browsers**
111
+ ## Framework Integration
178
112
 
179
- - Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
180
- - iOS Safari 12+, Android Chrome 60+
181
- - ES5 support required
182
- - No jQuery needed
113
+ ### React
183
114
 
184
- **API**
115
+ ```jsx
116
+ import { useEffect, useState } from 'react';
117
+ import FeedbackSDK from '@product7/feedback-sdk';
185
118
 
186
- - Valid Product7 workspace
187
- - Network access to your workspace API
188
- - API key optional (for authenticated requests)
119
+ function App() {
120
+ const [sdk, setSdk] = useState(null);
189
121
 
190
- ---
122
+ useEffect(() => {
123
+ const feedbackSDK = new FeedbackSDK({
124
+ workspace: 'your-workspace',
125
+ userContext: {
126
+ user_id: 'user_123',
127
+ email: 'user@example.com'
128
+ }
129
+ });
191
130
 
192
- ## 🔒 Content Security Policy (CSP)
131
+ feedbackSDK.init().then(() => {
132
+ setSdk(feedbackSDK);
133
+ const widget = feedbackSDK.createWidget('button');
134
+ widget.mount();
135
+ });
193
136
 
194
- The SDK is CSP-friendly (no `eval()`). Add directives:
137
+ return () => feedbackSDK.destroy();
138
+ }, []);
195
139
 
196
- ```
197
- script-src 'self' https://cdn.jsdelivr.net;
198
- connect-src 'self' https://*.api.staging.product7.io;
199
- style-src 'self' 'unsafe-inline';
140
+ return <div>Your App</div>;
141
+ }
200
142
  ```
201
143
 
202
- ---
144
+ ### Vue
203
145
 
204
- ## 🧪 Testing Your Installation
146
+ ```vue
147
+ <script setup>
148
+ import { onMounted, onUnmounted } from 'vue';
149
+ import FeedbackSDK from '@product7/feedback-sdk';
205
150
 
206
- ```html
207
- <script>
208
- const feedback = new FeedbackSDK({
209
- workspace: 'test-workspace',
210
- debug: true,
151
+ let sdk = null;
152
+
153
+ onMounted(async () => {
154
+ sdk = new FeedbackSDK({
155
+ workspace: 'your-workspace',
156
+ userContext: {
157
+ user_id: 'user_123',
158
+ email: 'user@example.com'
159
+ }
211
160
  });
212
161
 
213
- feedback
214
- .init()
215
- .then(() => {
216
- console.log('✅ SDK initialized');
217
- const widget = feedback.createWidget('button');
162
+ await sdk.init();
163
+ const widget = sdk.createWidget('button');
164
+ widget.mount();
165
+ });
166
+
167
+ onUnmounted(() => {
168
+ if (sdk) sdk.destroy();
169
+ });
170
+ </script>
171
+
172
+ <template>
173
+ <div>Your App</div>
174
+ </template>
175
+ ```
176
+
177
+ ### Next.js
178
+
179
+ ```javascript
180
+ // app/layout.js or pages/_app.js
181
+ 'use client';
182
+
183
+ import { useEffect } from 'react';
184
+ import FeedbackSDK from '@product7/feedback-sdk';
185
+
186
+ export default function RootLayout({ children }) {
187
+ useEffect(() => {
188
+ const sdk = new FeedbackSDK({
189
+ workspace: 'your-workspace',
190
+ userContext: {
191
+ user_id: 'user_123',
192
+ email: 'user@example.com'
193
+ }
194
+ });
195
+
196
+ sdk.init().then(() => {
197
+ const widget = sdk.createWidget('button');
218
198
  widget.mount();
219
- })
220
- .catch((error) => {
221
- console.error('❌ Initialization failed:', error);
222
199
  });
223
- </script>
200
+
201
+ return () => sdk.destroy();
202
+ }, []);
203
+
204
+ return <html><body>{children}</body></html>;
205
+ }
224
206
  ```
225
207
 
226
- Verify by:
208
+ ---
209
+
210
+ ## TypeScript Setup
211
+
212
+ The SDK includes TypeScript definitions out of the box.
227
213
 
228
- 1. Opening browser dev tools
229
- 2. Checking for initialization logs
230
- 3. Confirming widget renders
231
- 4. Clicking widget to open modal
214
+ ```typescript
215
+ import FeedbackSDK, { SDKConfig, ButtonWidget } from '@product7/feedback-sdk';
216
+
217
+ const config: SDKConfig = {
218
+ workspace: 'your-workspace',
219
+ userContext: {
220
+ user_id: 'user_123',
221
+ email: 'user@example.com',
222
+ name: 'John Doe'
223
+ },
224
+ theme: 'light'
225
+ };
226
+
227
+ const sdk = new FeedbackSDK(config);
228
+ await sdk.init();
229
+
230
+ const widget: ButtonWidget = sdk.createWidget('button');
231
+ widget.mount();
232
+ ```
232
233
 
233
234
  ---
234
235
 
235
- ## 🚨 Troubleshooting
236
+ ## Troubleshooting
236
237
 
237
- | Issue | Fix |
238
- | ------------------------ | -------------------------------------------------------------------- |
239
- | `SDK not defined` | Load script after DOM or wrap in `DOMContentLoaded` |
240
- | Workspace not found | Check workspace name spelling |
241
- | CSP Violations | Ensure directives match [CSP section](#-content-security-policy-csp) |
242
- | `Module not found` (NPM) | Clear npm cache and reinstall |
238
+ ### SDK not initializing
243
239
 
244
- Enable debug mode for detailed logs:
240
+ Check you have both `workspace` and `userContext` configured:
245
241
 
246
242
  ```javascript
247
- const feedback = new FeedbackSDK({ workspace: 'your-workspace', debug: true });
243
+ const sdk = new FeedbackSDK({
244
+ workspace: 'your-workspace', // Required
245
+ userContext: { // Required
246
+ user_id: 'user_123', // Required: user_id or email
247
+ email: 'user@example.com'
248
+ }
249
+ });
248
250
  ```
249
251
 
250
- If problems persist:
252
+ ### Widget not showing
251
253
 
252
- - Check browser console logs
253
- - Review the [FAQ](faq.md)
254
- - Search [GitHub Issues](https://github.com/product7/feedback-sdk/issues)
255
- - Open a [new issue](https://github.com/product7/feedback-sdk/issues/new) with steps to reproduce
254
+ Ensure you call both `init()` and `mount()`:
256
255
 
257
- ---
256
+ ```javascript
257
+ await sdk.init(); // Initialize first
258
+ const widget = sdk.createWidget('button');
259
+ widget.mount(); // Then mount
260
+ ```
261
+
262
+ ### CDN auto-init not working
258
263
 
259
- ## ⏭️ Next Steps
264
+ Check `window.FeedbackSDKConfig` is set before loading the script:
260
265
 
261
- - [Widget Types](widgets.md)
262
- - [Configuration](configuration.md)
263
- - [Theming](theming.md)
264
- - [Examples](examples.md)
266
+ ```html
267
+ <!-- Config MUST come before script tag -->
268
+ <script>
269
+ window.FeedbackSDKConfig = { /* config */ };
270
+ </script>
271
+ <script src="https://cdn.product7.io/feedback-sdk/latest/feedback-sdk.js"></script>
272
+ ```