@product7/product7-js 0.1.0
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 +1025 -0
- package/dist/README.md +1025 -0
- package/dist/product7-js.js +14658 -0
- package/dist/product7-js.js.map +1 -0
- package/dist/product7-js.min.js +2 -0
- package/dist/product7-js.min.js.map +1 -0
- package/package.json +114 -0
- package/src/api/mock-data/index.js +360 -0
- package/src/api/services/ChangelogService.js +28 -0
- package/src/api/services/FeedbackService.js +44 -0
- package/src/api/services/HelpService.js +50 -0
- package/src/api/services/MessengerService.js +279 -0
- package/src/api/services/SurveyService.js +127 -0
- package/src/api/utils/helpers.js +30 -0
- package/src/core/APIService.js +303 -0
- package/src/core/BaseAPIService.js +298 -0
- package/src/core/EventBus.js +54 -0
- package/src/core/Product7.js +812 -0
- package/src/core/WebSocketService.js +275 -0
- package/src/docs/api.md +226 -0
- package/src/docs/example.md +461 -0
- package/src/docs/framework-integrations.md +714 -0
- package/src/docs/installation.md +281 -0
- package/src/index.js +894 -0
- package/src/styles/base.js +50 -0
- package/src/styles/changelog.js +665 -0
- package/src/styles/components.js +553 -0
- package/src/styles/design-tokens.js +124 -0
- package/src/styles/feedback.js +325 -0
- package/src/styles/messenger-components.js +632 -0
- package/src/styles/messenger-core.js +233 -0
- package/src/styles/messenger-features.js +169 -0
- package/src/styles/messenger-views.js +877 -0
- package/src/styles/messenger.js +17 -0
- package/src/styles/messengerCustomStyles.js +114 -0
- package/src/styles/styles.js +26 -0
- package/src/styles/survey.js +894 -0
- package/src/utils/errors.js +142 -0
- package/src/utils/helpers.js +219 -0
- package/src/widgets/BaseWidget.js +548 -0
- package/src/widgets/ButtonWidget.js +104 -0
- package/src/widgets/ChangelogWidget.js +615 -0
- package/src/widgets/InlineWidget.js +148 -0
- package/src/widgets/MessengerWidget.js +979 -0
- package/src/widgets/SurveyWidget.js +1325 -0
- package/src/widgets/TabWidget.js +45 -0
- package/src/widgets/WidgetFactory.js +70 -0
- package/src/widgets/messenger/MessengerState.js +323 -0
- package/src/widgets/messenger/components/MessengerLauncher.js +124 -0
- package/src/widgets/messenger/components/MessengerPanel.js +111 -0
- package/src/widgets/messenger/components/NavigationTabs.js +130 -0
- package/src/widgets/messenger/views/ChangelogView.js +167 -0
- package/src/widgets/messenger/views/ChatView.js +592 -0
- package/src/widgets/messenger/views/ConversationsView.js +244 -0
- package/src/widgets/messenger/views/HelpView.js +239 -0
- package/src/widgets/messenger/views/HomeView.js +300 -0
- package/src/widgets/messenger/views/PreChatFormView.js +109 -0
- package/types/index.d.ts +341 -0
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
# Installation
|
|
2
|
+
|
|
3
|
+
## Package Installation
|
|
4
|
+
|
|
5
|
+
### NPM
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @product7/product7-js
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### Yarn
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @product7/product7-js
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### CDN
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<script src="https://cdn.product7.io/product7-js/latest/product7-js.js"></script>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Quick Setup
|
|
26
|
+
|
|
27
|
+
### 1. Import and Initialize
|
|
28
|
+
|
|
29
|
+
```javascript
|
|
30
|
+
import Product7 from '@product7/product7-js';
|
|
31
|
+
|
|
32
|
+
const sdk = new Product7({
|
|
33
|
+
workspace: 'your-workspace',
|
|
34
|
+
metadata: {
|
|
35
|
+
user_id: 'user_123',
|
|
36
|
+
email: 'user@example.com',
|
|
37
|
+
name: 'John Doe',
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
await sdk.init();
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 2. Create Widget
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
const widget = sdk.createWidget('button');
|
|
48
|
+
widget.mount();
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Installation Methods
|
|
54
|
+
|
|
55
|
+
### Method 1: NPM/ES Modules
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
import Product7 from '@product7/product7-js';
|
|
59
|
+
|
|
60
|
+
const sdk = new Product7({
|
|
61
|
+
/* config */
|
|
62
|
+
});
|
|
63
|
+
await sdk.init();
|
|
64
|
+
|
|
65
|
+
const widget = sdk.createWidget('button');
|
|
66
|
+
widget.mount();
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Method 2: CDN with Auto-Init
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<script>
|
|
73
|
+
window.Product7Config = {
|
|
74
|
+
workspace: 'your-workspace',
|
|
75
|
+
metadata: {
|
|
76
|
+
user_id: 'user_123',
|
|
77
|
+
email: 'user@example.com',
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
</script>
|
|
81
|
+
<script src="https://cdn.product7.io/product7-js/latest/product7-js.js"></script>
|
|
82
|
+
<script>
|
|
83
|
+
// SDK auto-initializes and is available at window.Product7
|
|
84
|
+
window.Product7.onReady((sdk) => {
|
|
85
|
+
const widget = sdk.createWidget('button');
|
|
86
|
+
widget.mount();
|
|
87
|
+
});
|
|
88
|
+
</script>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Method 3: Manual CDN
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<script src="https://cdn.product7.io/product7-js/latest/product7-js.js"></script>
|
|
95
|
+
<script>
|
|
96
|
+
const sdk = new window.Product7({
|
|
97
|
+
workspace: 'your-workspace',
|
|
98
|
+
metadata: {
|
|
99
|
+
user_id: 'user_123',
|
|
100
|
+
email: 'user@example.com',
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
sdk.init().then(() => {
|
|
105
|
+
const widget = sdk.createWidget('button');
|
|
106
|
+
widget.mount();
|
|
107
|
+
});
|
|
108
|
+
</script>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Framework Integration
|
|
114
|
+
|
|
115
|
+
### React
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
import { useEffect, useState } from 'react';
|
|
119
|
+
import Product7 from '@product7/product7-js';
|
|
120
|
+
|
|
121
|
+
function App() {
|
|
122
|
+
const [sdk, setSdk] = useState(null);
|
|
123
|
+
|
|
124
|
+
useEffect(() => {
|
|
125
|
+
const product7 = new Product7({
|
|
126
|
+
workspace: 'your-workspace',
|
|
127
|
+
metadata: {
|
|
128
|
+
user_id: 'user_123',
|
|
129
|
+
email: 'user@example.com',
|
|
130
|
+
},
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
product7.init().then(() => {
|
|
134
|
+
setSdk(product7);
|
|
135
|
+
const widget = product7.createWidget('button');
|
|
136
|
+
widget.mount();
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
return () => product7.destroy();
|
|
140
|
+
}, []);
|
|
141
|
+
|
|
142
|
+
return <div>Your App</div>;
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Vue
|
|
147
|
+
|
|
148
|
+
```vue
|
|
149
|
+
<script setup>
|
|
150
|
+
import { onMounted, onUnmounted } from 'vue';
|
|
151
|
+
import Product7 from '@product7/product7-js';
|
|
152
|
+
|
|
153
|
+
let sdk = null;
|
|
154
|
+
|
|
155
|
+
onMounted(async () => {
|
|
156
|
+
sdk = new Product7({
|
|
157
|
+
workspace: 'your-workspace',
|
|
158
|
+
metadata: {
|
|
159
|
+
user_id: 'user_123',
|
|
160
|
+
email: 'user@example.com',
|
|
161
|
+
},
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
await sdk.init();
|
|
165
|
+
const widget = sdk.createWidget('button');
|
|
166
|
+
widget.mount();
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
onUnmounted(() => {
|
|
170
|
+
if (sdk) sdk.destroy();
|
|
171
|
+
});
|
|
172
|
+
</script>
|
|
173
|
+
|
|
174
|
+
<template>
|
|
175
|
+
<div>Your App</div>
|
|
176
|
+
</template>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Next.js
|
|
180
|
+
|
|
181
|
+
```javascript
|
|
182
|
+
// app/layout.js or pages/_app.js
|
|
183
|
+
'use client';
|
|
184
|
+
|
|
185
|
+
import { useEffect } from 'react';
|
|
186
|
+
import Product7 from '@product7/product7-js';
|
|
187
|
+
|
|
188
|
+
export default function RootLayout({ children }) {
|
|
189
|
+
useEffect(() => {
|
|
190
|
+
const sdk = new Product7({
|
|
191
|
+
workspace: 'your-workspace',
|
|
192
|
+
metadata: {
|
|
193
|
+
user_id: 'user_123',
|
|
194
|
+
email: 'user@example.com',
|
|
195
|
+
},
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
sdk.init().then(() => {
|
|
199
|
+
const widget = sdk.createWidget('button');
|
|
200
|
+
widget.mount();
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
return () => sdk.destroy();
|
|
204
|
+
}, []);
|
|
205
|
+
|
|
206
|
+
return (
|
|
207
|
+
<html>
|
|
208
|
+
<body>{children}</body>
|
|
209
|
+
</html>
|
|
210
|
+
);
|
|
211
|
+
}
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
## TypeScript Setup
|
|
217
|
+
|
|
218
|
+
The SDK includes TypeScript definitions out of the box.
|
|
219
|
+
|
|
220
|
+
```typescript
|
|
221
|
+
import Product7, { SDKConfig, ButtonWidget } from '@product7/product7-js';
|
|
222
|
+
|
|
223
|
+
const config: SDKConfig = {
|
|
224
|
+
workspace: 'your-workspace',
|
|
225
|
+
metadata: {
|
|
226
|
+
user_id: 'user_123',
|
|
227
|
+
email: 'user@example.com',
|
|
228
|
+
name: 'John Doe',
|
|
229
|
+
},
|
|
230
|
+
theme: 'light',
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
const sdk = new Product7(config);
|
|
234
|
+
await sdk.init();
|
|
235
|
+
|
|
236
|
+
const widget: ButtonWidget = sdk.createWidget('button');
|
|
237
|
+
widget.mount();
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## Troubleshooting
|
|
243
|
+
|
|
244
|
+
### SDK not initializing
|
|
245
|
+
|
|
246
|
+
Check you have both `workspace` and `metadata` configured:
|
|
247
|
+
|
|
248
|
+
```javascript
|
|
249
|
+
const sdk = new Product7({
|
|
250
|
+
workspace: 'your-workspace', // Required
|
|
251
|
+
metadata: {
|
|
252
|
+
// Required
|
|
253
|
+
user_id: 'user_123', // Required: user_id or email
|
|
254
|
+
email: 'user@example.com',
|
|
255
|
+
},
|
|
256
|
+
});
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
### Widget not showing
|
|
260
|
+
|
|
261
|
+
Ensure you call both `init()` and `mount()`:
|
|
262
|
+
|
|
263
|
+
```javascript
|
|
264
|
+
await sdk.init(); // Initialize first
|
|
265
|
+
const widget = sdk.createWidget('button');
|
|
266
|
+
widget.mount(); // Then mount
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### CDN auto-init not working
|
|
270
|
+
|
|
271
|
+
Check `window.Product7Config` is set before loading the script:
|
|
272
|
+
|
|
273
|
+
```html
|
|
274
|
+
<!-- Config MUST come before script tag -->
|
|
275
|
+
<script>
|
|
276
|
+
window.Product7Config = {
|
|
277
|
+
/* config */
|
|
278
|
+
};
|
|
279
|
+
</script>
|
|
280
|
+
<script src="https://cdn.product7.io/product7-js/latest/product7-js.js"></script>
|
|
281
|
+
```
|