# WebSDK 1

Old version of WebSDK. Here you will find information about configuration parameters, websdk message types and their payload.

WebSDK Screen

# Initialize configuration

Copy
let snsWebSdkInstance = snsWebSdk.init(
      accessToken,
      // token update callback, must return Promise
      // Access token expired
      // get a new one and pass it to the callback to re-initiate the WebSDK
      () => this.getNewAccessToken()
  )
  .withConf({
      lang: 'en', //language of WebSDK texts and comments (ISO 639-1 format)
      email: applicantEmail,
      phone: applicantPhone,
      i18n: customI18nMessages, //JSON of custom SDK Translations
      uiConf: {
          customCss: "https://url.com/styles.css"
          // URL to css file in case you need change it dynamically from the code
          // the similar setting at Customizations tab will rewrite customCss
          // you may also use to pass string with plain styles `customCssStr:`
      },
  })
  .build();
)

# ATTRIBUTES OF withConf PARAMETER

Name	Type	Required	Description	Default
lang	String	No	Language of WebSDK texts and comments in ISO 639-1 format.	'en'
country	String	No	Alpha-3 country code (Wikipedia) to prefill it on document upload screen.
email	String	No	User's email to propagate it to the applicant.
phone	String	No	User's phone number to propagate it to the applicant.
i18n	JSON	No	Custom SDK translations to change dynamically on SDK initialization. You can find format and default texts at the dashboard.
uiConf	Object	No	SDK custom configuration. Check available attributes below.
documentDefinitions	Object	No	Prefilled definitions on doCapture screen.

# ATTRIBUTES OF uiConf PARAMETER

Name	Type	Required	Description	Default
customCss	String	No	URL to your external css file for SDK to use it during initialization.
customCssStr	String	No	Plain string with changes in css.
scrollIntoView	Boolean	No	Disables/enables automatic scrolling to SDK view on SDK screen switches.	true

# STRUCTURE OF documentDefinitions PARAMETER

documentDefinitions is a key-value object, where keys are idDocSetType and values are documentDefinition

{ idDocSetType: documentDefinition }

# Example

documentDefinitions: {
  IDENTITY: {idDocType: 'PASSPORT', country: 'GBR'}
}

# POSSIBLE idDocSetType VALUES

Value	Description
IDENTITY	Identity document step.
IDENTITY2	Second identity document step.
IDENTITY3	Third identity document step.
IDENTITY4	Fourth identity document step.

# ATTRIBUTES OF documentDefinition PARAMETER

Name	Type	Required	Description
country	String	Yes	Alpha-3 country code (Wikipedia).
idDocType	String	Yes	Document type.

# ATTRIBUTES OF withOptions PARAMETER

Name	Type	Required	Description	Default
addViewportTag	Boolean	No	Adds `viewport` meta tag for iFrame for mobile-optimized SDK adjustments.	true
adaptIframeHeight	Boolean	No	Allows our SDK to adapt its height depending on frame/container/page/screen size.	true

# Standalone working example

Below is a fully working example. Just substitute $ACCESS_TOKEN with the appropriate value (see steps above), save it to an HTML file and open it in your browser.

Copy
<html>
 <head>
  <title>WebSDK CDN Example</title>
 </head>
 <body>
	<script src="https://static.sumsub.com/idensic/static/sns-websdk-builder.js"></script>
	<div id="sumsub-websdk-container"></div>
</body>
</html>
<script>

function launchWebSdk(accessToken, applicantEmail, applicantPhone) {
    let snsWebSdkInstance = snsWebSdk.init(
            accessToken,
            () => this.getNewAccessToken()
        )
        .withConf({
            lang: 'en',
            email: applicantEmail,
            phone: applicantPhone,
            i18n: {"document":{"subTitles":{"IDENTITY": "Upload a document that proves your identity"}}},
            onMessage: (type, payload) => {
                console.log('WebSDK onMessage', type, payload)
            },
            uiConf: {
                customCssStr: ":root {\n  --black: #000000;\n   --grey: #F5F5F5;\n  --grey-darker: #B2B2B2;\n  --border-color: #DBDBDB;\n}\n\np {\n  color: var(--black);\n  font-size: 16px;\n  line-height: 24px;\n}\n\nsection {\n  margin: 40px auto;\n}\n\ninput {\n  color: var(--black);\n  font-weight: 600;\n  outline: none;\n}\n\nsection.content {\n  background-color: var(--grey);\n  color: var(--black);\n  padding: 40px 40px 16px;\n  box-shadow: none;\n  border-radius: 6px;\n}\n\nbutton.submit,\nbutton.back {\n  text-transform: capitalize;\n  border-radius: 6px;\n  height: 48px;\n  padding: 0 30px;\n  font-size: 16px;\n  background-image: none !important;\n  transform: none !important;\n  box-shadow: none !important;\n  transition: all 0.2s linear;\n}\n\nbutton.submit {\n  min-width: 132px;\n  background: none;\n  background-color: var(--black);\n}\n\n.round-icon {\n  background-color: var(--black) !important;\n  background-image: none !important;\n}"
            },
            onError: (error) => {
                console.error('WebSDK onError', error)
            },
        })
        .withOptions({ addViewportTag: false, adaptIframeHeight: true})
        .on('idCheck.stepCompleted', (payload) => {
            console.log('stepCompleted', payload)
        })
        .on('idCheck.onError', (error) => {
            console.log('onError', error)
        })
        .onMessage((type, payload) => {
            console.log('onMessage', type, payload)
        })
        .build();
    snsWebSdkInstance.launch('#sumsub-websdk-container')
}

function getNewAccessToken() {
  return Promise.resolve($NEW_ACCESS_TOKEN)
}

    launchWebSdk($ACCESS_TOKEN)
</script>

# WebSDK messages

When providing the on handler you will receive messages from the WebSDK for selected message type (all of them are prefixed with idCheck.):

You can see all of those messages in your Browser dev console if you are launching the WebSDK from our dashboard.

messageType	Payload	Description
onReady	// id of the iframe in the current context {}	WebSDK resources have been loaded.
onInitialized	{}	The first screen is rendered.
onStepInitiated	{ "idDocSetType": "$idDocSetType", "types": ["$idDocType1", "$idDocType2"] }	A screen with that corresponds to '$idDocSetType' was shown.
stepCompleted	{"step": "$idDocSetType"}	Step '$idDocSetType' has been completed.
onApplicantLoaded	{"applicantId": "$id"}	Applicant with id $id has been loaded.
onApplicantSubmitted	{}	Documents were submitted for verification.
applicantStatus	{ "reprocessing": false, "levelName": "$levelName", "createDate": "$createDate", "expireDate": "$expireDate", "reviewStatus": "$reviewStatus", "autoChecked": false }	Applicant status has been changed.
onApplicantResubmitted	{}	Documents were re-submitted for verification.
onActionSubmitted	{}	Applicant action was submitted.
actionCompleted	{ "action": "$actionType" "applicantActionId": "$id" "answer": "$answer" }	Applicant action $id was completed.
moduleResultPresented	{ "answer": "GREEN" }	Result of standalone module has been presented to the user. Valid only for "module" customization types. Happens either when the user has just completed the check or when user reopened the module for the previously completed check. Possible answers: `GREEN` - check was successful; `YELLOW` - user is allowed to proceed, final check result will be determined later; `RED` - user has been decisively rejected and is not allowed to proceed. Note, that if the rejection is not final, this even will not fire.
onResize	{ "height": 159 }	WebSDK frame has been resized.
onVideoIdentCallStarted	{}	Video call was started by the user.
onVideoIdentModeratorJoined	{}	Video call was answered by operator.
onVideoIdentCompleted	{}	Video call was completed by operator.
onUploadError	{ "code": "$error", "msg": "Error message" }	Uploaded document was rejected. Available values of errors.
onUploadWarning	{ "code": "$warning", "msg": "Warning message" }	There are warnings about the uploaded document. Available values of warnings.