Quick start

Easiest way to integrate Metamap into your page is to use Metamap button.

Integration demo video

Video in Spanish

Import scripts

Add following script to your page.

<script src="https://web-button.metamap.com/button.js"></script>

Add button

Add Metamap button to your page.

<metamap-button
  clientid="your_client_id"
  flowId="your_flow_id"
/>

Replace your_client_id and your_flow_id with ids from your dashboard.

How do I obtain client and flow id?

Add callback listeners

const metamapButton = document.querySelector('metamap-button');

metamapButton.addEventListener('metamap:userFinishedSdk', ({ detail }) => {
  console.log('finished payload', detail)
});

metamapButton.addEventListener('metamap:exitedSdk', ({ detail }) => {
  console.log('exited payload', detail)
});

const metamapButton = document.querySelector('metamap-butto');

metamapButton.addEventListener('metamap:userFinishedSdk', ({ detail }) => {
  console.log('finished payload', detail)
});

metamapButton.addEventListener('metamap:exitedSdk', ({ detail }) => {
  console.log('exited payload', detail)
});

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.

To integrate our SDK into your mobile app, we highly recommend using our native Mobile SDKs for a seamless experience, since we can't assure the same experience when implementing the WebSDK via WebView, as it depends on how it is implemented on your platform.

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