Web SDK PoC

In order to make a fast PoC you can copy and past the following code. We assume that the fast poc will be a vainilla html/javascript page. You will need the trial token that you can find on the Credentials section of the Dashboard

1. Example CSS

The following code is not mandatory, it’s just to align al the divs in this fast demo/poc

Copy and paste the following code on the <head><head> of your webpage.

<style type="text/css">
  .info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Nunito", sans-serif;
    padding: 1rem;
  }
</style>

2. Web SDK Poc Demo

In the following code you can find an example of the all available documents on the Alice Onboarding process.

  <body>
  <!--Alice SDK Web CSS styles -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/aliceonboarding@5.1.4/dist/aliceonboarding.css"
  />
  <!--Alice SDK WEB library-->
  <script src="https://unpkg.com/aliceonboarding@5.1.4/dist/aliceonboarding.min.js"/></script>
  <script>

    //The following code will configure your Onboarding
    //Add your trial token you can find it in the Credentials section of your Dashboard
    let trialToken = "<Your-Trial-Token>";

    //Is mandatory to use an email in order to identify your user in this fast POC
    let email = "example@example.com";

    let userInfo = new aliceonboarding.UserInfo(email);

    //You can personalize the Title on your OTD documents
    let invoiceTitle = "Bills";

    //Only for trial pourposes the following code generates the userToken for Onboarding purpouses.
    let authenticator = new aliceonboarding.TrialAuthenticator(
      trialToken,
      userInfo
    );

    //Initialize the Onboarding configuration
    let config = "";

    authenticator
      .execute()
      .then((response) => {
        let userToken = response;

        config = new aliceonboarding.OnboardingConfig()

          //Define the Onboarding Steps as follows
          .withUserToken(userToken) //Token obtained with TrialAuthenticator class
          .withAddSelfieStage() //Step Selfie
          .withAddDocumentStage(aliceonboarding.DocumentType.IDCARD) //Step Idcard
          .withAddDocumentStage(aliceonboarding.DocumentType.RESIDENCEPERMIT) //Step Residence Permit
          .withAddDocumentStage(aliceonboarding.DocumentType.PASSPORT) //Step Passport
          .withAddDocumentStage(aliceonboarding.DocumentType.DRIVERLICENSE) //Step Driver License
          .withAddOtherTrustedDocumentStage(
            invoiceTitle // required
          ); //Step OTD with personalized title

        //Define the id from the component where the onboarding will be displayed
        let onboarding = new aliceonboarding.Onboarding(
          "alice-onboarding-mount",
          config
        );

        //Run the Onboarding
        onboarding.run(onSuccess, onFailure, onCancel);
      })

      .catch((error) => {
        console.log(error);
      });

    //Callbacks that allows you to define your web page behaviour
    function onSuccess(userInfo) {
      console.log("onSuccess: " + userInfo);
    }
    function onFailure(error) {
      console.log("onFailure: " + error);
    }
    function onCancel() {
      console.log("onCancel");
    }
  </script>

  <div class="info-container">
    <h1>Alice Demo Trial Example</h1>

    <div>
      If you don't have your Trial Token, please
      <a
        href="https://dashboard.alicebiometrics.com/#/credentials"
        target="_blank"
        >access to your Dashboard</a
      >
      and get it
    </div>
    <div>Under this Div the Alice Web Sdk should be displayed</div>
  </div>

  <!--
    IS mandatory to have an "empty div" with an id where the onboarding will be displayed
  -->
  <div id="alice-onboarding-mount" />
</body>