Web

Use the Mati Web SDK to add a Mati verification flow to your website.

Code snippet

The Mati Web SDK is a pre-built UX that can be integrated within seconds into any website, optimized for desktop and mobile, with just a few lines of code:

<script src="https://web-button.mati.io/button.js"></script>
 <mati-button
  clientId="YOUR_CLIENT_ID" // from your Mati dashboard
  flowId="YOUR_FLOW_ID" // from your Mati dashboard
  color="#505DED" // to setup main color of buttons in your flow
  metadata='{"user_id":"1234778", "fixedLanguage":"es"}' // custom data 
 />

📘

Custom Color

The color parameter supports the following options:

  • blue
  • green
  • red
  • pink
  • orange
  • yellow
  • Specific color in HEX format (for example #505DED,
    )

Metadata

Note that you should pass a metadata string as previously shown so you know which user is being verified. This metadata string is a JSON object that will be sent in all our Webhook callbacks for that specific verification. As it is a custom JSON object you can define the tags and values that you need.

In your metadata strings you can pass:

  • email
  • fixedLanguage: You can fix the selected language and hide user language selection: use the locale code for the language value (for example, es for Spanish)

For any other information you want to send as metadata, feel free to use any characters 0-9, A-Z, a-z.

Callback events

The following javascript events can be used to take control (show a message, hide the button, redirect the user, etc) when the user has left or completed the verification flow.

const button = document.getElementById("mati-button");

// setup callbacks
button.addEventListener('mati:loaded', ({ detail }) => {
  console.log('loaded payload', detail)
});
button.addEventListener('mati:userFinishedSdk', ({ detail }) => {
  console.log('finished payload', detail)
});
button.addEventListener('mati:exitedSdk', ({ detail }) => {
  console.log('exited payload', detail)
});

Direct Link

You can also send a verification direct link to your users through email or the messaging app you prefer, no website needed!

For example:

https://signup.getmati.com/?merchantToken=<YOUR_CLIENT_ID>&flowId=<YOUR_FLOW_ID>&metadata={"fixedLanguage":"es","email":"[email protected]","Client":"id3452"}

React Examples

The Mati Web SDK is compatible with different frameworks: React, Angular and vanilla JavaScript.

Web SDK Compatibility

The Mati Web SDK is compatible with most browsers with TLS version 1.2+, whether on desktop or mobile platforms. Further compatibility issues stem from differences in Java versions.

The following table lists known browser compatibility. Compatibility is divided across 4 subjects:

  • Desktop (Liveness+Document Upload) — Can the Web SDK access the camera and microphone and can upload documents from the desktop browser
  • Desktop (Document Upload) — Can the Web SDK upload documents from the desktop browser
  • Desktop (Dashboard, Flow Builder) — Can the Web SDK access the Mati Dashboard and use the Flow Builder
  • Mobile — Can the Web SDK be used on the mobile browser

The compatibility is given one of the following classifications:

  • Supported
    — The SDK functions as intended
  • Unsupported
    — The SDK may work only in a limited capacity, such as only some checks work, not access to camera, or the layout formatting is incorrect
  • Failed
    — The SDK fails to load or crashes
  • NA — Not applicable; the browser cannot be installed
BrowserVersionDesktop
(Liveness+Document Upload)
Desktop
(Document Upload)
Desktop
(Dashboard, Flow Builder)
Mobile Platform
Microsoft Internet Explorer≤10Unsupported
Failed
Failed
NA
≥11Unsupported
Unsupported
: formatting is incorrect
Failed
Supported
Microsoft EdgeAnySupported
Supported
Supported
Supported
Mozilla Firefox21Failed
Failed
Failed
NA
22-28Unsupported
Unsupported
: formatting is incorrect
Failed
NA
90Supported
Supported
Supported
Supported
Google Chrome≤22Failed
Failed
Failed
Failed
23Unsupported
Unsupported
: formatting is incorrect
Failed
NA
37-39Unsupported
Unsupported
: formatting is incorrect
Unsupported
: Flow builder crashes
NA
92Supported
Supported
Supported
Supported
Android, Default Browser≤4.4.4 (Jellybean)NA NA NA Unsupported
: No access to camera for biometric verification
≥5.5 (Lollipop)NA NA NA Supported
iOSiOS version: ≤4
Safari version: any
NA NA NA Failed
iOS version: ≥5
Safari version: ≥5
NA NA NA Supported
iOS version: ≥6
Safari version: ≥6
Chrome version ≥92
NA NA NA Supported
MacOS Safari BrowserOS X version: ≤10.8
Safari version ≤6
Failed
Failed
Failed
NA
OS X version: ≥10.9
Safari version 7.1
Unsupported
Unsupported
: formatting is incorrect
Failed
NA
OS X version: ≥10.9
Safari version 10.1
Unsupported
Supported
Unsupported
: Flow Builder crashes
NA
OS X version: ≥10.9
Safari version ≥13.1
Unsupported
Supported
Supported
NA
Windows PhoneWindows Phone version: ≤8.1
IE version ≤11
Chrome version: ≥92
NA NA NA Supported
Windows Phone version: ≤11 v1151, v1607, v1703, v1709
IE version ≤11
Chrome version: ≥92
NA NA NA Supported

Did this page help you?