sonic-widget 1.22.0 → 1.23.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 +35 -21
- package/dist/index.js +1760 -1760
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,17 +4,25 @@
|
|
|
4
4
|
|
|
5
5
|
Use this script tag to get access to the widget:
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```html
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.23.0/dist/index.min.js"></script>
|
|
9
|
+
```
|
|
8
10
|
|
|
9
|
-
or
|
|
11
|
+
or
|
|
10
12
|
|
|
11
|
-
**
|
|
13
|
+
in **Angular** can be used by installing package from npm
|
|
14
|
+
|
|
15
|
+
```shell
|
|
16
|
+
npm install sonic-widget
|
|
17
|
+
```
|
|
12
18
|
|
|
13
19
|
and adding path in `angular.json`
|
|
14
20
|
|
|
15
21
|
```json
|
|
16
22
|
"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
|
|
17
23
|
```
|
|
24
|
+
|
|
25
|
+
|
|
18
26
|
## Implementation Details for Angular TypeScript:
|
|
19
27
|
|
|
20
28
|
**Steps:-**
|
|
@@ -23,33 +31,37 @@ and adding path in `angular.json`
|
|
|
23
31
|
|
|
24
32
|
2. Use this script tag to get access to the widget at initial html page:
|
|
25
33
|
|
|
26
|
-
|
|
34
|
+
```html
|
|
35
|
+
<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.23.0/dist/index.min.js"></script>
|
|
36
|
+
```
|
|
27
37
|
|
|
28
|
-
or
|
|
38
|
+
or
|
|
39
|
+
|
|
40
|
+
it can be added in `angular.json` by installing the npm package
|
|
29
41
|
|
|
30
42
|
```json
|
|
31
43
|
"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
|
|
32
44
|
```
|
|
33
45
|
|
|
34
|
-
|
|
46
|
+
3. At `app.component.html`, Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
|
|
35
47
|
|
|
36
48
|
```html
|
|
37
49
|
<button id="xxxx">Open</button>
|
|
38
50
|
```
|
|
39
51
|
|
|
40
|
-
|
|
52
|
+
4. Add a div tag with the id **`sonic-web-widget`** at the specific place. It is used to display the sonic module with the help of this id.
|
|
41
53
|
|
|
42
54
|
```html
|
|
43
55
|
<div id="sonic-web-widget"></div>
|
|
44
56
|
```
|
|
45
57
|
|
|
46
|
-
|
|
58
|
+
5. Add a declaration for var *sonic* at TS file `app.component.ts`.
|
|
47
59
|
|
|
48
60
|
```ts
|
|
49
61
|
declare var sonic: any;
|
|
50
62
|
```
|
|
51
63
|
|
|
52
|
-
|
|
64
|
+
6. Next, add the functionality to call widget in the base of onInit.
|
|
53
65
|
|
|
54
66
|
```ts
|
|
55
67
|
ngOnInit(): void {
|
|
@@ -57,8 +69,8 @@ declare var sonic: any;
|
|
|
57
69
|
const config = {
|
|
58
70
|
baseurl: string, // the base url of the backend server
|
|
59
71
|
showPage: boolean, // used to show the page or not
|
|
60
|
-
ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io"
|
|
61
|
-
videoURL: string, // url of video to do (e.g: demo doing kyc)
|
|
72
|
+
ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io" (Optional)
|
|
73
|
+
videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
|
|
62
74
|
accountId: string, // account can be taken from operator axiom account
|
|
63
75
|
userId: string, // user prospective data
|
|
64
76
|
userName: string, // user prospective data
|
|
@@ -69,15 +81,17 @@ declare var sonic: any;
|
|
|
69
81
|
onMessage: function (data) {}, // callback function, when api response message or error or any other actions
|
|
70
82
|
};
|
|
71
83
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
84
|
+
// get the element used in the action button
|
|
85
|
+
var container = document.getElementById('xxxx');
|
|
86
|
+
// on click of element widget works
|
|
87
|
+
container?.addEventListener('click', function () {
|
|
88
|
+
sonic?.SonicWidget(config);
|
|
89
|
+
});
|
|
90
|
+
}
|
|
79
91
|
```
|
|
80
92
|
|
|
93
|
+
|
|
94
|
+
|
|
81
95
|
## Implementation Details for Vanilla JavaScript:
|
|
82
96
|
|
|
83
97
|
**Steps:-**
|
|
@@ -99,7 +113,7 @@ declare var sonic: any;
|
|
|
99
113
|
4. Add a Script tag to the head tag or body tag. And use the latest version.
|
|
100
114
|
|
|
101
115
|
```html
|
|
102
|
-
<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.
|
|
116
|
+
<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.23.0/dist/index.min.js"></script>
|
|
103
117
|
```
|
|
104
118
|
|
|
105
119
|
5. Next, add the script tag at a necessary place. But add below the widget script.
|
|
@@ -109,8 +123,8 @@ declare var sonic: any;
|
|
|
109
123
|
const config = {
|
|
110
124
|
baseurl: string, // the base url of the backend server
|
|
111
125
|
showPage: boolean, // used to show the page or not
|
|
112
|
-
ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io"
|
|
113
|
-
videoURL: string, // url of video to do (e.g: demo doing kyc)
|
|
126
|
+
ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io" (Optional)
|
|
127
|
+
videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
|
|
114
128
|
accountId: string, // account can be taken from operator axiom account
|
|
115
129
|
userId: string, // user prospective data
|
|
116
130
|
userName: string, // user prospective data
|