Version: Next

Web

1. Importing Plugin#

You can directly import plugin into your project. No need to import any file to your projects. Just insert iframe with the configuration below.

Note: Do not create different iframes for Makeup and Nailpolish solutions. They should be using the same iframe element.

<iframe
 id="makeupView"
 src="<makeup_url>"
 allow="camera *;microphone *"
></iframe>

src : URL of our website with a query id that grants permission for Plugin to works on your domains only.
allow : Camera permission must be given. Otherwise camera can not be open. Visitor choose only model or pick image from device.
onload (optional) : You do not have to connect an initialization method to onload event anymore. However, you can still use it to manage the needs of your UI/state as you wish.

2. Structure#

Basically we need one iframe and color buttons. Any design can be created following the structure. We uses product codes or names to apply them. Product informations are stored in our CMS. Your products need to be registered in our system by the digitalization team. Afterward, you can apply the products in Plugin by product code (recommended way) or names.

Should you wish to comminicate and manage the Plugin, you need to use postMessage method on window object. postMessage contains function name and necessary parameters to update the Plugin. It can be tested on your localhost. You need to provide the domain names you wish to use either for production or staging. Unregistered subdomains are not allowed for security issues.

3. Communication with the Plugin/Remote Control#

info

You should wait for the Plugin to be loaded before the following postMessage comminications to occur. You can achieve this by adding an onload event listener to the iframe itself.

Plugin setup is completed and is ready to use now. The following function calls let you control the Plugin from your own website in order to apply custom managements.

note

If you are already using our Template Engine on Landing Page Integration, you might not need them at all. They are only needed to control the Plugin remotely.

Since you will be using postMessage method to comminicate with the Plugin, it might be better to create separate functions for each postMessage calls. Please note that these should be used on manual product selections in your own website. This way, you can apply your products as you wish. The products need to be registered in our system before, otherwise their informations will be ignored by the Plugin.

applyProductWithCode(productCode) (Recommended method)

You need to have product codes registered in for each of your product by our digitalization team.

/**
 * Apply a Makeup product by its product code.
 * Example payload:
 *   {
 *     product_code: "P_001"
 *   }
 */
const applyProductWithCode = (productCode) =>
 document.getElementById('makeupView').contentWindow.window.postMessage(
  JSON.stringify({
   applyProductWithCode: {
    product_code: productCode,
   },
  }),
  '*'
 );

applyProductWithNameAndCategory(category, key)

You need to have category and product details registered in for each of your product by our digitalization team.

/**
 * Apply a Makeup product by its category and key values.
 * Example payload:
 *   {
 *     category: 'Lipstick',
 *     key: `${brandName} ${productName} ${productColor}`
 *   }
 */
const applyProductWithNameAndCategory = (categoryName, fullProductName) =>
 document.getElementById('makeupView').contentWindow.window.postMessage(
  JSON.stringify({
   applyProductWithNameAndCategory: {
    category: categoryName,
    key: fullProductName,
   },
  }),
  '*'
 );

removeProduct()

/**
 * Remove/clear any Makeup that is currently available.
 */
const removeProduct = () =>
 document.getElementById('makeupView').contentWindow.window.postMessage(
  JSON.stringify({
   removeProduct: true,
  }),
  '*'
 );

4. Extra features#

How to start the Plugin by specific product applied?

You need to have related product details registered in for your product by our digitalization team.

Set by product code

/**
 * Add custom product code to the iframe url as query param.
 * Query value should be `product code`.
 */
<iframe
 id="makeupView"
 src="<makeup_url>?activeProduct=<productCode>"
 allow="camera *;microphone *"
></iframe>

Set by special product id

/**
 * Add special product id to the iframe url as query param.
 * Query value should be `special product id`.
 */
<iframe
 id="makeupView"
 src="<nailpolish_url>/specialProduct?=<specialProductId>"
 allow="camera *;microphone *"
></iframe>

Plugin files#

Mail us to get the unique Plugin ID and related configs. You can get contact from here