Installation:

AXIOM Widget - used to show the axiom protect 2.0 at the current page itself.

Use this script tag to get access to the widget.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

Implementation:

Steps:-

1. Create or open an html file.

2. Add a button with the id xxxx. It is used to call the widget by on click event.

<button id="xxxx">Open</button>

3. Add a div tag with the id axiom-script-widget at the last or beginning of the body tag. It is used to display the axiom module with the help of this id.

<div id="axiom-script-widget"></div>

4. Add a Script tag to the head tag or body tag. And use the latest version.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

5. Next, add the script tag at a necessary place. But add below the widget script.

<script>
	const config = {
		baseurl: string, // the base url of the backend server
		showPage: boolean, // used to show the page or not
		changeToPopup: boolean, // widget shows by popup modal default is false
		accountId: string, // account can be taken from operator axiom account
		appId: string, // app id can be taken from any app available from your operator account
		operatorEmail: string, // axiom operator account details for token
		operatorPassword: string, // axiom operator account details for token
		linkForTC: string, // link for the terms and conditions of axiom protect 2.0
		linkForAbsoluteAndroid: string, // Absolute authentication app link for Android platforms
		linkForAbsoluteIOS: string, // Absolute authentication app link for IOS platforms
		linkForGoogleAndroid: string, // Google authentication app link for Android platforms
		linkForGoogleIOS: string, // Google authentication app link for IOS platforms
		linkForMicrosoftAndroid: string, // Microsoft authentication app link for Android platforms
		linkForMicrosoftIOS: string, // Microsoft authentication app link for IOS platforms
		onResponse: function (data) {}, // callback function, when api response
		onError: function (data) {}, // callback function, when api error
		onClose: function (data) {} // callback function, when page close
	};
	// get the element used in the action button 
	var container = document.getElementById('xxxx');
	// on click of element widget works
	container.addEventListener('click', function () {
		axiom.AXIOMWidget(config);
	});
</script>

Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id xxxx button and add it to the event listener. It checks if the button is clicked and sends the config object data to the axiom module. axiom.AXIOMWidget(config)

Note:-

• baseurl should pass as a string value. It is used as the base URL for API calls.
• showPage is used to pass a boolean value ( true or false ). To toggle the widget page open or close.
• changeToPopup is used to pass a boolean value ( true or false ). To toggle the widget as a popup or inline page.
• accountId should pass as a string value. It is used to get the JWT token and proceed with the operator account.
• appId should pass as a string value. It is used to activate a token with a specific app.
• operatorEmail should pass as a string value. It is used to get the JWT token and to proceed with your operator account.
• operatorPassword should pass as a string value. It is used to get the JWT token and to proceed with your operator account.
• linkForTC should pass as a string value. It is used to redirect the Terms and condition page or any URL or # .
• linkForAbsoluteAndroid should pass as a string value. It is used to download the absolute application for android.
• linkForAbsoluteIOS should pass as a string value. It is used to download the absolute application for IOS.
• linkForGoogleAndroid should pass as a string value. It is used to download the google application for android .
• linkForGoogleIOS should pass as a string value. It is used to download the google application for IOS.
• linkForMicrosoftAndroid should pass as a string value. It is used to download the microsoft application for android.
• linkForMicrosoftIOS should pass as a string value. It is used to download the microsoft application for IOs.
• onResponse is a callback function. It is getting called when the API gives a successful response. Return data is an object with its API endpoint and result.
• onError is a callback function. It is getting called when the API gives an error message or at any configuration error. Return data is an object with its API endpoint and result.
• onClose is a callback function. It is getting called when the page/popup gets closed. Return data is an object with its action and result.