Web

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"}

React Examples

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

• Create React App
• Next.js

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