iOS

We provide Swift SDK distributed by CocoaPods for your iOS apps to present AR-sessions, easily.

Installation

To integrate Meshkraft into your Xcode project using CocoaPods, add it to your Podfile:

pod 'Meshkraft'

Then, run the following command:

$ pod install

Usage

Initialization

1. Import Meshkraft framework header in your AppDelegate

   import Meshkraft

2. Add the following to your AppDelegate application:didFinishLaunchingWithOptions: method.

   Meshkraft.setApiKey("YOUR_API_KEY")

   Make sure to replace YOUR_API_KEY with your application token.

AR Session

Import Meshkraft framework header

import Meshkraft

Start an AR session with product SKU:

Meshkraft.meshkraft().startARSession(productSKU: "YOUR_PRODUCT_SKU")

To receive model loading status notifications , conform to MeshkraftDelegate protocol:

Meshkraft.meshkraft().delegate = self

extension ViewController : MeshkraftDelegate {

    func modelLoadStarted() {
        print("load started")
        activityIndicator.startAnimating()
    }

    func modelLoadFinished() {
        print("load finished")
        activityIndicator.stopAnimating()
    }

    func modelLoadFailed(message: String) {
        print("load failed message: \(message)")
        activityIndicator.stopAnimating()
    }

}

VTO Session

Start a VTO session with product SKU:

Meshkraft.meshkraft().startVTOSession(productSKU: "YOUR_PRODUCT_SKU")

VTO Configuration Options

MeshkraftVTOConfig

Property	Type	Description	Example
disableUI	Bool?	Hide default UI elements	false
showBanner	Bool?	Display add to cart banner	true
bannerButtonText	String?	Custom button text	"Add to Cart"
logoUrl	String?	Custom logo URL	"https://..."
useWatermark	Bool?	Show watermark in screenshots	true
accentColor	String?	Custom accent color (hex)	"#007AFF"

VTO with Add to Cart Banner

You can configure the VTO experience with an add to cart banner and handle user interactions:

// 1. Set up VTO delegate to handle add to cart events
Meshkraft.meshkraft().vtoDelegate = self

// 2. Configure VTO with banner settings
let config = MeshkraftVTOConfig(
    disableUI: false,
    showBanner: true,
    bannerButtonText: "Add to Cart",
    logoUrl: "https://example.com/logo.png",
    useWatermark: true,
    accentColor: "#007AFF"
)

// 3. Start VTO session with configuration
Meshkraft.meshkraft().startVTOSession(productSKU: "YOUR_PRODUCT_SKU", config: config)

Handling Add to Cart Events

To receive add to cart events, implement the MeshkraftVTODelegate protocol in your view controller:

extension ViewController: MeshkraftVTODelegate {
    func vtoAddToCartClicked(productSKU: String, message: [String: Any]?) {
        print("Add to cart clicked for SKU: \(productSKU)")
        
        // IMPORTANT: Implement your add to cart logic here
        // This is where you integrate with your own cart system
        addToCart(productSKU: productSKU)
    }
    
    private func addToCart(productSKU: String) {
        // Example implementation - replace with your actual cart logic
        
        // 1. Add to your cart system/database
        CartManager.shared.addItem(sku: productSKU)
        
        // 2. Update UI
        showAddToCartConfirmation(for: productSKU)
        
        // 3. Track analytics
        Analytics.track("add_to_cart", properties: [
            "product_sku": productSKU,
            "source": "vto"
        ])
        
        // 4. Navigate to cart or show success message
        navigateToCart()
    }
}

Important: The SDK only provides the event notification when users click the add to cart banner. You are responsible for implementing the actual add to cart functionality that integrates with your app's cart system, API calls, analytics tracking, and user experience flow.

Camera Permissions

The VTO session requires camera access, so make sure to add the necessary permissions to your Info.plist file. Add the following keys with their respective descriptions:

<key>NSCameraUsageDescription</key>
<string>Your description for why the app needs camera access.</string>

Replace "Your description for why the app needs camera access." with a suitable explanation for your users.

Common VTO Examples

Basic VTO with Add to Cart:

let config = MeshkraftVTOConfig(showBanner: true, bannerButtonText: "Add to Cart")
Meshkraft.meshkraft().startVTOSession(productSKU: "your-sku", config: config)

VTO without Banner:

Meshkraft.meshkraft().startVTOSession(productSKU: "your-sku")
// or explicitly disable banner
let config = MeshkraftVTOConfig(showBanner: false)
Meshkraft.meshkraft().startVTOSession(productSKU: "your-sku", config: config)

Custom Styled VTO:

let config = MeshkraftVTOConfig(
    showBanner: true,
    bannerButtonText: "Buy Now - $99.99",
    logoUrl: "https://example.com/logo.png",
    useWatermark: false,
    accentColor: "#007AFF"
)
Meshkraft.meshkraft().startVTOSession(productSKU: "your-sku", config: config)

Availability API

You can check the availability of the Meshkraft AR or VTO service for specific SKUs by calling:

Meshkraft.meshkraft().checkAvailability(sku: "SKU1,SKU2", completion: { (result: AvailabilityResult?, errorMessage) in
    if let result = result {
        for (sku, availability) in result {
            print("SKU: \(sku), AR Available: \(availability.ar), VTO Available: \(availability.vto)")
        }
    } else {
        print("Failed to check availability: \(errorMessage ?? "Unknown error")")
    }
})

The AvailabilityResult is a dictionary where the key is the SKU and the value is a MeshkraftAvailability object containing ar and vto flags indicating the availability of AR and VTO sessions for the given SKU.

Check Device Support

You can check if AR is supported on the device:

Meshkraft.isARSupported()