# Fitting Room Mini Integration

Adding Fitting Room Mini allows users easy access to product recommendations that will fit them perfectly.

# Dependencies

  • Desktop: Modern browsers such as Microsoft Edge, Safari, Chrome, Firefox, Opera
  • Mobile: iOS 7.0.4+, Android 4.4.4+

# Steps

Fitting Room Mini expects to be loaded in an iframe (opens new window) on Category pages and Top pages

In order to load fitting room mini, the following parameters are required:

name type explanation
env string specifies which environment to target. Can be either "staging" or "production"
region string Specifies which domain the app should be served from. Can be "jp" or "kr" or "com"
language string specifies which language to serve the app in. Can be "ja" or "ko" or "en"
apiKey string specifies which store to serve products from. Please contact your sales representative to receive your api key
version string specifies which version of the app to serve. Can be "mobile" or "desktop". Defaults to "mobile"
productIds string[] specifies which products to use as the basis for recommendations. Fitting Room Mini will try to find similar products to the ones passed in this list

After gathering this information please add the following <script> tag to your page. However, please replace the example values with the actual values from the above table

  // handle close fitting room mini​
  const handleMessage = messageObject => {
    if (!messageObject.isTrusted || !messageObject.origin.includes("virtusize")) return;
    const parsedMessage = JSON.parse(messageObject.data);
    if (parsedMessage.name && parsedMessage.name === "user-closed-vs-fitting-room-mini") {
      window.removeEventListener("message", handleMessage, false);

  const closeFittingRoomEventListener = window.addEventListener("message", handleMessage, false);

  // load fitting room mini
  // replace each of these example values with the actual values
  const params = {
    env: "staging",
    region: "jp",
    language: "ja",
    apiKey: "testAPIKey123456",
    version: window.innerWidth < 769 ? "mobile" : "desktop",
    productIds: ["12345"],

  let parentOriginUrl = `${window.location.protocol}//${window.location.hostname}`;
  if (window.location.port) parentOriginUrl += `:${window.location.port}`;

  const iFrame = document.createElement("iframe");
  iFrame.id = "vs-fitting-room-mini";
  const baseUrl = `https://static.api.virtusize.${params.region}/a/fitting-room-mini/testing/index.html`;
  iFrame.src = `${baseUrl}?params=${encodeURIComponent(JSON.stringify(params))}&parentOrigin=${encodeURIComponent(
  iFrame.width = params.version === "desktop" ? "640px" : "350px";
  iFrame.height = params.version === "desktop" ? "470px" : "250px";
  iFrame.style.cssText = "position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); border: none;";