Mobile SDK - iOS - Kleep Docs

Github Repository: https://github.com/KlipFit/kleep-spm

Installation

This process needs to be followed only once, the first time you need to install the SDK in your project. Please refer to the Update section to see the instructions for subsequent updates.

Add the following package: https://github.com/KlipFit/kleep-spm
Change dependency rule to: up to next major version

Permissions

Add the following permission to your project on info.plist: NSCameraUsageDescription

Usage

Method 1: `requestSize`

This method allows to implement the logic of the CTA.

parameter	priority	description
productID	required	You product ID
retailerName	required	Name of the retailer
customerID	optional	CRM identifier, used for analytics
trackingID	optional	User ID used by external tracking solution

Logic schema This schema explains how to update the CTA opening Kleep. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Implementation example

import Klipfit

struct ContentView: View {
    @State var isOpenView = false
        
    var body: some View {
        VStack {
            Spacer()
            Button("Open Kleep") {
                isOpenView = true
            }
            Spacer(minLength: 40)
            
            Button("obtenir la taille") {
                Klipfit.shared.requestSize(productID: String, retailerName: String, trackingID: String, customerID: String) { kleepResult in
                    switch kleepResult {
                    case .notSupported:
		                    // Hide CTA
                        print("NotSupported")
                    case .noRecommendationYet:
		                    // Display CTA with neutral label
                        print("NoRecommendationYet")
                    case .recommendationFound(let result):
		                    // Display CTA with size reco
                        print("RecommendationFound: ", result)
                    }
                }
            }
	            Spacer()
        }
        .sheet(isPresented: $isOpenView) {
            KlipFitFindSizeView { result, variantID in 
								// addToCart(variantID)
	          }
        }
    }
}

Method 2: `loadView`

This method is called when the CTA is clicked. It allows to load the different screens. The developper integrating the SDK should embed them into a bottom sheet.

parameter	priority	description
productID	required	You product ID
retailerName	required	Name of the retailer
customerID	optional	CRM identifier, used for analytics
trackingID	optional	ID used by external tracking provider

Implementation example

struct KlipFitFindSizeView: UIViewControllerRepresentable {
		
		public var onResult: KleepOnResultCompletion

    func makeUIViewController(context: Context) -> KlipftNavigationController {
        guard let viewController =
        KlipftNavigationController.loadView(
                productID: String,
                retailerName: String,
                language: KleepLanguageCode, // .fr .en .es .it .pt .nl 
                trackingID: "",
                customerID: "",
                stocks: [String : Bool]?,
                onResult: onResult
        )
        else {
            fatalError("ViewController not implemented in storyboard")
        }
        viewController.navigationBar.isHidden = true
        return viewController
    }
    func updateUIViewController(_ uiViewController: KlipftNavigationController, context: Context) {
    }
    typealias UIViewControllerType = KlipftNavigationController
}

Method 3: `track`

This method allows to track custom events.

parameter	priority	description
eventName	required	Name of the event to track
params	optional	Info associated to the event

import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)

We want to track 3 events:

eventName	Trigger
`product_viewed`	Upon PDP viewed
`product_added_to_cart`	Upon product added to the cart
`checkout_completed`	Upon order confirmation after the payment

product_viewed Parameters (CSV) Example

{
		productId: str
}

product_added_to_cart Parameters (CSV) Example

{
    productId: str,
    variantId: str,
    cart: [
	    {
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
				sku: "XYZ",
		    size: "S",
		    quantity: 2,
		    price: {
						amount: "50",
				    currencyCode: "EUR"		    
		    }
	    },
	    {
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
		    sku: "XYZ",
		    size: "S",
		    quantity: 1,
		    price: {
				    amount: "40",
				    currencyCode: "USD"
				}
	    }
	    ...
    ],
}

checkout_completed Parameters (CSV) Example

{
    orderId: "000001",
    cart: [
	    {
		    lineItemId: "000001#1",
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
				sku: "XYZ",
		    size: "S",
		    quantity: 2,
		    price: {
						amount: "50",
				    currencyCode: "EUR"		    
		    }
	    },
	    {
			  lineItemId: "000000#2",
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
		    sku: "XYZ",
		    size: "S",
		    quantity: 1,
		    price: {
				    amount: "40",
				    currencyCode: "USD"
				}
	    }
	    ...
    ],
}

Welcome

CMS

Mobile

Dashboard

Data

Privacy

Mobile SDK - iOS

Installation

Permissions

Usage

Method 1: `requestSize`

Method 2: `loadView`

Method 3: `track`

​Installation

​Permissions

​Usage

​Method 1: requestSize

​Method 2: loadView

​Method 3: track

Installation

Permissions

Usage

Method 1: `requestSize`

Method 2: `loadView`

Method 3: `track`