Demo Application

The web SDK with a code example can be downloaded from the Download section.

The example app in the download fully incorporates the Sybrin Identity Web SDK. To use the example, please ensure the following:

You have an API key as provided by Sybrin
You have the backend API endpoints for authentication and data extraction as provided by Sybrin

Then follow these steps:

Download the sybrin-identity-websdk-demo-application.zip file linked above
Extract the zip file contents
Open index.js
Follow JavaScript API and component initialization with the authorization method of your choice
Host the UI folder in any hostable environment, e.g. IIS

If you would like to use the companion API or your own middleware implementation, please see the Middleware section for details on how to accomplish this.

For your convenience in formulating custom styling for all components, sybrin.identity.css is also provided as a base example below.

<!DOCTYPE html>
<html class="" lang="en" id="html">

<head>
    <title>
        Sybrin Identity
    </title>

    <base href="./" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script src="sybrin.identity.all.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css" media="screen" />
</head>

<body>
    <header>
        <div class="branding">
            <img class="logo"
                src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Sybrin-Logo-Horizontal-Blue.svg" />
        </div>
        <div class="branding">
            <span class="title">Sybrin Web SDK - Identity</span>
        </div>
        <div class="actions">
        </div>
    </header>
    <div id="viewport" class="viewport">
        <div class="sybrin-demo-loading">
            Please wait. Loading...
        </div>
    </div>
</body>

</html>

function detectIE() {
    try {
        var isIE = false || !!document.documentMode;
 
        if (!isIE) {
            if (navigator.userAgent.indexOf("MSIE") > 0) {
                return true;    
            } else {
                return false;
            }
        }
 
        return true;
    } catch(e) {
        return true;
    }
};

var isIE = detectIE();

if (isIE) {
    alert('Browser not supported');
}

document.addEventListener('DOMContentLoaded', function (event) {
    var identity = new Sybrin.Identity.Api();
    var options = new Sybrin.Identity.Options({
        apiKey: 'your-api-key-here',
        integrationMode: 0,
        authEndpoint: 'your-auth-endpoint-here',
        dataExtractionEndpoint: 'your-data-extraction-endpoint-here',
        captureMode: 0
    });

    identity.initialize(options);
    identity.getVersionInfo().then(function(versionInfo) {
        document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Identity (version ' + versionInfo.webSdkVersion + ')';
    });
    identity.checkCompatibility(true);

    var currentComponent = null;

    var initWizard = function() {
        if (currentComponent) {
            currentComponent.destroy();
        }

        currentComponent = new Sybrin.Identity.WizardComponent({
            id: 'viewport',
            api: identity
        });

        currentComponent.initialize();

        currentComponent.onWizardDone = function(result, editedValues) {
            alert(JSON.stringify(result));
        }

        currentComponent.onScanError = function(error) {
            console.error(error);
        }

        currentComponent.onScanCancelled = function() {
            console.log('Operation cancelled');
        }
    }

    initWizard();
})

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #2d2d46;
    margin: 0;
    padding: 0;
}

header {
    background-color: white;
    margin-bottom: 24px;
    padding: 15px 60px;
    overflow: auto;
}

header .branding {
    float: left;
}

header .actions {
    float: right;
}

header img {
    height: 33px;
    padding-top: 3px;
}

header span.title {
    display: inline-block;
    line-height: 1;
    border-radius: 50rem !important;
    margin-left: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background: rgba(0, 0, 30, 0.05) !important;
    color: rgba(0, 0, 30, 0.824) !important;
    margin-top: 4px;
}

header button {
    font: 300 1em / 2em Roboto, sans-serif;
    padding: 0.25rem 1.5rem !important;
    border-radius: 50rem !important;
    border: none;
    color: #fff !important;
    background: linear-gradient(160deg, #00fafa 0, #3264fa 100%);
    box-shadow: 0 15px 30px -10px #3264fa !important;
    cursor: pointer;
}

.viewport {
    border: 2px solid rgba(50, 50, 55, 0.2);
    border-radius: 8px;
    display: inline-block;
    -webkit-box-shadow: 0 0 16px 8px rgba(50, 50, 55, 0.2);
    box-shadow: 0 0 16px 8px rgba(50, 50, 55, 0.2);
    width: 80%;
    max-width: 1024px;
    overflow: hidden;
}

.sybrin-demo-loading {
    color: white;
    padding: 20px;
}

.sybrin-debug-button {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    color: #3498db;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 27px;
    text-decoration: none;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid;
}

@media screen and (max-width: 800px) {
    header {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    header {
        display: none;
    }

    .viewport {
        width: calc(100% - 4px);
    }
}

.sybrin-identity-wizard {
    position: relative;
    width: 100%;
    min-height: 342px;
    margin: auto;
}

.sybrin-identity-container {
    position: relative;
    padding: 12px;
    width: 100%;
    margin: auto;
    background-color: white;
    box-sizing: border-box;
    border-radius: 8px;
}

.sybrin-identity-halves {
    display: flow-root;
}

.sybrin-identity-half {
    float: left;
    width: 50%;
    margin: 0;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
}

.sybrin-identity-half p {
    margin-top: 0;
    margin-bottom: 12px;
}

.sybrin-identity-block {
    border: 2px solid rgb(234, 234, 234);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.sybrin-identity-block-icon {
    margin: 24px;
    text-align: center;
}

.sybrin-identity-block-icon svg {
    height: 40px;
}

.sybrin-identity-block-icon svg path {
    stroke: inherit;
    fill: inherit;
}

.sybrin-identity-block-prompt {
    margin: 24px;
}

.sybrin-identity-block-button {
    margin: 0 24px 24px 24px;
    border: 2px solid rgb(234, 239, 253);
    background-color: rgb(234, 239, 253);
    border-radius: 8px;
    color: rgb(53, 102, 247);
    cursor: pointer;
    padding: 16px;
}

.sybrin-identity-component-section {
    padding: 12px;
}

.sybrin-identity-button-section {
    text-align: right;
}

.sybrin-identity-button-section .sybrin-identity-flow-button {
    margin: 12px;
}

.sybrin-identity-align-left {
    text-align: left;
}

.sybrin-identity-flow-button {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    padding: 16px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background: rgb(53, 102, 247);
    width: 224px;
    border: 2px solid rgb(53, 102, 247);
}

.sybrin-identity-flow-button.sybrin-secondary {
    border: 2px solid rgb(234, 239, 253);
    background-color: rgb(234, 239, 253);
    color: rgb(53, 102, 247);
}

.sybrin-identity-flow-button:disabled {
    color: rgba(50, 50, 55, 0.4);
    background: transparent;
    border: 2px solid rgb(234, 234, 234);
}

.sybrin-identity-list {
    width: 100%;
    max-width: 464px;
    margin: auto;
    padding: 16px;
    background-color: rgb(244, 244, 244);
    border-radius: 8px;
    max-height: 448px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    border: 2px solid rgb(234, 234, 234);
}

.sybrin-identity-card {
    display: block;
    height: 48px;
    padding: 16px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: content-box;
}

.sybrin-identity-card-image {
    float: left;
    height: 48px;
    width: 82px;
    border-radius: 8px;
    overflow: hidden;
}

.sybrin-identity-card-image img {
    height: 100%;
    width: 100%;
}

.sybrin-identity-icon {
    float: left;
    width: 48px;
    text-align: center;
}

.sybrin-identity-icon svg {
    height: 48px;
}

.sybrin-identity-icon svg path {
    stroke: inherit;
    fill: inherit;
}

.sybrin-identity-text {
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 24px;
}

.sybrin-identity-country-select .sybrin-identity-text {
    max-width: calc(100% - 106px);
}

.sybrin-identity-card-title {
    margin: 4px;
    font-weight: bold;
}

.sybrin-identity-card-subtitle {
    margin: 4px;
}

.sybrin-identity-selected {
    background-color: rgb(53, 102, 247);
    box-shadow: 0px 16px 32px #3264FA4D;
    color: white;
}

.sybrin-identity-selected .sybrin-identity-icon svg path {
    stroke: white;
    fill: white;
}

.sybrin-identity-video-container {
    position: relative;
    width: 100%;
    z-index: 4;
    margin: auto;
    border: 8px solid rgb(53, 102, 247);
    border-radius: 8px;
    box-sizing: border-box;
}

.sybrin-identity-video {
    display: block;
    width: 100%;
    z-index: 4;
}

.sybrin-identity-video-mirrored {
    display: block;
    width: 100%;
    z-index: 4;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.sybrin-identity-prompt-container {
    z-index: 100;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    color: black;
    text-align: center;
}

.sybrin-identity-prompt-container-top {
    top: 0;
}

.sybrin-identity-prompt-container-bottom {
    bottom: 0px;
}

.sybrin-identity-prompt {
    text-align: center;
    color: black;
}

.sybrin-identity-fullscreen-video-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    top: 0;
    left: 0;
    background-color: black;
}

.sybrin-identity-result-fields {
    width: 100%;
    padding: 0 12px;
    border-radius: 8px;
    max-height: 344px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.sybrin-identity-result-group {
    display: flow-root;
}

.sybrin-identity-result-field {
    width: calc(50% - 12px);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.sybrin-identity-float-left {
    float: left;
}

.sybrin-identity-float-right {
    float: right;
}

.sybrin-identity-result-field-wrapper {
    position: relative;
    min-height: 45px;
}

.sybrin-identity-result-field-icon {
    cursor: pointer;
}

.sybrin-identity-result-field svg {
    width: 12px;
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 1;
}

.sybrin-identity-result-field.sybrin-identity-field-attention svg path {
    stroke: #a8262b;
    fill: #a8262b;
}

.sybrin-identity-result-field.sybrin-identity-field-touched svg path {
    stroke: #00AA6E;
    fill: #00AA6E;
}

.sybrin-identity-searchbox {
    width: 100%;
    max-width: 464px;
    height: 40px;
    border: 2px solid rgb(53, 102, 247);
    border-radius: 8px;
    box-sizing: border-box; 
    margin: auto auto 8px auto;
    padding: 8px;
    display: block;
}

.sybrin-identity-result-field input {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 2px solid rgb(53, 102, 247);
    border-radius: 8px;
    box-sizing: border-box;
    padding-top: 16px;
    padding-left: 16px;
}

.sybrin-identity-confidence-prompt {
    margin: 0 12px 12px 0;
    color: #a8262b;
    text-align: center;
}

.sybrin-identity-field-attention input {
    border-color: #a8262b;
}

.sybrin-identity-field-attention.sybrin-identity-field-touched input {
    border-color: #00AA6E;
}

.sybrin-identity-field-attention.sybrin-identity-field-amended input {
    border-color: #00AA6E;
}

.sybrin-identity-result-field label {
    position: absolute;
    top: 6px;
    left: 17px;
    opacity: 0.5;
    font-size: 11px;
}

.sybrin-identity-result-image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    height: 230px;
    background-color: black;
}

.sybrin-identity-result-image img {
    height: 100%;
    display: block;
    margin: auto;
    max-width: 100%;
    object-fit: contain;
}

.sybrin-identity-fail-message {
    padding: 12px;
    color: #a8262b;
    text-align: center;
}

.sybrin-identity-prompt-message {
    padding: 12px;
}

.sybrin-mobile-capture-url {
    word-break: break-all;
}

.sybrin-custom-scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgb(244, 244, 244);
    border-radius: 10px;
}

.sybrin-custom-scrollbar::-webkit-scrollbar {
    width: 10px;
    background-color: rgb(244, 244, 244);
}

.sybrin-custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(53, 102, 247)),
            color-stop(0.72, rgb(53, 102, 247)),
            color-stop(0.86, rgb(53, 102, 247)));
}

.sybrin-hidden {
    display: none;
}

.sybrin-identity-guideline-component {
    text-align: center;
}

.sybrin-identity-guideline-header {
    margin: 16px 0;
}

.sybrin-identity-guideline-container {
    display: block;
}

.sybrin-identity-guideline {
    padding: 12px 8px;
    margin: 0 12px 16px 12px;
}

.sybrin-identity-guideline-icon {
    float: left;
    height: 25px;
    width: 10%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-identity-guideline-icon svg {
    height: 100%;
}

.sybrin-identity-guideline-text {
    float: right;
    text-align: left;
    width: 85%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.sybrin-identity-loader-wrapper {
    background-color: white;
    z-index: 6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.sybrin-identity-loader {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation-name: sybrin-identity-loader;
    animation-name: sybrin-identity-loader;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

@-webkit-keyframes sybrin-identity-loader {
    0% {
        -webkit-transform: translateY(-50%) rotate(0deg);
        transform: translateY(-50%) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(-50%) rotate(180deg);
        transform: translateY(-50%) rotate(180deg);
    }

    100% {
        -webkit-transform: translateY(-50%) rotate(360deg);
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes sybrin-identity-loader {
    0% {
        -webkit-transform: translateY(-50%) rotate(0deg);
        transform: translateY(-50%) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(-50%) rotate(180deg);
        transform: translateY(-50%) rotate(180deg);
    }

    100% {
        -webkit-transform: translateY(-50%) rotate(360deg);
        transform: translateY(-50%) rotate(360deg);
    }
}

@media screen and (max-width: 1060px) {
    .sybrin-identity-prompt-container {
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 12px;
    }
}

@media screen and (max-width: 960px) {
    .sybrin-identity-buttons-small .sybrin-identity-flow-button {
        width: 195px;
    }
}

@media screen and (max-width: 800px) {
    .sybrin-identity-half {
        float: none;
        width: 100%;
        float: left;
    }

    .sybrin-identity-result-field {
        width: 100%;
    }

    .sybrin-identity-flow-button {
        width: 198px;
    }
}

@media screen and (max-width: 870px) {
    .sybrin-identity-buttons-small .sybrin-identity-flow-button {
        width: 177px;
    }
}

@media screen and (max-width: 640px) {
    .sybrin-identity-buttons-small .sybrin-identity-flow-button {
        width: 150px;
    }
}

@media screen and (max-width: 600px) {
    .sybrin-identity-prompt-container {
        padding: 0;
        font-size: 11px;
    }
}

@media screen and (max-width: 550px) {
    .sybrin-identity-buttons-small .sybrin-identity-flow-button {
        width: 133px;
    }
}

@media screen and (max-width: 500px) {
    .sybrin-identity-container {
        padding: 6px;
    }

    .sybrin-identity-block-icon {
        margin: 12px !important;
    }

    .sybrin-identity-block-prompt {
        margin: 12px !important;
    }

    .sybrin-identity-half {
        padding: 6px;
    }

    .sybrin-identity-block-button {
        margin: 12px 12px !important;
    }

    .sybrin-identity-flow-button {
        margin: 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        max-width: calc(100% - 12px);
    }

    .sybrin-identity-component-section {
        padding: 6px;
    }

    .sybrin-identity-list {
        padding: 8px;
    }

    .sybrin-identity-card {
        padding: 8px;
    }

    .sybrin-identity-text {
        margin-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 60px);
    }

    .sybrin-identity-country-select .sybrin-identity-text {
        max-width: calc(100% - 94px);
    }

    .sybrin-identity-confidence-prompt {
        margin: 0 6px 6px 0;
    }

    .sybrin-identity-align-left {
        text-align: center;
    }

    .sybrin-identity-align-right {
        text-align: center;
    }

    .sybrin-identity-button-section {
        text-align: center;
    }

    .sybrin-identity-result-image {
        height: 160px;
    }

    .sybrin-identity-result-fields {
        padding: 0 6px;
    }

    .sybrin-identity-result-field {
        margin-bottom: 6px;
    }
}

@media screen and (max-height: 700px) {
    .sybrin-identity-result-fields {
        max-height: 200px;
    }
}

.sybrin-identity-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.sybrin-identity-modal {
    width: 100%;
    max-width: 450px;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.sybrin-identity-modal-message {
    background-color: white;
    border-top: 2px solid rgb(234, 239, 253);
    border-left: 2px solid rgb(234, 239, 253);
    border-right: 2px solid rgb(234, 239, 253);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: calc(100% - 48px);
    padding: 24px;
}

.sybrin-identity-modal-commands {
    background-color: white;
    border-bottom: 2px solid rgb(234, 239, 253);
    border-left: 2px solid rgb(234, 239, 253);
    border-right: 2px solid rgb(234, 239, 253);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0 0 24px 0;
    width: 100%;
}

.sybrin-identity-modal-commands button {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    padding: 16px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background: rgb(53, 102, 247);
    width: 224px;
    border: 2px solid rgb(53, 102, 247);
}

@media screen and (max-width: 500px) {
    .sybrin-identity-modal {
        width: calc(100% - 48px);
    }
}

@media screen and (max-width: 310px) {
    .sybrin-identity-modal-commands button {
        width: calc(100% - 48px);
    }
}

.sybrin-identity-flip-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 101;
    perspective: 1000px;
    color: black;
}

.sybrin-identity-flip-container .sybrin-identity-flipper,
.sybrin-identity-flip-container .sybrin-identity-flipper {
    transform: rotateY(180deg);
}

.sybrin-identity-flip-front,
.sybrin-identity-flip-back {
    width: 100%;
    height: 100%;
}

.sybrin-identity-flip-front div {
    width: 50%;
    margin: auto;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);