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
BrowserVersionDesktop
(Liveness+Document Upload)
Desktop
(Document Upload)
Desktop
(Dashboard, Metamap 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
: Metamap 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
: Metamap 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