title |
---|
iOS |
We provide Swift SDK distributed by CocoaPods for your iOS apps to present AR-sessions, easily.
To integrate Meshkraft into your Xcode project using CocoaPods, add it to your Podfile
:
pod 'Meshkraft'
Then, run the following command:
$ pod install
-
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.
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()
}
}
Start a VTO session with product SKU:
Meshkraft.meshkraft().startVTOSession(productSKU: "YOUR_PRODUCT_SKU")
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" |
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)
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.
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.
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)
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.
You can check if AR is supported on the device:
Meshkraft.isARSupported()