sonic-widget 1.20.0 → 1.22.0

package/README.md

@@ -2,11 +2,83 @@
 
 **Sonic Widget** - _used to show the onboard kyc at your web page itself._
 
-Use this script tag to get access to the widget.
+Use this script tag to get access to the widget:
 
-**_`<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.19.0/dist/index.min.js"></script>`_**
+**_`<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.22.0/dist/index.min.js"></script>`_**
 
-## Implementation:
+or in **Angular** can be used by installing package from npm
+
+**_`npm install sonic-widget`_**`
+
+and adding path in `angular.json`
+
+```json
+"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
+```
+## Implementation Details for Angular TypeScript:
+
+**Steps:-**
+
+1. Create or open an angular TS project.
+
+2. Use this script tag to get access to the widget at initial html page:
+
+**_`<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.22.0/dist/index.min.js"></script>`_**
+
+or it can be added in `angular.json` by installing the npm package
+
+```json
+"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
+```
+
+2. At `app.component.html`, Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
+
+```html
+<button id="xxxx">Open</button>
+```
+
+3. 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.
+
+```html
+<div id="sonic-web-widget"></div>
+```
+
+4. Add a declaration for var *sonic* at TS file `app.component.ts`.
+
+```ts
+declare var sonic: any;
+```
+
+5. Next, add the functionality to call widget in the base of onInit.
+
+```ts
+	ngOnInit(): void {
+		
+		const config = {
+			baseurl: string, // the base url of the backend server
+			showPage: boolean, // used to show the page or not
+			ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io"
+			videoURL: string, // url of video to do (e.g: demo doing kyc)
+			accountId: string, // account can be taken from operator axiom account
+			userId: string, // user prospective data
+			userName: string, // user prospective data
+			email: string, // user prospective data
+			phone: string, // user prospective data
+			applicationNo: string, // user prospective data
+			isMalay: boolean, //used to change the default language english to malay
+			onMessage: function (data) {}, // callback function, when api response message or error or any other actions
+		};
+
+		// get the element used in the action button 
+		var container = document.getElementById('xxxx');
+		// on click of element widget works
+		container?.addEventListener('click', function () {
+			sonic?.SonicWidget(config);
+		});
+  	}
+```
+
+## Implementation Details for Vanilla JavaScript:
 
 **Steps:-**
 
@@ -27,7 +99,7 @@ Use this script tag to get access to the widget.
 4. Add a Script tag to the head tag or body tag. And use the latest version.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.19.0/dist/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@1.22.0/dist/index.min.js"></script>
 ```
 
 5. Next, add the script tag at a necessary place. But add below the widget script.