Skip to main content
Github Repository: https://github.com/KlipFit/kleep-spm

​
Installation K

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.
  1. Add the following package: https://github.com/KlipFit/kleep-spm
  2. 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.
parameterprioritydescription
productIDrequiredYou product ID
retailerNamerequiredName of the retailer
customerIDoptionalCRM identifier, used for analytics
trackingIDoptionalUser 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.
parameterprioritydescription
productIDrequiredYou product ID
retailerNamerequiredName of the retailer
customerIDoptionalCRM identifier, used for analytics
trackingIDoptionalID 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.
parameterprioritydescription
eventNamerequiredName of the event to track
paramsoptionalInfo associated to the event
import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)
We want to track 3 events:
eventNameTrigger
product_viewedUpon PDP viewed
product_added_to_cartUpon product added to the cart
checkout_completedUpon order confirmation after the payment
product_viewed Untitled Example 
{
		productId: str
}
product_added_to_cart Untitled 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 Untitled 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"
				}
	    }
	    ...
    ],
}