Iframe SDK Documentation

Ubble now supports an integration via iframe.

How to use

Include the SDK as a script tag

<script src="https://oos.eu-west-2.outscale.com/public-ubble-ai/iframe-sdk-0.0.1.js" type="application/javascript"></script>

We expect your page to implement a global method onUbbleReady that will be triggered when the SDK is loaded

function onUbbleReady() {

}

Initialise a new Ubble IDV object:

function onUbbleReady() {
  const ubbleIDV = new Ubble.IDV(elementId, options);
}

API

• IDV

new Ubble.IDV(elementId, options)

elementId: A string or DOM element

<div id="ubble"></div>

new Ubble.IDV('ubble', options);
new Ubble.IDV(document.getElementById('ubble'), options);

options: object

• width: Iframe width in px
• height: Iframe height in px
• allowCamera: Boolean, indicating whether you want to capture video inside the iframe. This is intended to be left at false if you redirect the users via sms redirection
• identificationUrl: Identification url (e.g. https://id.ubble.ai/identification-id)
• events:

• • onComplete(completeEvent): Event triggered when the user completes the identification

    {"status": "processing", redirectUrl: "https://your-redirect-url.com?identification_id=<ubble identification id>"}

• • onAbort(abortEvent): Event triggered when the user aborts the identification

    {"status": "aborted", "returnReason": "NO_DOCUMENT", redirectUrl: "https://your-redirect-url.com?identification_id=<ubble identification id>"}

Methods:

• destroy()

  const ubbleIDV = new Ubble.IDV('id', {
     events: {
         onComplete(event) {
              console.log(`Done with ubble flow: ${event}`);
              ubbleIDV.destroy()
         }
     }
  })
  

Full Example

const ubbleIDV = new Ubble.IDV("idv", {
    width: "500",
    height: "600",
    allowCamera: true,
    identificationUrl: "https://id.ubble.ai/11111111-1111-1111-1111-111111111111",
    events: {
      onComplete(event) {
        ubbleIDV.destroy();
      },
      onAbort(event) {
        ubbleIDV.destroy();
      }
    }
  });