iOS Webview API References

We use webView to communicate with the SDK. If you need any help to understand how we get webView or to check how to setup WebView and to initialize properly check the Setup Page.

iOS Webview Method

All communication is achieved by sending post messages using the webView

var payload = payloadData
payload["type"] = type
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
    let jsonString = String(data: jsonData, encoding: .utf8) {
    let script = "window.postMessage(\(jsonString), '*');"
    webView.evaluateJavaScript(script, completionHandler: nil)
}

We just send different payloads and types for different functionalities.

Payloads

To get started, we send the type asinitialize type and payload with the desired settings. This adds the GlamAR SDK into the target container and configures it with the provided API key and optional configuration we sent through the payload.

let type = "initialize"
let payload: [String: Any] = [
  "type": type,
  "payload": [
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "ios",
  ]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
   let script = "window.postMessage(\(jsonString), '*');"
   webView.evaluateJavaScript(script, completionHandler: nil)
}

Initialization Payload

Name	Type	Description
apiKey	`string`	Your Access Key
platform	`string`	Platform you're targeting (e.g. web)
category	`string`	Supports lots of categories
parentDomain	`string`	bundle identifier or domain to check for whitelisting
configuration	`ConfigurationOptions`	Initialization configuration object

Following are all the configuration options that can passed under theoptions object.
Subcategories defined in overview section can be passed in the category parameter.

ConfigurationOptions

Name	Type	Description
global	`GlobalOptions`	Global options that customize sdk ui and camera options
ui	`UIOptions`	Loader and watermark configuration object
ar	`AROptions`	3D Modelviewer options

GlobalOptions

Name	Type	Description
openLiveOnInit	`boolean`	Skip landing and go directly to camera
disableClose	`boolean`	Hide the close button
disableBack	`boolean`	Hide the back button

Example

let type = "initialize"
let payload: [String: Any] = [
  "type": type,
  "payload": [
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "ios",
    "configuration": [
      "global": {
  "openLiveOnInit": true,
  "disableClose": false,
  "disableBack": false
}
    ]
  ]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

UIOptions

Name	Type	Description
loader	`LoaderOptions`	Loader configuration options
watermark	`WatermarkOptions`	Watermark configuration options

LoaderOptions

Name	Type	Description
disable	`boolean`	Disable loader screen
jsonData	`string`	Custom Lottie animation JSON URL
backgroundColor	`string`	Loader screen background color (HEX or RGB)

Example

let type = "initialize"
let payload: [String: Any] = [
  "type": type,
  "payload": [
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "ios",
    "configuration": [
      "loader": {
  "disable": false,
  "jsonData": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
  "backgroundColor": "#000000"
}
    ]
  ]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

WatermarkOptions

Name	Type	Description
text	`string`	Text shown next to watermark
fontColor	`string`	Color of watermark text
logo	`string`	URL for the watermark logo image

Example

let type = "initialize"
let payload: [String: Any] = [
  "type": type,
  "payload": [
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "ios",
    "configuration": [
      "watermark": {
  "text": "Water Mark Text",
  "fontColor": "#00ff00",
  "logo": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
}
    ]
  ]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

AROptions

Name	Type	Description
disable3DUI	`boolean`	Hide 3D model viewer UI

Example

let type = "initialize"
let payload: [String: Any] = [
  "type": type,
  "payload": [
    "apiKey": "YOUR_ACCESS_KEY",
    "platform": "ios",
    "configuration": [
      "ar": {
  "disable3DUI": false
}
    ]
  ]
]
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

Basic Example

let type = "initialize"
let payload: [String: Any] = {
  "apiKey": "YOUR_API_KEY",
  "platform": "ios",
  "parentDomain": "io.pixelbin.glamar.dev"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

Advanced Example (with Configuration)

let type = "initialize"
let payload: [String: Any] = {
  "apiKey": "YOUR_API_KEY",
  "platform": "ios",
  "category": "sunglasses",
  "parentDomain": "io.pixelbin.glamar.dev",
  "configuration": {
    "global": {
      "openLiveOnInit": true,
      "disableClose": false,
      "disableBack": false
    },
    "ui": {
      "loader": {
        "disable": false,
        "jsonData": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
        "backgroundColor": "#000000"
      },
      "watermark": {
        "text": "Water Mark Text",
        "fontColor": "#00ff00",
        "logo": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
      }
    },
    "ar": {
      "disable3DUI": false
    }
  }
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

applyBySku

Load any virtual try-on using applyBySku type and passing the relevant SKU Id

let payload: [String: Any] = {
  "type": "applyBySku",
  "payload": {
    "skuId": "your sku id"
  }
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

Parameters	Description	Options
skuId	A string that uniquely identifies the skuID to be applied.	Type: `string`

applyPatternByID

Apply a pattern using a pattern ID.

let payload: [String: Any] = {
  "type": "applyPatternByID",
  "payload": {
    "patternId": "your pattern id"
  }
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

Parameters	Description	Options
patternId	A string that uniquely identifies the pattern to be applied.	Type: `string`

clearSku

Clears the currently applied SKU.

let payload: [String: Any] = {
  "type": "clearSku"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

snapshot

Capture a snapshot of the current preview.

let payload: [String: Any] = {
  "type": "snapshot"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

comparison

Toggles comparison mode in AR widget.

let payload: [String: Any] = {
  "type": "comparison",
  "payload": {
    "options": "sliderUI",
    "value": "show"
  }
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

Parameters	Description	Options
options	Choose type of options for the comparison mode	Type: `string` Options: `sliderUItouch`
value	Show or hide comparison mode	Type: `string` Options: `showhide`

closePreview

Close the live preview.

let payload: [String: Any] = {
  "type": "closePreview"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

openLivePreview

Start a live Camera mode.

let payload: [String: Any] = {
  "type": "openLivePreview",
  "payload": {
    "mode": "imgTryOn",
    "imgURL": ""
  }
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

Parameters	Description	Options
mode	Whether you want to run live preview or image tryon. If you send `imgTryOn` in mode add proper url to `imgURL`	Type: `string` Options: `liveimgTryOn` Default: `live`
imgURL	A valid url to image you want to use	Type: `string`

pausePreview

Pause the live preview.

let payload: [String: Any] = {
  "type": "pausePreview"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

resumePreview

Resume the live preview.

let payload: [String: Any] = {
  "type": "resumePreview"
};
if let jsonData = try? JSONSerialization.data(withJSONObject: payload),
   let jsonString = String(data: jsonData, encoding: .utf8) {
  let script = "window.postMessage(\(jsonString), '*');"
  webView.evaluateJavaScript(script, completionHandler: nil)
}

WebView Events

Refer to Setup Page to understand how we can register to events listed

Event	Payload	Description
loading	None	Fired when the GlamAR module is initiated and the SDK proceeds with the loading process.
loaded	None	Fired when the GlamAR module is loaded.
opened	None	Fired when the GlamAR module is opened.
closed	None	Fired when the canvas is closed and the user returns to the main widget page.
camera-opened	None	Fired when the camera is opened.
camera-closed	None	Fired when the camera is closed.
camera-failed	None	Fired when the camera fails. This can occur if the user refuses to grant permission or the app is unable to retrieve the video stream normally.
photo-loaded	`Image` (base64), `Status` (success/failed)	Fired when a screenshot of the AR effect is successful or fails.
sku-applied	None	Fired when a given SKU effect is applied.
sku-failed	None	Fired when a given SKU is not applied successfully.
reset	None	Fired when all the effects are reset.
error	`Error`: Error information	Fired anytime an error occurs.
upload-started	None	Fired when the upload mode dialogue is shown.
upload-cancelled	None	Fired when the upload mode dialogue is canceled.
subscription-invalid	`string`: Reason	Fired when the subscription is found to be invalid or expired.

iOS Webview Method​

Payloads​

Initialization Payload

ConfigurationOptions

GlobalOptions

UIOptions

LoaderOptions

WatermarkOptions

AROptions

Basic Example

Advanced Example (with Configuration)

applyBySku​

applyPatternByID​

clearSku​

snapshot​

comparison​

closePreview​

openLivePreview​

pausePreview​

resumePreview​

WebView Events​

iOS Webview Method

Payloads

applyBySku

applyPatternByID

clearSku

snapshot

comparison

closePreview

openLivePreview

pausePreview

resumePreview

WebView Events