Version: Next

IOS-SwiftUI

Mobile integrations are quite similar to Web's, it should use WebView instead of the iframe element. You can almost use all the functions that is mentioned in the Web section. Main difference of the integration is that you need to tell the app explicitly to allow taking photo or using gallery to choose a photo.

Note: Do not create different WebViews for Makeup and Nailpolish solutions. They should be using the same WebView.

Communication with the Plugin/Remote Control#

The function calls to manipulate/customize the Plugin is the same that of Web version. There is only slight tweaks in invoking them due to the platform differences as you can can see the below.

Please remember that you can call the functions only after the initial load of WebView, just like the way it was in Web.

note

If you are already using our Template Engine on Landing Page Integration, you might not need them at all. They are only needed to control the Plugin remotely.

// Function that executes JavaScript code.
func injectJS(command: String){
    // wkWebView are supposed to be declared here or in outer scope to be accessible.
    wkWebView?.evaluateJavaScript(command)
}

// Apply the product with unique product_code.
func applyProductWithCode(v: View?) {
    // Get the unique product code when button is clicked, it's up to your own preference.
    // E.g., it can be retrieved from a "tag" that's set on button.
    let productCode = "P_001";
    injectJS(command: "postMessage(JSON.stringify({applyProductWithCode:{product_code:'\(productCode)'}}),'*')")
}

// Apply the product by its category and key values.
func applyProductWithNameAndCategory(v: View?) {
    // Values are just examples, you need to retrieve them by selected product/button.
    let categoryName = "Lipstick"
    let fullProductName = "'\(brandName)' '\(productName)' '\(productColor)'"
    injectJS(command: "postMessage(JSON.stringify({applyProductWithNameAndCategory:{category: '\(categoryName)', key: '\(fullProductName)'}}),'*')")
}

// Remove/clear any Makeup that is currently available.
func removeProduct() {
    injectJS(command: "postMessage(JSON.stringify({removeProduct:true}),'*')")
}

caution

Provide camera permission to capture photo

Result:

Screenshot

You can request sample project from here.