Custom API Integration – Size Recommendation

This guide is for developers integrating the AI size recommendation system into custom websites, mobile apps, or headless commerce solutions.

Recommended Architecture

     
  • Frontend opens AI UI via iframe or redirect
  •  
  • User completes measurement flow
  •  
  • AI returns recommended size
  •  
  • Frontend applies business logic

Iframe Integration

<iframe
  src="https://measure.sadiq.ai/size-ui-v2"
  allow="camera"
  style="width:420px;height:620px;border:none;"
></iframe>

PostMessage Response

{
  action: "closeModalAndHighlight",
  recommendedSize: "M"
}

JavaScript Listener

window.addEventListener("message", function (event) {
  if (!event.origin.includes("measure.sadiq.ai")) return;

  if (event.data.action === "closeModalAndHighlight") {
    console.log("Recommended size:", event.data.recommendedSize);
  }
});

Use Cases

     
  • Headless commerce
  •  
  • Mobile apps (WebView)
  •  
  • Custom React / Vue frontends