The Urtentic Web SDK provides a simple way to integrate identity verification into your web application. It offers pre-built UI components and a JavaScript API to guide users through the verification process.
Installation npm install @urtentic/web-sdk
Integration Options The Urtentic Web SDK offers two main integration options:
Web Components Pre-built UI components for quick integration with the <urtentic-button> element
JavaScript API Direct SDK initialization for custom UI implementations with full control
Using Web Components The SDK provides the <urtentic-button> web component which creates a customizable verification button.
<! DOCTYPE html > < html > < head > < title > Urtentic Verification Example </ title > < script src = "https://cdn.urtentic.com/sdk/latest/urtentic.js" ></ script > </ head > < body > < h1 > User Verification </ h1 > < urtentic-button clientId = "YOUR_CLIENT_ID" flowId = "YOUR_FLOW_ID" metadata = '{"userId": "123", "customField": "value"}' > </ urtentic-button > </ body > </ html >
Handling Verification Events const verificationButton = document . querySelector ( 'urtentic-button' ); // SDK loaded and ready verificationButton . addEventListener ( 'urtentic:loaded' , ( event ) => { console . log ( 'SDK loaded and ready' ); }); // User started the verification process verificationButton . addEventListener ( 'urtentic:userStartedSdk' , ( event ) => { console . log ( 'User started verification' , event . detail ); }); // Verification complete verificationButton . addEventListener ( 'urtentic:userFinishedSdk' , ( event ) => { console . log ( 'Verification complete' , event . detail ); }); // User exited the verification flow verificationButton . addEventListener ( 'urtentic:exitedSdk' , ( event ) => { console . log ( 'User exited verification' , event . detail ); });
Using the JavaScript API For more control over the verification flow, use the JavaScript API directly:
Urtentic . init ({ flowId: 'YOUR_FLOW_ID' , clientId: 'YOUR_CLIENT_ID' , metadata: '{"userId": "123", "customField": "value"}' , redirect: 'https://yoursite.com/success' , userStartedSdk : ( detail ) => { console . log ( 'User started verification' , detail ); }, userFinishedSdk : ( detail ) => { console . log ( 'Verification complete' , detail ); }, exitedSdk : ( detail ) => { console . log ( 'User exited verification' , detail ); } });
Configuration Parameters Parameter Type Required Description clientIdString Yes Your Urtentic client ID flowIdString Yes The ID of the verification flow metadataString No JSON string with additional data redirectString No Redirect URL after completion userStartedSdkFunction No Callback when user starts verification userFinishedSdkFunction No Callback when verification is complete exitedSdkFunction No Callback when user exits the flow
urtentic-button ::part( button ) { background-color : #ff5722 ; color : white ; padding : 12 px 24 px ; border-radius : 8 px ; font-size : 18 px ; }
Browser Compatibility The Urtentic Web SDK is compatible with all modern browsers:
Browser Support Chrome Latest 2 versions Firefox Latest 2 versions Safari Latest 2 versions Edge Latest 2 versions
For older browsers, the SDK automatically includes polyfills for Web Components.
