Virtusize Guide

# Product Detail Page (PDP) Integration

This page will guide you through integrating Virtusize on the Product Detail Page (PDP) of your website, which requires 3 steps:

1. Adding the placeholders

We currently support six types of widgets:

  • Inpage Standard
  • Inpage Minimal
  • Smart Table
  • Fitting Room Recommend
  • Fitting Room Discovery
  • Kids

This widget can be placed anywhere on your page, but it is recommended to specify the placement using placeholders. Adding placeholders will allow you to freely change the design of your page without worrying about breaking Virtusize widgets in the future.

2. Integrating the Virtusize script

This script is necessary for calling our central application responsible for displaying our widgets.

3. Verification

# Before you start

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

# 1. Adding the placeholders

Please consult with your sales representative to determine the optimal positioning of the Virtusize tags.

If you are integrating the Virtusize Inpage Standard widget, please add a placeholder tag where you want it to appear:

<div class="vs-placeholder-inpage"></div>

If you are integrating the Virtusize Inpage Minimal widget, please add a placeholder tag where you want it to appear:

<div class="vs-placeholder-inpage-mini"></div>

If you are integrating the Virtusize Smart Table (ST) widget, 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 (FRR) widget, please add a placeholder tag where you want it to appear:

<div class="vs-placeholder-frr"></div>

If you are integrating Virtusize Fitting Room Discovery (FRD) widget, please add a placeholder tag where you want it to appear:

<div class="vs-placeholder-frd"></div>

If you are integrating Virtusize Kids widget, please add a placeholder tag where you want it to appear:

<div class="vs-placeholder-kids"></div>

It is possible to add multiple widgets of Inpage Standard, Inpage Minimal, Smart Table, FRR, and Kids by adding more placeholder tags.

# 2. 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 STORE_NAME, ENVIRONMENT, DEVICE_TYPE, USER_ID, PRODUCT_ID, PRODUCT_VERSION with the correct values.

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  product: { id: "PRODUCT_ID" version: "PRODUCT_VERSION" },
  page: "pdp"
};

(function() {
  window.vs = !window.hasOwnProperty("vs")
    ? vsObject
    : Object.assign(window.vs, vsObject);

  const { storeName, env, deviceType } = vsObject;
  const script = document.createElement("script");
  const firstScript = document.getElementsByTagName("script")[0];
  const protocol = document.location.protocol ? 'https' : 'http'

  Object.assign(script, {
    async: true,
    src: `${protocol}://integration.virtusize.com/${env}/${storeName}/${deviceType}.source.js`,
  });

  firstScript.parentNode.insertBefore(script, firstScript);
})();
value explanation
STORE_NAME This is the Store Name that you received from your sales representative.
ENVIRONMENT This can be either staging or production depending on what environment you are integrating on.
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.
USER_ID - Set empty string ('') when the user is not logged in.
- Set the user's ID (using a hash function such as MD5, SHA-1, etc...) when the user is logged in.
PRODUCT_ID The product ID.
PRODUCT_VERSION The version of the product should typically be set as the date of the product’s release (YYYYMMDD). If the version is unknown, please set this as 1. If the product version changes, the product information will be automatically reparsed.

# 3. Verification

After completing the integration, please share the Product Detail Page URL with your sales representative.

← Order Confirmation Page (OCP) integration →