Prepare

The prepare component can be found under the Sybrin.Biometrics namespace and is called PrepareComponent.

Full name: Sybrin.Biometrics.PrepareComponent.

It is a component that provides an initial preparation screen, providing an easy way to view a customizable privacy policy and usage guidelines.

With default styling, the prepare component appears as follows:

Prepare Component

Upon clicking "View Our Privacy Policy", the onViewPrivacyPolicy event will fire. Hooking onto this event allows you to react to the button click and show your privacy policy.

Upon clicking "View Guidelines", the component will automatically open a new window and display guidelines for taking a selfie. The onViewGuidelines event will also fire, allowing you to run additional code if needed.

Upon clicking "Next", the onProceed event will fire.

Initialization

The prepare component can be initialized using the following code:

HTML

<div id='prepare'></div>

JavaScript

// Option 1: Passing an id
var component = new Sybrin.Biometrics.PrepareComponent({ 
    id: 'prepare',
});

// Option 2: Passing a DOM element
var element = document.getElementById('prepare');
var component = new Sybrin.Biometrics.PrepareComponent({ 
    element: element
});

component.initialize();

The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.

Please note that 'prepare' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.

During initialization, the prepare component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:

Required:

• id (string): ID of the element you wish to use for component initialization. Not required if element is passed.

• element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.

Warning: Initialization will fail if the intended host element does not exist yet.

Always ensure that the initialize function is only called after the DOM is loaded.

Destruction

The prepare component may be removed from the UI by calling the destroy() function on it.

Example:

component.destroy();

Events

The prepare component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

• onProceed()

• onViewPrivacyPolicy()

• onViewGuidelines()

On Proceed

This function is called when the "Next" button is clicked. To hook onto the event, you may use the following code:

component.onProceed = function() {
    console.log('Proceed clicked!');
}

No parameter is passed to this function call.

On View Privacy Policy

This function is called when the "View Our Privacy Policy" button is clicked. To hook onto the event, you may use the following code:

component.onViewPrivacyPolicy = function() {
    console.log('Privacy Policy clicked!');
}

No parameter is passed to this function call.

On View Guidelines

This function is called when the "View Guidelines" button is clicked. To hook onto the event, you may use the following code:

component.onViewGuidelines = function() {
    console.log('View Guidelines clicked!');
}

No parameter is passed to this function call.

Styling

The prepare component is structured a follows:

<div class="sybrin-biometrics-container">
    <div class="sybrin-biometrics-halves">
        <div class="sybrin-biometrics-half">
            <div class="sybrin-biometrics-block sybrin-biometrics-privacy-block">
                <div class="sybrin-biometrics-block-icon">
                </div>
                <div class="sybrin-biometrics-block-prompt">
                    Your selfie <b>will be encrypted</b> and stored in our digital vault.
                </div>
                <button class="sybrin-biometrics-block-button sybrin-biometrics-privacy-button">
                    View Our <b>Privacy Policy</b> 
                </button>
            </div>
        </div>
        <div class="sybrin-biometrics-half">
            <div class="sybrin-biometrics-block sybrin-biometrics-guidelines-block">
                <div class="sybrin-biometrics-block-icon">
                </div>
                <div class="sybrin-biometrics-block-prompt">
                    Take the <b>perfect selfie</b>.
                </div>
                <button class="sybrin-biometrics-block-button sybrin-biometrics-guidelines-button">
                    View <b>Guidelines</b> 
                </button>
            </div>
        </div>
    </div>
    <div class="sybrin-biometrics-button-section">
        <button class="sybrin-biometrics-next sybrin-biometrics-flow-button">Next</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the prepare component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.

Styling implementation example:

HTML

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

CSS

styles.css

.sybrin-biometrics-flow-button {
    background: #963296;
    border: 2px solid #963296;
}

Before Styling

After Styling