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
-
Import
Meshkraft
framework header in yourAppDelegate
import Meshkraft
-
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()