Skip to main content

Find My Perfect Size

The Kleep button visibility on the PDP is managed automatically during cartridge initialization:
  1. Enable isKleepRecommendationEnabled — this is the master switch.
  2. The cartridge dynamically shows/hides the button via middleware on the Product-Show controller action.
  3. An endpoint call to Kleep with the ProductID determines whether the button appears.
  4. Customize visibility conditions in your code to match your business rules.
image.png Clicking the CTA opens an iframe using: ProductID, KleepCustomerID, the retailer identifier (the kleepRetailerUUID site preference, passed as the domain parameter), and language. After the sizing flow, the user receives a recommendation. Clicking “Add to cart” sends an event from the iFrame and the selected size is added to cart.

Dynamic Button Label

After closing the popin, the button label updates:
  • Before: “Find My Perfect Size”
  • After: “Recommended Size: S”
image.png The label persists via localStorage (no cookies or backend session variables).

Tracking

Analytics data is sent to Kleep automatically when:
  • A product is viewed (PDP load or variation change)
  • A product is added to cart (PDP)
  • An order reaches the end of checkout
  • An order is confirmed
After installation, verify there are no JavaScript console errors on PDP, checkout, and confirmation pages.

Anti-Bracketing

Coming soon.