Virtusize Guide

# Product page Integration

Adding an HTML snippet and Virtusize tag allows you to get complete utilization of all updated Virtusize products.

# Dependencies

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

# Before you start

Please contact your sales representative to receive an API Key and Store Name.

# 1. Please consult with your sales representative to choose the optimal positioning of the Virtusize tags.

# If you are integrating Virtusize inpage application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-inpage"></div>
# If you are integrating Virtusize inpage mini application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-inpage-mini"></div>
# If you are integrating Virtusize smart table application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-smart-table"></div>
# If you are integrating Virtusize fitting room recommend application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-frr"></div>
# If you are integrating Virtusize kids application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-kids"></div>

You can add multiple inpages, inpage minis or smart tables by adding more placeholder tags.

# Adding multiple inpage applications on one page, each one showing a recommended size for a different product:

Please add a placeholder tag where you want the application to appear for each of the products. Inside the data-vs-product-id attribute please add a product ID for the product it corresponds to.

<div data-vs-product-id="product-id-1234"></div>

# 2. Please include 4 input tags with the following parameters respectively.

  • If you want to use multiple inpage applications on one page, each one showing a recommended size for a different product, you don't need to add vs-product-id and vs-product-image-url tags.
no id name explanation
1 vs-user-id Is set when the user logs in to your website. It is converted into MD5, SHA-1, etc. beforehand.
2 vs-product-id Product ID
3 vs-product-version The version of the product. This is usually set as the date of the product’s release. If unknown, please set this as 1. If the product version changes, product information will be automatically reparsed.
4 vs-product-image-url A .jpg or .png image url for the product. This will be the primary image used for the product in the Virtusize sizing platform
  • example
<input type="hidden" id="vs-product-id" value="product-id-1234" />
<input type="hidden" id="vs-user-id" value="user-id-1234" />
<input type="hidden" id="vs-product-version" value="1" />
<input
  type="hidden"
  id="vs-product-image-url"
  value="https://via.placeholder.com/400x400.jpg"
/>
  • If you use multiple trackers for your Google Analytics, please provide us the tracker name or tracker ID that you want us to use in order to send a google analytic event. If no tracker information is provided, we will use the first tracker we found.

Include the following input tag with the following parameters.

no id name explanation
1 vs-ga-tracker Either a tracker name or a tracker ID
  • example
// Option 1 (set tracker name)
<input type="hidden" id="vs-ga-tracker" value="gtm1" />

// Option 2 (set tracker ID)
<input type="hidden" id="vs-ga-tracker" value="UA-000000-1" />

# 3. Integrating the Virtusize script

The script can be easily integrated by setting variables for each environment in the script. Please place the following script just before closing the <body /> tag and replace YOUR_STORE_NAME, YOUR_ENVIRONMENT, and YOUR_DEVICE_TYPE with the correct values according to the table below:


 
 
 








<script type="text/javascript">
var vsStoreName = "YOUR_STORE_NAME";
var vsEnv = "YOUR_ENVIRONMENT";
var vsDeviceType = "YOUR_DEVICE_TYPE";

(function(d) {
var s = d.createElement("script"); s.type = "text/javascript"; s.charset="utf-8"; s.async = true;
s.src = ("https:" == d.location.protocol ? "https://" : "http://") + "integration.virtusize.com/" + vsEnv + "/" + vsStoreName + "/" + vsDeviceType + ".source.js";
var s1 = d.getElementsByTagName("script")[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>
value explanation
YOUR_STORE_NAME this is the Store Name that you received from your sales representative
YOUR_ENVIRONMENT this can be either staging or production depending on what environment you are integrating on.
YOUR_DEVICE_TYPE this can be either desktop or mobile depending on the device type the page is being accessed from. If your site is responsive (you serve the same resource to both desktop and mobile devices), please set this as desktop

# 4. Verification

After you are finished with the integration, please share the URL with your sales representative.

← Order confirmation page integration →