Product Page Integration

Adding an HTML snippet and Virtusize tag allows you to get complete utilization of all updated Virtusize products. We have one (#1) integration for your staging environment, and another (#2) for your production environment. If you do not have a staging environment, please only use our production integration.

  1. Staging
  2. Production

Dependencies

  • jQuery 1.3 or higher
  • Desktop: Modern browsers such as Internet Explorer 11+、 Safari, Chrome, Firefox, Opera
  • Mobile: iOS 7.0.4+, Android 4.4.4+

Staging

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 tag and add the following HTML code below:

<div id="vs-placeholder-cart"></div>
  • If you would like to have more than one Virtusize button, please add another div tag with an id of vs-placeholder-cart-2 where you would like the second button to appear and contact your sales representative. Ex:
<div id="vs-placeholder-cart-2"></div>

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

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.
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">

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 and YOUR_DEVICE_TYPE with the correct values according to the table below:


 
 
 








<script type="text/javascript">
var vsStoreName = 'YOUR_STORE_NAME';
var vsEnv = 'staging';
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_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.

Production

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 tag and add the following code below:

<div id="vs-placeholder-cart"></div>
  • If you would like to have more than one Virtusize button, please add another div tag with an id of vs-placeholder-cart-2 where you would like the second button to appear and contact your sales representative. Ex:
<div id="vs-placeholder-cart-2"></div>

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

no id name explanation
1 vs-user-id Is set when the user logs into 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.
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">

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 and YOUR_DEVICE_TYPE with the correct values according to the table below:


 
 
 








<script type="text/javascript">
var vsStoreName = 'YOUR_STORE_NAME';
var vsEnv = 'production';
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_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.