@connorpham/live-chat-widget 17.0.0 → 17.0.2
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/.env.example +8 -8
- package/.eslintrc-staged.json +19 -19
- package/.prettierrc +4 -4
- package/README.md +83 -83
- package/dist/cellcast-bot-widget.es.js +614 -625
- package/dist/cellcast-bot-widget.umd.js +8 -9
- package/dist/index.d.ts +14 -12
- package/dist/style.css +1 -1
- package/package.json +70 -70
- package/tsconfig.build.json +24 -24
package/.env.example
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# API & Common
|
|
2
|
-
NODE_ENV=development
|
|
3
|
-
APP_DOMAIN=localhost
|
|
4
|
-
SSL_EMAIL=hello@hexabot.ai
|
|
5
|
-
API_PORT=3000
|
|
6
|
-
APP_FRONTEND_PORT=8080
|
|
7
|
-
APP_SCRIPT_COMPODOC_PORT=9003
|
|
8
|
-
|
|
1
|
+
# API & Common
|
|
2
|
+
NODE_ENV=development
|
|
3
|
+
APP_DOMAIN=localhost
|
|
4
|
+
SSL_EMAIL=hello@hexabot.ai
|
|
5
|
+
API_PORT=3000
|
|
6
|
+
APP_FRONTEND_PORT=8080
|
|
7
|
+
APP_SCRIPT_COMPODOC_PORT=9003
|
|
8
|
+
|
package/.eslintrc-staged.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "./.eslintrc.json",
|
|
3
|
-
"rules": {
|
|
4
|
-
"header/header": [
|
|
5
|
-
2,
|
|
6
|
-
"block",
|
|
7
|
-
[
|
|
8
|
-
"",
|
|
9
|
-
" * Copyright © 2025 Hexastack. All rights reserved.",
|
|
10
|
-
" *",
|
|
11
|
-
" * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:",
|
|
12
|
-
" * 1. The name \"Hexabot\" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.",
|
|
13
|
-
" * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's \"About\" section, documentation, and README file).",
|
|
14
|
-
" "
|
|
15
|
-
],
|
|
16
|
-
2
|
|
17
|
-
]
|
|
18
|
-
}
|
|
19
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"extends": "./.eslintrc.json",
|
|
3
|
+
"rules": {
|
|
4
|
+
"header/header": [
|
|
5
|
+
2,
|
|
6
|
+
"block",
|
|
7
|
+
[
|
|
8
|
+
"",
|
|
9
|
+
" * Copyright © 2025 Hexastack. All rights reserved.",
|
|
10
|
+
" *",
|
|
11
|
+
" * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:",
|
|
12
|
+
" * 1. The name \"Hexabot\" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.",
|
|
13
|
+
" * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's \"About\" section, documentation, and README file).",
|
|
14
|
+
" "
|
|
15
|
+
],
|
|
16
|
+
2
|
|
17
|
+
]
|
|
18
|
+
}
|
|
19
|
+
}
|
package/.prettierrc
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{
|
|
2
|
-
"singleQuote": false,
|
|
3
|
-
"trailingComma": "all"
|
|
4
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"singleQuote": false,
|
|
3
|
+
"trailingComma": "all"
|
|
4
|
+
}
|
package/README.md
CHANGED
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
## Run the Live Chat Widget
|
|
2
|
-
|
|
3
|
-
### Dev Mode
|
|
4
|
-
|
|
5
|
-
To run the widget in development mode, execute the following command at the project root level:
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm run dev:widget
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
The live chat widget will be accessible at http://localhost:5173.
|
|
12
|
-
|
|
13
|
-
### Build for Production
|
|
14
|
-
|
|
15
|
-
To build the widget for production, execute the following command at the widget folder level:
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm run build
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
This will generate a production-ready build in the dist folder.
|
|
22
|
-
|
|
23
|
-
## Embed Chat Widget
|
|
24
|
-
|
|
25
|
-
Once the widget is built, you can easily embed it into any webpage. Here's an example of how to add it to your website:
|
|
26
|
-
|
|
27
|
-
```js
|
|
28
|
-
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
|
|
29
|
-
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
|
|
30
|
-
<link rel="stylesheet" href="./style.css">
|
|
31
|
-
<script src="<<WIDGET URL>>/cellcast-bot-widget.umd.js"></script>
|
|
32
|
-
|
|
33
|
-
<div id="live-chat-widget"></div>
|
|
34
|
-
<script>
|
|
35
|
-
const el = React.createElement;
|
|
36
|
-
const domContainer = document.getElementById('live-chat-widget');
|
|
37
|
-
ReactDOM.render(
|
|
38
|
-
el(CellcastBotWidget.ChatWidget, {
|
|
39
|
-
apiUrl: 'https://api.yourdomain.com',
|
|
40
|
-
channel: 'web-channel',
|
|
41
|
-
ownerId: 'ownerId'
|
|
42
|
-
}),
|
|
43
|
-
domContainer,
|
|
44
|
-
);
|
|
45
|
-
</script>
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
Replace the values in apiUrl and token with your configuration details.
|
|
49
|
-
|
|
50
|
-
To prevent the website css from conflicting with the chat widget css, we can leverage the shadow dom:
|
|
51
|
-
|
|
52
|
-
```js
|
|
53
|
-
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
|
|
54
|
-
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
|
|
55
|
-
<script src="<<WIDGET URL>>/cellcast-bot-widget.umd.js"></script>
|
|
56
|
-
|
|
57
|
-
<div id="live-chat-widget"></div>
|
|
58
|
-
<script>
|
|
59
|
-
// Create the shadow root and attach it to the widget container
|
|
60
|
-
const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
|
|
61
|
-
const shadowContainer = createElement("div");
|
|
62
|
-
document
|
|
63
|
-
.getElementById('live-chat-widget')
|
|
64
|
-
.attachShadow({ mode: 'open' })
|
|
65
|
-
.append(
|
|
66
|
-
shadowContainer,
|
|
67
|
-
createElement("link", {
|
|
68
|
-
rel: "stylesheet",
|
|
69
|
-
href: "<<WIDGET URL>>/style.css"
|
|
70
|
-
});
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
// Render the widget inside the shadow root
|
|
74
|
-
ReactDOM.render(
|
|
75
|
-
React.createElement(CellcastBotWidget.ChatWidget, {
|
|
76
|
-
apiUrl: 'https://api.yourdomain.com',
|
|
77
|
-
channel: 'web-channel',
|
|
78
|
-
ownerId: 'ownerId',
|
|
79
|
-
}),
|
|
80
|
-
shadowContainer,
|
|
81
|
-
);
|
|
82
|
-
</script>
|
|
83
|
-
```
|
|
1
|
+
## Run the Live Chat Widget
|
|
2
|
+
|
|
3
|
+
### Dev Mode
|
|
4
|
+
|
|
5
|
+
To run the widget in development mode, execute the following command at the project root level:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm run dev:widget
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
The live chat widget will be accessible at http://localhost:5173.
|
|
12
|
+
|
|
13
|
+
### Build for Production
|
|
14
|
+
|
|
15
|
+
To build the widget for production, execute the following command at the widget folder level:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm run build
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
This will generate a production-ready build in the dist folder.
|
|
22
|
+
|
|
23
|
+
## Embed Chat Widget
|
|
24
|
+
|
|
25
|
+
Once the widget is built, you can easily embed it into any webpage. Here's an example of how to add it to your website:
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
|
|
29
|
+
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
|
|
30
|
+
<link rel="stylesheet" href="./style.css">
|
|
31
|
+
<script src="<<WIDGET URL>>/cellcast-bot-widget.umd.js"></script>
|
|
32
|
+
|
|
33
|
+
<div id="live-chat-widget"></div>
|
|
34
|
+
<script>
|
|
35
|
+
const el = React.createElement;
|
|
36
|
+
const domContainer = document.getElementById('live-chat-widget');
|
|
37
|
+
ReactDOM.render(
|
|
38
|
+
el(CellcastBotWidget.ChatWidget, {
|
|
39
|
+
apiUrl: 'https://api.yourdomain.com',
|
|
40
|
+
channel: 'web-channel',
|
|
41
|
+
ownerId: 'ownerId'
|
|
42
|
+
}),
|
|
43
|
+
domContainer,
|
|
44
|
+
);
|
|
45
|
+
</script>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Replace the values in apiUrl and token with your configuration details.
|
|
49
|
+
|
|
50
|
+
To prevent the website css from conflicting with the chat widget css, we can leverage the shadow dom:
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
|
|
54
|
+
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
|
|
55
|
+
<script src="<<WIDGET URL>>/cellcast-bot-widget.umd.js"></script>
|
|
56
|
+
|
|
57
|
+
<div id="live-chat-widget"></div>
|
|
58
|
+
<script>
|
|
59
|
+
// Create the shadow root and attach it to the widget container
|
|
60
|
+
const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
|
|
61
|
+
const shadowContainer = createElement("div");
|
|
62
|
+
document
|
|
63
|
+
.getElementById('live-chat-widget')
|
|
64
|
+
.attachShadow({ mode: 'open' })
|
|
65
|
+
.append(
|
|
66
|
+
shadowContainer,
|
|
67
|
+
createElement("link", {
|
|
68
|
+
rel: "stylesheet",
|
|
69
|
+
href: "<<WIDGET URL>>/style.css"
|
|
70
|
+
});
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
// Render the widget inside the shadow root
|
|
74
|
+
ReactDOM.render(
|
|
75
|
+
React.createElement(CellcastBotWidget.ChatWidget, {
|
|
76
|
+
apiUrl: 'https://api.yourdomain.com',
|
|
77
|
+
channel: 'web-channel',
|
|
78
|
+
ownerId: 'ownerId',
|
|
79
|
+
}),
|
|
80
|
+
shadowContainer,
|
|
81
|
+
);
|
|
82
|
+
</script>
|
|
83
|
+
```
|