NAV Navbar
html

YouCam for Web Get Started

The JavaScript SDK provides a set of client-side primitives that enable virtual makeup try-on features on a webpage.

Basic Setup

Include the following code snippet in an HTML page.

<script>
  (function (d,k) {
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://plugins-media.perfectcorp.com/smb/sdk.js?apiKey=' + k;
    var x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })(document, 'for-draft');
</script>
<div id="YMK-module"></div>

Make sure to replace for-draft with your API key.

The JavaScript SDK doesn’t have any standalone files that need to be downloaded or installed. Instead, put a piece of regular JavaScript code into a HTML page that asynchronously loads the SDK into a webpage. The async load means that it does not block loading other elements of a webpage. Insert the following code snippet after the beginning of <body> tag in the HTML code of the page to display the web module.

The code snippet loads and initiates the SDK. A global variable, “YMK”, will be registered after page is initialized. This variable is designed for the webpage to communicate with the SDK.

Predefined callback

Declare a global function 'window.ymkAsyncInit' on a webpage. It will be fired when the SDK has finished loading.

<script>
  window.ymkAsyncInit = function() {
    YMK.init();
  }
</script>

Apply makeup effect

Add a button or a link calling YMK.applyMakeupBySku.

<button onClick="YMK.applyMakeupBySku('LIP_COLOR_01_01')">
  Apply Lip Color
</button>

API Reference

Methods

Methods
YMK.init YMK.init(args)
    Parameters:
  • args: JSONObject
    • autoOpen(optional): boolean, default is false; whether to open the YMK web module after script is loaded.
    • hideButtonsOnResult(optional): boolean, default is false; whether to hide all the buttons on result page or not.
    Return Value: None
    Passes initial arguments to change the default behavior of YMK module.
YMK.open YMK.open([loadLiveMode, image])
    Parameters:
  • loadLiveMode(optional): boolean, whether to open the YMK web module and enter live mode or not
  • image(optional): base64OrBlob, whether to open the YMK web module and enter photo mode. Both base64 format image or a blob of image object is supported.
    Return Value: None
    Open YMK web module page.
YMK.applyMakeupBySku YMK.applyMakeupBySku(skuId, callback)
    Parameters:
  • skuId: string, a sku ID
  • callback(optional): function, fires after the makeup effect is applied.
    Return Value: None
    Changes the makeup effect by the given sku ID, you could retrieve your sku information from perfect SMB.
YMK.applyMakeupByLook YMK.applyMakeupByLook(lookId, callback)
    Parameters:
  • lookId: string, a look ID
  • callback(optional): function, fires after the makeup effect applied
    Return Value: None
    Changes the makeup effect by the given look ID, you could retrieve your look information from perfect SMB.
YMK.addEventListener YMK.addEventListener(eventName, handlerFunction)
    Parameters:
  • eventName: string, a named event
  • handlerFunction: function, a handler function
    Return Value: an EventListenerIdentifier
    Adds the listener to the given event name. Returns an identifier for this listener that can be used with removeEventListener.
YMK.removeEventListener YMK.removeEventListener(EventListenerIdentifier)
    Parameters:
  • EventListenerIdentifier: integer
    Return Value: None
    Removes the given listener, which should have been returned by the YMK.addEventListner above.
YMK.reset YMK.reset()
    Parameters: None
    Return Value: None
    Removes all the makeup effects from the canvas.
YMK.closeEngine YMK.closeEngine()
    Parameters: None
    Return Value: None
    Closes canvas and back to launcher page.
YMK.close YMK.close()
    Parameters: None
    Return Value: None
    Closes YMK module page.
YMK.pause YMK.pause()
    Parameters: None
    Return Value: None
    Works on live mode only. To pause the live-stream.
YMK.resume YMK.resume()
    Parameters: None
    Return Value: None
    Works on live mode only. To resume the live-stream.
YMK.snapshot YMK.snapshot(contentType, callback)
    Parameters:
  • contentType: string, valid value:['base64', 'blob']
  • callback: function
    • base64OrBlob: An image in base64 format or binary format
    Return Value: None
    Takes a snapshot of current result window and retrieves the returned object from the given callback function.
YMK.isLoaded YMK.isLoaded()
    Parameters: None
    Return Value: None
    Whether a live streaming or a given photo is loaded on canvas or not.
YMK.getTuner YMK.getTuner(type)
    Parameters:
  • type: string, valid value:['eyebrow']
    Return Value: A Tuner Object
    Please check EyebrowTuner for details
YMK.enableCompare YMK.enableCompare()
    Parameters: None
    Return Value: None
    Enable compare mode
YMK.disableCompare YMK.disableCompare()
    Parameters: None
    Return Value: None
    Disable compare mode

Events

The YMK JavaScript API event model creates and manages its own custom events.

Events
cameraClosed function()
    Arguments: None
This event is fired when the camera is closed.
cameraFailed function()
    Arguments: None
This event is fired when the camera failed. Either user refuses to grant permission or the app is unable to retrieve video stream normally.
cameraOpened function()
    Arguments: None
This event is fired when the camera is opened.
compare function()
    Arguments: None
This event is fired when the compare mode is enabled.
compareDisabled function()
    Arguments: None
This event is fired when the compare mode is disabled.
closed function()
    Arguments: None
This event is fired when the YMK module is hidden.
engineClosd function()
    Arguments: None
This event is fired when the canvas is closed and user returns to launcher page.
loaded function()
    Arguments: None
This event is fired when a given photo or a live stream is loaded on the canvas.
loading function(progress)
    Arguments:
  • progress: integer, from 10 to 100
This event is fired when the YMK module is loading.
opened function()
    Arguments: None
This event is fired when the YMK module is opened.
photoLoaded function()
    Arguments: None
This event is fired when a given photo loaded on the canvas.
photoSaved function()
    Arguments: None
This event is fired when a photo is saved.
reset function()
    Arguments: None
This event is fired when all the effects are reset.
videoLoaded function()
    Arguments: None
This event is fired when a live stream is loaded on the canvas.
zoom function()
    Arguments: None
This event is fired when zooming.

Shopify Compatibility Guide

Shopify Introduction

Review the steps required to integrate Perfect YouCam for the Web Virtual Makeup Plugin (the “module”) into the Shopify online store webpage.

Prerequisite

  1. You must have a Shopify trial or subscription service account and have access to the admin backend.
  2. You must have a Perfect SMB - YouCam for Web trial or subscription service account and have access to the Perfect SMB admin console (the “console”).
  3. You must have at least one makeup product SKU created in the console with all mandatory fields filled in.
  4. Make sure the console SKU ID field is filled in with the product variant ID and that it corresponds to the same SKU on the Shopify admin backend

Implementation Steps

Follow the steps below to start implementing the module onto the online store product details page, as shown in the below example: See Demo Page

Step 1 – Log in to the Shopify admin backend and then select the product details theme page.

  1. Go to SALES CHANNEL > Online Store > Themes, locate the Live theme section, and then click the “Actions” dropdown.
  2. Click “Edit code” in the menu.
  3. Go to the “Sections” folder and then click on “product-template.liquid”.

Step 2 - Add the main module function JavaScript code at the end of the template.

Code example

<script type="text/javascript" language="javascript">
  var YMK_SDK_URL = "https://plugins-media.perfectcorp.com/smb/sdk.js";
  var YMK_SDK_API_KEY = "Your API key";

  function imageSrc2VariantId(imgSrc) {
    var h = document.getElementById('ProductJson-product-template');
    var p = JSON.parse(h.innerHTML);
    var index = 0;
    for (var i = 0;i < p.images.length;i++) {
        if (p.images[i].indexOf(imgSrc) != -1) {
            index = i;
            break;
        }
    }
    return p.all_variant_ids[index] + '';
  }
  function applyMakeup(imgSrc) {
    if (!YMK) return;
    YMK.applyMakeupBySku(imageSrc2VariantId(imgSrc));
  }
  var isYMKModuleLoaded = false;
  function loadYMKModule(skuid) {
    window.ymkAsyncInit = function() {
      isYMKModuleLoaded = true;
      YMK.addEventListener('loaded', function() {
        YMK.applyMakeupBySku(skuid);
      });

      var photoWrappers = document.getElementsByClassName('product-single__photo-wrapper');
      YMK.addEventListener('closed', function() {
        for (var i = 0;i < photoWrappers.length;i++) {
            photoWrappers[i].style.display = 'block'; 
        }
      });
      var isMobile = screen.width <=414;
      var width = isMobile ? screen.width - 44 : 360;
      var height = isMobile ? parseInt((screen.width - 44) * 1.2) : 480;
      window.YMK.init({showCloseBtnOnLauncher:true, width:width,height:height});
      window.YMK.addEventListener('opened', function() {
        for (var i = 0;i < photoWrappers.length;i++) {
          photoWrappers[i].style.display = 'none'; 
        }
      });
      window.YMK.open();      
    };
    var script = document.createElement('script');
    script.src = YMK_SDK_URL + '?apiKey=' + YMK_SDK_API_KEY;
    document.head.appendChild(script);
  }
  function openModule(skuid) {
    if (isYMKModuleLoaded) {
      YMK.open();
    } else {
      loadYMKModule(skuid);
    }
  }
</script>









































Note: The Class name for the product photo <div> may be different depending on the theme selected. Please check your theme and update this variable declaration with the correct name.

var photoWrappers = document.getElementsByClassName('product-single__photo-wrapper');

Step 3 – Add in your YouCam for Web API key.

  1. Go to the Perfect SMB admin console and then log in with your account.
  2. Go to YouCam for Web > API Integration, copy your API key, and then paste the value into the variable “YMK_SDK_API_KEY” for the module JavaScript code in Step 2.

Step 4 - Go back to the Shopify online code editor and then place where you want the module to appear on page. In the demo page, we placed the module in the product image placeholder.

Code example

<div id="YMK-module"></div>

Step 5(Optional) - Assign the onClick action to the SKU color ball with the “applyMakeup” function call corresponding to each SKU variant ID.

Code example

data-thumbnail-id=”{{ image.id }}” onClick=”applyMakeup(‘{{ image.src }}’)”

Step 6 - Add the module “Try on” button on a page where users can click and launch the module.

Code example

<div>
  <button type="button" onClick="openModule('{{ current_variant.id }}')">Try On</button>
</div>

Code example

{% for tag in product.tags %}
{% if tag contains “vto” %}
<div>
  <button type="button" onClick="openModule('{{ current_variant.id }}')">Try  On</button>
</div>
{% endif %}
{% endfor %}

Note: 1. To use the SKU number set in Shopify for your product, you can replace current_variant.id with current_variant.sku. 2. You can also use Shopify’s tag system to control when the YouCam for Web module shows up on the product page. a. Add a tag for all products that support virtual try-on. (i.e. ‘vto’) b. Add the below check around the button set up in Step 6:

Step 7 – Save the template, navigate to one of your products, and then preview the module functionality on the product details page.

Go to Products > All products and then click the “Preview on Online Store” icon to preview.