@2uinc/frontend-component-xpert-chatbot 1.2.0-beta.2 → 1.2.0-beta.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 (3) hide show
  1. package/README.md +68 -14
  2. package/dist/lib/index.min.js +2028 -1973
  3. package/package.json +10 -2
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,17 +35,22 @@ 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`):
36
- 1. Install dependencies:
38
+
39
+ 1. Switch the the correct version of node (install nvm if necessary):
40
+ ```
41
+ nvm use
42
+ ```
43
+ 2. Install dependencies:
37
44
  ```
38
45
  npm i
39
46
  ```
40
- 2. Start app:
47
+ 3. Start app:
41
48
  ```
42
49
  npm start
43
50
  ```
44
- 3. Go to `http://localhost:5173/`
45
- 4. Verify all chatbot ux and functionality work as expected since changes can affect them all
46
- 5. Write automated tests to avoid too much manual verification and to make sure existing functionality isn't broken.
51
+ 4. Go to `http://localhost:5173/`
52
+ 5. Verify all chatbot ux and functionality work as expected since changes can affect them all
53
+ 6. Write automated tests to avoid too much manual verification and to make sure existing functionality isn't broken.
47
54
 
48
55
  `
49
56
  <add picture here>
@@ -51,13 +58,14 @@ npm start
51
58
  `
52
59
 
53
60
  ## To verify components within `/dist` folder via script tag:
61
+
54
62
  1. Install serve
55
63
  ```
56
64
  npm i -g serve
57
65
  ```
58
- 2. Serve `/dist` folder
66
+ 2. Build && Serve `/dist` folder
59
67
  ```
60
- serve -s dist
68
+ npm run build && serve -s dist
61
69
  ```
62
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`.
63
71
  4. Go to `http://localhost:3000/` and verify chatbot works as expected.
@@ -84,6 +92,7 @@ npm test
84
92
  ```
85
93
 
86
94
  ## Deployment
95
+
87
96
  We deploy an NPM package to npmjs.org with the name `@2uinc/frontend-component-xpert-chatbot`
88
97
  To install the package, run the following command:
89
98
 
@@ -91,10 +100,21 @@ To install the package, run the following command:
91
100
  $ npm install @2uinc/frontend-component-xpert-chatbot
92
101
  ```
93
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
+
94
109
  For clients that don't have React, there's the option to pull the resources from CDN.
110
+
111
+ ### CDN
112
+
113
+ A CDN deployment occurs after the NPM deployment for clients that don't have React. See `publishCmd` in package.json.
114
+
95
115
  ```
96
116
  <head>
97
- <link rel="stylesheet href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.css.js" />
117
+ <link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
98
118
 
99
119
  <script type="importmap">
100
120
  {
@@ -106,16 +126,50 @@ For clients that don't have React, there's the option to pull the resources from
106
126
  </script>
107
127
  </head>
108
128
  <body>
109
- <div id="xpert-chatbot-container"></div>
110
- ...
111
129
  <script type="module" defer src="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js"></script>
112
130
  </body>
113
131
  ```
114
132
 
115
- ##### NOTE:
116
- Make sure you have a div with the ID `xpert-chatbot-container` for React to render into.
133
+ For environments that don't support script type "importmap" (ie Google Tag Manager), manual creation of the script tag will be required:
134
+
135
+ ```
136
+ <script>
137
+ var scriptElement = document.createElement('script');
138
+ scriptElement.type = "importmap";
139
+ var importMap = {
140
+ "imports": {
141
+ "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/+esm",
142
+ "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/+esm"
143
+ }
144
+ };
145
+ var importMapString = JSON.stringify(importMap);
146
+ var importMapElement = document.createTextNode(importMapString);
147
+ scriptElement.appendChild(importMapElement);
148
+ document.head.appendChild(scriptElement);
149
+ </script>
150
+
151
+ <link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
152
+
153
+ <script>
154
+ var scriptElement = document.createElement('script');
155
+ scriptElement.setAttribute('type', "module");
156
+ scriptElement.setAttribute('src', "https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js");
157
+ document.body.appendChild(scriptElement);
158
+ </script>
159
+ ```
117
160
 
118
161
  ## Beta releases
119
- To create a beta release, 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 `@2uinc/frontend-component-xpert-chatbot@beta${beta-version}`.
120
- A CDN release will also be created and published to `https://chatbot-frontend.beta.ai.2u.com/beta${beta-version}/index.min.js` and `https://chatbot-frontend.beta.ai.2u.com/beta${beta-version}/index.css.js`.
162
+
163
+ 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:
164
+
165
+ ```
166
+ @2uinc/frontend-component-xpert-chatbot@v{tag-name}
167
+ ```
168
+
169
+ A CDN release will also be created and published to:
170
+
171
+ ```
172
+ https://chatbot-frontend.prod.ai.2u.com/@{tag-name}/index.min.js
173
+ https://chatbot-frontend.prod.ai.2u.com/@{tag-name}/index.min.css
174
+ ```
121
175