Ionic
Since Ionic already uses a web view, integrating the widget is straightforward.
This documentation provides an example of integrating the widget using Ionic with React.
1. First, add the required permissions:
Android
In your AndroidManifest.xml file:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />iOS
In your Info.plist file:
<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSFileProviderDomainUsageDescription</key>
<string></string>2. Add the ressource in your index.html
<head>
<!-- ... -->
<script src="https://cdn.test.saphere.ai/saphere-scan/js/main.min.js"></script>
</head>3. Create a new React component, named Module
import React from "react"
declare global {
interface Window { Handler: any }
}
export class Module extends React.Component {
private readonly _options = {
createMeasure: {
strategy: "delegate",
url: "https://cdn.test.saphere.ai/saphere-scan/js/main.min.js",
headers: { Authorization: "Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" } }
}
componentDidMount() {
window.Handler.load("#container", this._options)
}
render = () => <div id="container" style={{ height: "100vh" }}></div>
}
export default Module
