SDK Integration

You can add MetaMap products by adding the MetaMap web button to your website, or by adding a link.

Watch our video to better understand how to configure your dashboard, use our button, and how to interpret our Webhook callbacks. This process is broadly applicable to all our SDKs.

Adding the MetaMap Web Button

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:

📘

MetaMap Parameter Names

metamap-button and mati-button can be used interchangeably in source.

There are no plans to deprecate mati-button or mati parameters.

<script src="https://web-button.mati.io/button.js"></script>
 <metamap-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
  textcolor="#FFFFFF" // to setup text 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("metamap-button");

// setup callbacks
button.addEventListener('mati:loaded', ({ detail }) => {
  console.log('loaded payload', detail)
});
button.addEventListener('mati:userStartedSdk', ({ detail }) => {
  console.log('started 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"}

There are also a couple of parameters that you can add to the Direct Link to redirect the final user once they're finished with their verification process.

• Opens new tab with url set in redirect parameter of the link:

https://signup.getmati.com/?merchantToken=<YOUR_CLIENT_ID>&flowId=<YOUR_FLOW_ID>&redirect=<YOUR_URL>

• Opens url set in redirect parameter of the link with appropriate target set in target parameter of url (_self → same tab, _blank → new tab):

https://signup.getmati.com/?merchantToken=<YOUR_CLIENT_ID>&flowId=<YOUR_FLOW_ID>&redirect=<YOUR_URL>&target=<YOUR_TARGET>

Acceptable values for target: _blank, _self, _top, _parent

Overall, these are the accepted additional GET parameters for the Direct Link:

• &metadata={"fixedLanguage":"es","user_id":"001"} - Any key-value pair in a JSON format, up to 14 kb of information. With the direct link, the key "fixedLanguage" in the metadata, will set the experience default language to the one you set in the value following the ISO 639-1 abbreviation standard.
• &color=000000 - Any hexadecimal value for the color of the buttons inside MetaMap's UI.
• &textColor=FFFFFF - Any hexadecimal value for the color of the text inside MetaMap's UI.
• &redirect=<YOUR_URL>&target=<YOUR_TARGET> - A URL and a target value to redirect the user once they're finished with their process.

Examples

The MetaMap Web SDK is compatible with different frameworks.

• JavaScript
• Angular
• React
• Vue

You can download and run the examples as per our Web Application Examples page, or you can test the examples we have available in CodeSandbox.

• React App
• Angular App
• Next.js (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