@2uinc/frontend-component-xpert-chatbot 1.2.2 → 1.3.0-alpha.1
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 +58 -17
- package/dist/lib/index.min.js +3175 -2912
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,9 +14,11 @@ The Xpert Chatbot Frontend component library purpose is to:
|
|
|
14
14
|
See `#project-xpert-platform` via Slack for more info.
|
|
15
15
|
|
|
16
16
|
## Places it's currently deployed
|
|
17
|
+
|
|
17
18
|
See `src/client_configurations` folder
|
|
18
19
|
|
|
19
20
|
## Features included
|
|
21
|
+
|
|
20
22
|
- Configurable ux, logos, disclaimer, privacy policy, prompts and chat api endpoint
|
|
21
23
|
- Chatbot launch button
|
|
22
24
|
- Proactive message to enage visitors
|
|
@@ -33,6 +35,7 @@ This project was created with the following:
|
|
|
33
35
|
See `package.json` for more info.
|
|
34
36
|
|
|
35
37
|
## To view component library demo and develop (entry point `src/demo.jsx`):
|
|
38
|
+
|
|
36
39
|
1. Switch the the correct version of node (install nvm if necessary):
|
|
37
40
|
```
|
|
38
41
|
nvm use
|
|
@@ -55,13 +58,14 @@ npm start
|
|
|
55
58
|
`
|
|
56
59
|
|
|
57
60
|
## To verify components within `/dist` folder via script tag:
|
|
61
|
+
|
|
58
62
|
1. Install serve
|
|
59
63
|
```
|
|
60
64
|
npm i -g serve
|
|
61
65
|
```
|
|
62
|
-
2. Serve `/dist` folder
|
|
66
|
+
2. Build && Serve `/dist` folder
|
|
63
67
|
```
|
|
64
|
-
serve -s dist
|
|
68
|
+
npm run build && serve -s dist
|
|
65
69
|
```
|
|
66
70
|
3. Configure chatbot by providing `window.XpertChatbotFrontend.xpertKey` or `window.XpertChatbotFrontend.configurations` within `dist/index.html`. Client configurations are located in `src/client_configurations`.
|
|
67
71
|
4. Go to `http://localhost:3000/` and verify chatbot works as expected.
|
|
@@ -88,6 +92,7 @@ npm test
|
|
|
88
92
|
```
|
|
89
93
|
|
|
90
94
|
## Deployment
|
|
95
|
+
|
|
91
96
|
We deploy an NPM package to npmjs.org with the name `@2uinc/frontend-component-xpert-chatbot`
|
|
92
97
|
To install the package, run the following command:
|
|
93
98
|
|
|
@@ -95,34 +100,70 @@ To install the package, run the following command:
|
|
|
95
100
|
$ npm install @2uinc/frontend-component-xpert-chatbot
|
|
96
101
|
```
|
|
97
102
|
|
|
103
|
+
Also add to page head element:
|
|
104
|
+
|
|
105
|
+
```
|
|
106
|
+
<link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
For clients that don't have React, there's the option to pull the resources from CDN.
|
|
110
|
+
|
|
98
111
|
### CDN
|
|
99
112
|
|
|
100
113
|
A CDN deployment occurs after the NPM deployment for clients that don't have React. See `publishCmd` in package.json.
|
|
101
114
|
|
|
102
115
|
```
|
|
103
116
|
<head>
|
|
104
|
-
<link rel="stylesheet href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.css
|
|
105
|
-
|
|
106
|
-
<script type="importmap">
|
|
107
|
-
{
|
|
108
|
-
"imports": {
|
|
109
|
-
"react": "https://cdn.jsdelivr.net/npm/react@17.0.2/+esm",
|
|
110
|
-
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/+esm"
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
</script>
|
|
117
|
+
<link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
|
|
118
|
+
|
|
114
119
|
</head>
|
|
115
120
|
<body>
|
|
116
121
|
<div id="xpert-chatbot-container"></div>
|
|
117
122
|
...
|
|
118
|
-
<script
|
|
123
|
+
<script defer src="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js"></script>
|
|
119
124
|
</body>
|
|
120
125
|
```
|
|
121
126
|
|
|
122
|
-
|
|
123
|
-
|
|
127
|
+
For environments that don't support script type "importmap" (ie Google Tag Manager), manual creation of the script tag will be required:
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
<script>
|
|
131
|
+
var scriptElement = document.createElement('script');
|
|
132
|
+
scriptElement.type = "importmap";
|
|
133
|
+
var importMap = {
|
|
134
|
+
"imports": {
|
|
135
|
+
"react": "https://cdn.jsdelivr.net/npm/react@17.0.2/+esm",
|
|
136
|
+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/+esm"
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
var importMapString = JSON.stringify(importMap);
|
|
140
|
+
var importMapElement = document.createTextNode(importMapString);
|
|
141
|
+
scriptElement.appendChild(importMapElement);
|
|
142
|
+
document.head.appendChild(scriptElement);
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
|
|
146
|
+
|
|
147
|
+
<script>
|
|
148
|
+
var scriptElement = document.createElement('script');
|
|
149
|
+
scriptElement.setAttribute('type', "module");
|
|
150
|
+
scriptElement.setAttribute('src', "https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js");
|
|
151
|
+
document.body.appendChild(scriptElement);
|
|
152
|
+
</script>
|
|
153
|
+
```
|
|
124
154
|
|
|
125
155
|
## Beta releases
|
|
126
|
-
|
|
127
|
-
|
|
156
|
+
|
|
157
|
+
To create a beta release for testing, make a PR to the `beta` branch. Once the PR is merged, a new beta release will be created and published to npmjs.org with the name:
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
@2uinc/frontend-component-xpert-chatbot@v{tag-name}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
A CDN release will also be created and published to:
|
|
164
|
+
|
|
165
|
+
```
|
|
166
|
+
https://chatbot-frontend.prod.ai.2u.com/@{tag-name}/index.min.js
|
|
167
|
+
https://chatbot-frontend.prod.ai.2u.com/@{tag-name}/index.min.css
|
|
168
|
+
```
|
|
128
169
|
|