Web Component

Setup Steps

1. Add a container to your HTML

<div id="container"></div>

2. Style the container

#container {
  height: 100vh;
  aspect-ratio: 9/16;
  margin: auto;
}

3. Include the following metadata

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"/>

4. Load the script

<script src="https://cdn.test.saphere.ai/saphere-scan/js/main.min.js"></script>

Once the script is completely loaded, you can access a new global object named Handler:

const { Handler } = window

If you load the script asynchronously, you can retrieve this handler by listening to handler-ready event:

window.addEventListener("handler-ready", ({ detail: { Handler } }) => {
    console.log(Handler)
})

5. Mount the widget

Handler.load("#container", options)

or by using DOM element itself :

const divElt = document.getElementById("container")
Handler.load(divElt, options)

6. Unmount when finished

await Handler.destroy()

‍

‍

‍

‍