@mxenabled/connect-widget 0.0.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 +77 -0
- package/dist/index.es.js +53359 -0
- package/dist/index.es.js.map +1 -0
- package/package.json +105 -0
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# Connect Widget
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
This is the **UI only** for the connect widget. Heavy configuration and an API are needed for this project to work. See [usage](#usage) and [props](#props) for more details.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Install using npm package manager:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install connect-widget
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
1. Install package: `npm install --save connect-widget`
|
|
18
|
+
2. Import `ApiProvider` and `ConnectWidget`. Add both to your project.
|
|
19
|
+
3. Pass applicable props to widget and your API to the provider.
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import ConnectWidget, { ApiProvider } from 'connect-widget'
|
|
23
|
+
import apiService from './apiService' // You custom api service
|
|
24
|
+
|
|
25
|
+
const App = () => {
|
|
26
|
+
return (
|
|
27
|
+
<ApiProvider apiValue={apiService}>
|
|
28
|
+
<ConnectWidget {...props} />
|
|
29
|
+
{/* See props details below */}
|
|
30
|
+
</ApiProvider>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Props
|
|
36
|
+
|
|
37
|
+
| **Prop** | **Type** | **Description** | **Default** |
|
|
38
|
+
| :------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- |
|
|
39
|
+
| `clientConfig` | [`ClientConfigType`](./typings/connectProps.d.ts) | The connect widget uses the config to set the initial state and behavior of the widget. [More details](./docs/CLIENT_CONFIG.md) | See more details |
|
|
40
|
+
| `language` | [`LanguageType`](./typings/connectProps.d.ts) | The connect widget supports multiple languages and custom copy. Supported locale options: `en`, `es`, and `fr-ca`. | `{ locale: 'en', custom_copy_namespace: '' }` |
|
|
41
|
+
| `onAnalyticEvent` | [`AnalyticContextType`](./typings/connectProps.d.ts) | The connect widget provides a way to track events and pageviews using your own analytics provider. [More details](./docs/ANALYTICS.md#onanalyticevent) | `null` |
|
|
42
|
+
| `onAnalyticPageview` | [`AnalyticContextType`](./typings/connectProps.d.ts) | The connect widget provides a way to track events and pageviews using your own analytics provider. [More details](./docs/ANALYTICS.md#onanalyticpageview) | `null` |
|
|
43
|
+
| `onPostMessage` | [`PostMessageContextType`](./typings/connectProps.d.ts) | The connect widget uses post messages to communicate with the parent window. [More details](./docs/POST_MESSAGES.md) | `null` |
|
|
44
|
+
| `profiles` | [`ProfilesTypes`](./typings/connectProps.d.ts) | The connect widget uses the profiles to set the initial state of the widget. [More details](./docs/PROFILES.md) | See more details |
|
|
45
|
+
| `userFeatures` | [`UserFeaturesType`](./typings/connectProps.d.ts) | The connect widget uses user features to determine the behavior of the widget. [More details](./docs/USER_FEATURES.md) | See more details |
|
|
46
|
+
| `showTooSmallDialog` | `boolean` | The connect widget can show a warning when the widget size is below the supported 320px. | `true` |
|
|
47
|
+
|
|
48
|
+
## ApiProvider
|
|
49
|
+
|
|
50
|
+
You need to pass an object containing API endpoint callbacks as the `apiValue` prop of the ApiProvider as described in the [usage](#usage) section for the widget to work. [Here](./docs/APIDOCUMENTATION.md) is a more detailed list of the API endpoint callbacks.
|
|
51
|
+
|
|
52
|
+
## Developing
|
|
53
|
+
|
|
54
|
+
1. Clone project
|
|
55
|
+
2. Install `Node(with npm)`. See [package.json](/package.json) for current required versions
|
|
56
|
+
3. Run `npm i`
|
|
57
|
+
4. Make your code changes
|
|
58
|
+
5. Run `npm run build` to build the project
|
|
59
|
+
6. [Link Project](#linking-for-development)
|
|
60
|
+
7. Test your changes
|
|
61
|
+
8. Update change log, translations, and documentation as needed
|
|
62
|
+
9. Open Pull Request
|
|
63
|
+
|
|
64
|
+
## Linking for Development
|
|
65
|
+
|
|
66
|
+
For developing this package locally, we suggest you use npm link to connect your local version of the package to your client app using the package.
|
|
67
|
+
|
|
68
|
+
1. In the npm package root, run `npm link`.
|
|
69
|
+
2. Then in your consumer project, run `npm link connect-widget`.
|
|
70
|
+
|
|
71
|
+
This will link the local package to your project in the node modules. Unlink the package when you are finished or if you run into issues.
|
|
72
|
+
|
|
73
|
+
## Contributing
|
|
74
|
+
|
|
75
|
+
Pull requests are welcome. Please open an issue first to discuss what you would like to change.
|
|
76
|
+
|
|
77
|
+
Make sure to add/update tests, translations, and documentation as appropriate.
|