Body-Type Size Guide

Open the body-type size guide from a button on your product page with LoopsAI.openSizeFinder — the shopper picks body type and measurements and gets a size recommendation.

The Size Guide turns "which size fits me?" into a short guided flow: the shopper confirms their gender, picks a body type, enters height & weight, and gets a size recommendation for the product they are viewing. Open it from a button on your product page.

There is one method for this:

window.LoopsAI.openSizeFinder({ productCode: "1010600-88244" });

Both fields are optional — window.LoopsAI.openSizeFinder() works too. When you omit them, the widget resolves the product (and its gender) from the current page URL against your catalog. window.LoopSmartAI.openSizeFinder(...) is the same method (legacy alias).

Not the same as suggestSize()

openSizeFinder is the full body-type guide (gender → body type → measurements). If you only need the simpler height + weight form, use suggestSize() instead.

Two experiences: inline or standalone

A single setting in the configurator (Open As) controls how the guide appears — the API call is identical either way:

Mode	What the shopper sees
Inside chat (`inline`, default)	The guide renders as an interactive card in the chat stream; the recommendation lands as a normal assistant message.
Standalone panel (`standalone`)	A self-contained panel opens bottom-right, independent of the widget's bubble / bottom-bar / sidebar mode. Nothing else is shown while it is open.

Recommended: call it from your own button

You own the control on the product page, and the only Loops AI touchpoint is one function call in your click handler.

<button type="button" id="size-guide-btn">Size Guide</button>

<script>
  document.getElementById("size-guide-btn").addEventListener("click", () => {
    // productCode/gender are optional — omit to resolve from the page URL.
    window.LoopsAI?.openSizeFinder();
  });
</script>

function SizeGuideButton({ productCode }) {
  return (
    <button
      type="button"
      onClick={() => window.LoopsAI?.openSizeFinder(productCode ? { productCode } : {})}
    >
      Size Guide
    </button>
  );
}

Product code and gender

The guide needs to know which product to size, and it prefers to know the shopper's gender so it can skip that question.

Product code — pass it explicitly (openSizeFinder({ productCode })) if you have it. Otherwise the widget looks the product up from the current page URL against your catalog, so no argument is needed on a product page that exists in the catalog.
Gender — resolved automatically from the product (its gender field / attribute). When the catalog knows it, the guide skips the gender step. If it is missing or ambiguous, the shopper is asked.

Pass what you already have

If your page already exposes the product code and gender, passing them (openSizeFinder({ productCode, gender })) is the most reliable path and avoids a catalog lookup.

Timing: make sure embed.js is ready

openSizeFinder becomes available once embed.js has booted (window.LoopsAI.live === true). For a button the shopper clicks after the page has settled, the optional-chaining guard (window.LoopsAI?.openSizeFinder) is all you need.

If a click could land before the script finishes loading, queue the call instead — the queue runs the moment the embed boots:

function openSizeGuide(productCode) {
  const arg = productCode ? { productCode } : {};
  if (window.LoopsAI?.live) {
    window.LoopsAI.openSizeFinder(arg);
  } else {
    (window.LoopsAI = window.LoopsAI || { q: [] }).q.push(["openSizeFinder", arg]);
  }
}

No-code alternative: let Loops AI inject the button

If you would rather not write any JavaScript, enable Size Guide for the web channel in the configurator and point it at where the button should appear (a CSS selector for the anchor element). The embed injects a Size Guide button next to that element and wires openSizeFinder automatically — the product code is resolved from the page URL, and the gender from the product.

Use one path, not both

The injected button and your own button call the same method. If you build your own (the recommended path above), keep the built-in injection off so two buttons don't appear. If you rely on the injected button, you don't need any of the code above.

Advanced: postMessage

If you can't reach window.LoopsAI on the host page (rare), post a message into the widget iframe:

interface OpenSizeFinderMessage {
  action: "openSizeFinder";
  product?: { productCode?: string; gender?: "women" | "men" };
}

Prefer openSizeFinder() — it opens the guide and passes the product in a single call.

Checklist

Step	Done when
Pick one path	Your own button or the injected button — not both
Your button calls the API	`LoopsAI.openSizeFinder()` on click
Product resolvable	Passed as `productCode`, or the page URL exists in your catalog
Display mode chosen	Open As set to Inside chat or Standalone panel in the configurator

Troubleshooting

Nothing happens on click — Check typeof window.LoopsAI?.openSizeFinder === "function". If it's undefined, embed.js hasn't loaded or init failed (verify agentId and CSP).
Guide opens without a product — The product code couldn't be resolved. Pass it explicitly, or confirm the product page URL matches the catalog productUrl.
Shopper is asked for gender on a gendered product — The product has no gender field/attribute the catalog could read; add it, or pass gender in the call.
Two Size Guide buttons — Both paths are active. Turn off the built-in injection in the configurator.

See also JavaScript API and Host Integration API.

On this page