JavaScript API

The global object is window.LoopsAI.

Legacy alias

window.LoopSmartAI points to the same API object (backward compatibility). New integrations should use LoopsAI only.

Core methods

`open()`

Opens the chat panel. On product pages with sidebar mode enabled, call this from your own CTA after sending productContext.pageType: "PDP" — see Product & User Context.

window.LoopsAI.open();

`close()`

window.LoopsAI.close();

`toggle()`

window.LoopsAI.toggle();

`setProductContext(context)`

Use pageType: "PDP" on product detail pages, together with openAsSidebarOnProduct: true in your init config, to enable sidebar-on-PDP.

window.LoopsAI.setProductContext({
  productCode: "YOUR_PRODUCT_CODE", // Loops catalog code
  productName: "Example Product",
  pageType: "PDP",
});

`setUserContext(context)`

window.LoopsAI.setUserContext({
  id: "user-123",
  email: "user@example.com",
});

`updateContext(productContext, userContext)`

window.LoopsAI.updateContext(
  {
    productCode: "SKU-123",
  },
  {
    id: "user-123",
  },
);

`suggestSize()`

Opens the widget and starts the size suggestion flow. See Open Size Suggestion Form.

window.LoopsAI.suggestSize();

`openSizeFinder(product?)`

Opens the body-type size guide (gender → body type → measurements). product is optional — pass { productCode, gender }, or omit to resolve the product from the page URL. See Body-Type Size Guide.

window.LoopsAI.openSizeFinder({ productCode: "SKU-123" });

Answers a cart event (loopsai:addToCart, loopsai:removeFromCart, loopsai:updateQuantity, loopsai:getCart) that the widget dispatched on window. Send back the event's requestId, whether it worked, and the current cart. See Add to Cart.

window.addEventListener("loopsai:getCart", (event) => {
  window.LoopsAI.cartResult({
    requestId: event.detail.requestId,
    success: true,
    cart: { items: [{ productCode: "SKU-123-M", quantity: 1 }], currency: "EUR" },
  });
});

Calling pattern

window.LoopsAI.open();
window.LoopsAI.setProductContext({ productCode: "SKU-123" });

window.LoopsAI = { q: [] };
window.LoopsAI.q.push(["init", { agentId: "YOUR_AGENT_ID" }]);

TypeScript helper

interface LoopsAI {
  open: () => void;
  close: () => void;
  toggle: () => void;
  openWithSearch: (query: string) => void;
  suggestSize: () => void;
  openSizeFinder: (product?: { productCode?: string; gender?: "women" | "men" }) => void;
  cartResult: (result: {
    requestId: string;
    success: boolean;
    reason?: string;
    cart?: Record<string, unknown>;
  }) => void;
  setProductContext: (context: Record<string, unknown>) => void;
  setUserContext: (context: Record<string, unknown>) => void;
  updateContext: (
    productContext: Record<string, unknown>,
    userContext: Record<string, unknown>,
  ) => void;
  q?: Array<[string, unknown?]>;
  live?: boolean;
}

declare global {
  interface Window {
    LoopsAI: LoopsAI;
    /** @deprecated Same as LoopsAI */
    LoopSmartAI: LoopsAI;
  }
}

See Host Integration API for page-based context patterns and the full method matrix.

Continue to How It Works.