@2uinc/frontend-component-xpert-chatbot 1.2.0-beta.8 → 1.2.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 CHANGED
@@ -14,11 +14,9 @@ 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
-
18
17
  See `src/client_configurations` folder
19
18
 
20
19
  ## Features included
21
-
22
20
  - Configurable ux, logos, disclaimer, privacy policy, prompts and chat api endpoint
23
21
  - Chatbot launch button
24
22
  - Proactive message to enage visitors
@@ -35,7 +33,6 @@ This project was created with the following:
35
33
  See `package.json` for more info.
36
34
 
37
35
  ## To view component library demo and develop (entry point `src/demo.jsx`):
38
-
39
36
  1. Switch the the correct version of node (install nvm if necessary):
40
37
  ```
41
38
  nvm use
@@ -58,14 +55,13 @@ npm start
58
55
  `
59
56
 
60
57
  ## To verify components within `/dist` folder via script tag:
61
-
62
58
  1. Install serve
63
59
  ```
64
60
  npm i -g serve
65
61
  ```
66
- 2. Build && Serve `/dist` folder
62
+ 2. Serve `/dist` folder
67
63
  ```
68
- npm run build && serve -s dist
64
+ serve -s dist
69
65
  ```
70
66
  3. Configure chatbot by providing `window.XpertChatbotFrontend.xpertKey` or `window.XpertChatbotFrontend.configurations` within `dist/index.html`. Client configurations are located in `src/client_configurations`.
71
67
  4. Go to `http://localhost:3000/` and verify chatbot works as expected.
@@ -92,7 +88,6 @@ npm test
92
88
  ```
93
89
 
94
90
  ## Deployment
95
-
96
91
  We deploy an NPM package to npmjs.org with the name `@2uinc/frontend-component-xpert-chatbot`
97
92
  To install the package, run the following command:
98
93
 
@@ -100,21 +95,13 @@ To install the package, run the following command:
100
95
  $ npm install @2uinc/frontend-component-xpert-chatbot
101
96
  ```
102
97
 
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
-
111
98
  ### CDN
112
99
 
113
100
  A CDN deployment occurs after the NPM deployment for clients that don't have React. See `publishCmd` in package.json.
114
101
 
115
102
  ```
116
103
  <head>
117
- <link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
104
+ <link rel="stylesheet href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.css.js" />
118
105
 
119
106
  <script type="importmap">
120
107
  {
@@ -126,50 +113,16 @@ A CDN deployment occurs after the NPM deployment for clients that don't have Rea
126
113
  </script>
127
114
  </head>
128
115
  <body>
116
+ <div id="xpert-chatbot-container"></div>
117
+ ...
129
118
  <script type="module" defer src="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js"></script>
130
119
  </body>
131
120
  ```
132
121
 
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
- ```
122
+ ##### NOTE:
123
+ Make sure you have a div with the ID `xpert-chatbot-container` for React to render into.
160
124
 
161
125
  ## Beta releases
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
- ```
126
+ 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}`.
127
+ 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`.
175
128