Getting Started

1. Including Incode's web sdk in your project

There are 2 ways in which the web sdk can be included. The first one is by directly including a script tag in your html, the second one is by installing an npm package which has a reactjs dependency. Follow the link below which best adheres to your project:

A) Including Incode’s web sdk via script tag

This is the simplest and fastest way to include the Incode Web SDK in your project. Just add a script tag and load the latest version from the Incode CDN:

<script src="https://sdk.incode.com/sdk/onBoarding-1.55.0.js" defer></script>

The library will create the OnBoarding object. You can access this object globally through javascript’s window object.

Make sure you are using the latest version to get the most out of the Incode Web SKD. Check out the release notes.

B) Include Incode’s web sdk via npm

info

Please note that we only recommend using the npm package method if your project is using already react. For any other project (vanilla js, angular, vue, etc) you will have an easier integration using the script tag method, and it is strongly encouraged to so.

Just add the dependency using your preferred package manager:

# yarn
yarn add @incodetech/welcome

# npm
npm install @incodetech/welcome

The sdk has a dependency on react 17.0.2

2. Initializing Incode Web SDK

You have successfully added the SDK into your project. The next step is to initialize it to make use of it. Before you do that, take into account the following considerations.

2.1 Requirements and considerations

HTTPS

To successfully integrate and use the Incode Web SDK in your project, make sure that your web application runs over HTTPS (this includes your development web server). This will allow the correct execution of all sdk methods.

API Key or Client Id

This integration will require your API Key or your Client Id provided by Incode to allow the Web SDK access to the Incode Omni API.

2.2 Initialize the web sdk

There are 2 methods needed to get your web sdk ready:

The create method
The warmup method

The `create` method

The create method will create an actual instance of the whole Incode sdk given a configuration (passed as an argument), you can think of it as a class constructor, if you will.

Here is an example using the minimum configuration options needed:

// when included via script tag
let incode;

const incodeConfig = {
    apiURL: '<https://incode-api-url.com>', // provided by Incode
    apiKey: 'Your API Key' // provided by Incode
};

async function startIncode(){
    incode = await window.OnBoarding.create(incodeConfig);
}

startIncode();

// when using the npm package
import { create } from "@incodetech/welcome";

const incodeConfig = {
    apiURL: '<https://incode-api-url.com>', // provided by Incode
    apiKey: 'Your API Key' // provided by Incode
};

// Get incode instance
const incode = create(incodeConfig);

The `warmup` method

The Incode Web SDK components encapsulate different functionalities that use a common set of models that need to be pre-loaded. To do this, you have to call the warmup() method right after the initialization and before any other method like this:

async function start(){
    incode = // the instance from previous step
    await incode.warmup();
}

3. A minimal application example

Lets write a small application to get your feet wet. We will be using the sdk in the recommended way (by a script tag) and this will b

3.1 The basics

Let's get started with what we had from previous sections.

main.js
let incode;

const incodeConfig = {
    apiURL: '<https://incode-api-url.com>', // provided by Incode
    apiKey: 'Your API Key' // provided by Incode
};

async function startIncode(){
    let incodeObj = await window.OnBoarding.create(incodeConfig);
    await incodeObj.warmup();
    return incodeObj;
}

startIncode();

Let's create a session, which represents the user's onboarding session on the incode's dashboard. Aditionally, replace the call to startIncode at the bottom, and lets create a function which will be called once our web page is ready.

Remember to get your configuration_id from the incode's dashboard

main.js
let incode;
let session;  // here we will store the session

async function startIncode(){
    // .....
}

async function createIncodeSession(){
    return incode.createSession("ALL", null, { "configurationId" : "<your_configuration_id>" });
}

async function app(){
    try{
        incode = await startIncode();
        session = await createIncodeSession();
    }catch (e){
        console.dir(e);
        throw e;
    }
}

document.addEventListener("DOMContentLoaded", app);

Now we are ready to start working with the sdk!

Lets create our basic index.html in the same folder where our main.js is located, this html file will host our application:

<!DOCTYPE html>
<html>

<head>
    <title>Incode WebSdk</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <div id="camera-container"></div>
    <script src="./index.js" type="module"></script>
    <!-- Make sure you use the latest sdk version -->
    <script src="https://sdk.incode.com/sdk/onBoarding-1.55.0.js"></script>
</body>

</html>

We will hold a reference to the <div id="camera-container"></div> element for incode's web sdk to render everything.

main.js
let incode;
let session; 
const container = document.getElementById("camera-container");

// .....

Let's use that same container to get some feedback on what's going on:

main.js
// .....

async function app(){
    try{
        container.innerHTML = `<p>Starting incode...</p>`;
        incode = await startIncode();
        container.innerHTML = `<p>Creating session...</p>`;
        session = await createIncodeSession();
    }catch (e){
        console.dir(e);
        container.innerHTML = `<p>Something went wrong</p>`;
        throw e;
    }
}

// .....

It's recommend to always report the device geolocation data, we do this by invoking the sendGeolocation method from the sdk

main.js
// .....

async function app(){
    try{
        // .....
        await incode
          .sendGeolocation({ token: session.token })
          .catch(console.log);
        container.innerHTML = "";
    }catch(e){
        // .......
    }
}

// .....

Our next step is capturing the user's id

3.2 Capture User's ID

The web sdk's renderCamera allows you to capture a variety of documents (such as an id and a selfie!). We will be using that to capture our user's data in this sample application. If you want to take a look at all the options it provides, you can check it directly in the SDK-Methods section.

Let's add a some functions to get the user's id scanned, we will scan the front, the back, and will process the data afterwards. Add the following below your app() function.

main.js
function renderFrontIDCamera() {
    incode.renderCamera("front", container, {
        onSuccess: renderBackIDCamera, // after we succesfully get the front of the id, let's scan the back side
        // onError: showError,
        token: session,  // the session token we retrieved before
        numberOfTries: -1,
    });
}

function renderBackIDCamera() {
    incode.renderCamera("back", container, {
        onSuccess: processId, // At this point we have both sides succesfully scanned, let incode process the data 
        // onError: showError,
        token: session,     // the session token we retrieved before
        numberOfTries: -1,
    });
}

async function processId() {
    container.innerHTML = "<p>Loading...</p>";
    await incode.processId({ token: session.token });
    container.innerHTML = "";
}

Let's get the flow started after we have reported our geolocation data, modify your app() function and add the following after the sendGeolocation() call:

main.js
async function app(){
    try{
        // ......
        renderFrontIDCamera();   // add this line
    }catch (e){
        // ......
    }
}

Run the application and scan the Id.

After it has finished, you can see the session in the dashboard, with all the information from the user's ID collected under the ID Verification section.

Next, we want to get a selfie from the user to make sure his/her face matches that of the one in the ID.

3.3 Capture a selfie

This is as simple as previous steps, add a new function to capture user's selfie using the websdk methods; add the following below the processId() function:

main.js
function renderSelfieCamera() {
    incode.renderCamera("selfie", container, {
      onSuccess: () => {
        console.log("Finished onboarding");
      },
      onError: showError,
      token: session,
      numberOfTries: 3,
    });
}

We will consider our onboarding finished after we got both, the ID and the selfie. Make sure to call the renderSelfieCamera method after your processId finishes:

async function processId() {
    container.innerHTML = "<p>Loading...</p>";
    await incode.processId({ token: session.token });
    container.innerHTML = "";
    renderSelfieCamera();
}

If you run your application now and have a check in the dashboard, you will notice that the status session is still marked as NOT COMPLETED.

Next we will inform incode's dashboard that this onboarding session is finished.

3.4 Finish onboarding

This just requires calling the getFinishStatus method from the sdk. Modify the onSuccess callback of the renderSelfieCamera() function to call it.

main.js
function renderSelfieCamera() {
    incode.renderCamera("selfie", container, {
        onSuccess: () => {
            // use the same configuration id as you used in the createIncodeSession method
            incode.getFinishStatus( "<your_configuration_id>", { token : session.token }); 
        },
        onError: showError,
        token: session,
        numberOfTries: 3,
    });
}

If you run your application one last time and check the dashboard you will now see that the status session is marked as COMPLETED now.

That's it! You have created your first OnBoarding application using incode's websdk.

Next steps

Check our SDK-Methods to learn more about it and how to use it.

1. Including Incode's web sdk in your project​

A) Including Incode’s web sdk via script tag​

B) Include Incode’s web sdk via npm​

info

2. Initializing Incode Web SDK​

2.1 Requirements and considerations​

HTTPS​

API Key or Client Id​

2.2 Initialize the web sdk​

The create method​

The warmup method​

3. A minimal application example​

3.1 The basics​

3.2 Capture User's ID​

3.3 Capture a selfie​

3.4 Finish onboarding​

Next steps​