Magento – Size Recommendation Integration

This guide explains how to integrate the AI-powered size recommendation tool into Magento 2 product pages. The tool works with configurable products using size attributes.

Integration Flow

• Customer clicks Find My Size
• AI modal opens
• Measurements are captured
• Recommended size is returned
• Magento size swatch is auto-selected

Add the Button

Add this button inside catalog_product_view.xml or product template:

<button id="ai-recommendation-btn" class="action primary">
  Find My Size
</button>

Modal HTML

<div id="ai-overlay"></div>
<div id="ai-modal">
  <iframe id="ai-iframe"></iframe>
</div>

Modal CSS

#ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9998;
  display: none;
}

#ai-modal {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 420px;
  height: 620px;
  background: #fff;
  border-radius: 20px;
  z-index: 9999;
  display: none;
}

JavaScript (Magento Compatible)

<script>
require(["jquery"], function ($) {

  $("#ai-recommendation-btn").on("click", function () {
    $("#ai-overlay, #ai-modal").show();
    $("#ai-iframe").attr(
      "src",
      "https://measure.sadiq.ai/size-ui-v2"
    );
  });

  $("#ai-overlay").on("click", closeAI);

  function closeAI() {
    $("#ai-overlay, #ai-modal").hide();
    $("#ai-iframe").attr("src", "");
  }

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

    closeAI();

    const size = event.data.recommendedSize;

    $(".swatch-attribute.size .swatch-option").each(function () {
      if ($(this).text().trim() === size) {
        $(this).trigger("click");
      }
    });
  });

});
</script>

Result

Magento automatically selects the recommended size swatch, updating price and availability without page reload.