Web
Use the MetaMap Web SDK to add a metamap to your website.
Code snippet
The MetaMap 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 Metamap dashboard
flowId="YOUR_FLOW_ID" // from your Metamap dashboard
color="#505DED" // to setup main color of buttons in your metamap
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 metamap.
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"}
Examples
The MetaMap Web SDK is compatible with different frameworks: React, Angular and vanilla JavaScript.
Web SDK Compatibility
The MetaMap 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, MetaMap Builder) — Can the Web SDK access the MetaMap Dashboard and use the MetaMap 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
Browser | Version | Desktop (Liveness+Document Upload) | Desktop (Document Upload) | Desktop (Dashboard, Metamap Builder) | Mobile Platform |
---|---|---|---|---|---|
Microsoft Internet Explorer | ≤10 | Unsupported | Failed | Failed | NA |
≥11 | Unsupported | Unsupported : formatting is incorrect | Failed | Supported | |
Microsoft Edge | Any | Supported | Supported | Supported | Supported |
Mozilla Firefox | 21 | Failed | Failed | Failed | NA |
22-28 | Unsupported | Unsupported : formatting is incorrect | Failed | NA | |
90 | Supported | Supported | Supported | Supported | |
Google Chrome | ≤22 | Failed | Failed | Failed | Failed |
23 | Unsupported | Unsupported : formatting is incorrect | Failed | NA | |
37-39 | Unsupported | Unsupported : formatting is incorrect | Unsupported : Metamap builder crashes | NA | |
92 | Supported | 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 | |
iOS | iOS 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 Browser | OS 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 : Metamap Builder crashes | NA | |
OS X version: ≥10.9 Safari version ≥13.1 | Unsupported | Supported | Supported | NA | |
Windows Phone | Windows 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 |
Updated about 1 month ago