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

<script>
  // 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") {
      document.getElementById("vs-fitting-room-mini").remove();
      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(
    parentOriginUrl
  )}`;
  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;";
  document.body.appendChild(iFrame);
</script>