Client side user view

The next step is to load the Yoti client SDK. Here we describe how to launch the web client.

Web client

In the previous section we saw how to create a request, which returns:

• Session ID

• Session Token

We then use these to construct a URL which loads the Yoti Client SDK. The URL can be used in the following ways:

• Within an iframe on your webpage

• As a link on your webpage

• As a link shared securely with a user

The example below demonstrates the use of an iframe:

Once the Yoti Client SDK has launched it will take the user through the ID document capture flow.

Please note: allow="camera" is required when using Yoti Identity verification on mobiles (web or native), and is serving the website over HTTPS. For the best user experience, the height of the iframe is recommended to set to 100vh and the parent height to 100% .

Event notifications (Post messaging)

Yoti recommend using POST messaging if you would like to be notified for one of the following situations :

• When the iFrame flow has successfully completed

• If an error occurs during the flow. See below for full error list.

A POST message for either of these events is structured as follows:

Below is a javascript example that can be used to listen to these messages.

Please note if a success URL or error URL is supplied as part of the session preferences then the iFrame will redirect after button click at the end of the flow. To utilize POST messaging, a success URL and error URL should be omitted.

Manual launch - iFrame

Step 1: Render the Iframe with just the base Yoti URL, without the URL parameters:

https://api.yoti.com/idverify/v1/web/index.html

Step 2: Using the postMessage JavaScript functionality the session will be launched with the correct configuration, posting the following

Step 3: User proceeds as normal. No other implementation changes are required to enable this functionality.

In-session feedback

OCR failure on the document is a good sign that there’s something wrong with the submission.

Yoti will process the image and provide feedback to the user based on the result of the image capture. In unsuccessful prompting the user to try to upload once again and why if unsuccessful.

In session feedback should help:

• Notify the user something is wrong with the submission

• Provide the user with a chance to re-upload the document within the same session

• Increase number of successful checks

By default Yoti will allow 1 extra attempt. The screen that will be shown to the user on unsuccessful attempts is:

The user flow is as follows:

1. The user will select document type and country.

2. The user will upload / take a photo of the document.

3. If the document can be OCR’d it will go through.

4. If it cannot due to user error, they will be asked to retry or change their document type.

If the user has reached their maximum attempts the session will end there.

Reclassification

If the wrong document is uploaded Yoti will attempt to reclassify the document. That means, that if the submitted document type or / and country would be different from the ones user selected Yoti will save it under the detected one if the data is extracted successfully.

Translation

Yoti Identity verification has configuration settings to change the language of the information displayed to the client.

Supported languages are:

• American English 🇺🇸

• Arabic (العربية) 🇦🇪

• Brazilian Portuguese (português brasileiro) 🇧🇷

• Bosnian (bosanski) 🇧🇦

• Canadian English 🇨🇦

• Chinese Singapore (Simplified) (简体中文) 🇸🇬

• English 🇬🇧

• Czech (čeština) 🇨🇿

• Danish (Dansk) 🇩🇰

• Dutch (Nederlands) 🇳🇱

• Finnish (Suomi) 🇫🇮

• French (Français) 🇫🇷

• German (Deutsch) 🇩🇪

• Greek (Ελληνικά) 🇬🇷

• Hindi (हिन्दी) 🇮🇳

• Hungarian (Magyar) 🇭🇺

• Indonesian (Bahasa Indonesia) 🇮🇩

• Italian (Italiano) 🇮🇹

• Japanese (日本語) 🇯🇵

• Latin American Spanish (Español latinoamericano)

• Malay (Bahasa Melayu) 🇲🇾

• Norwegian Bokmål (Norsk bokmål) 🇳🇴

• Polish (polski) 🇵🇱

• Romanian (Română) 🇷🇴

• Russian (русский) 🇷🇺

• Serbian (Latin)

• Swedish (Svenska) 🇸🇪

• Tamil (தமிழ்)

• Thai (ภาษาไทย) 🇹🇭

• Turkish (Türkçe) 🇹🇷

• Vietnamese (Tiếng Việt) 🇻🇳

For information on how to do this please go to Client preferences.

Hint See this page for information on integrating our native SDKs.

Error codes