Skip to main content
Version: 1.1.3

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 below configurations.

<iframe id="makeupView"
src="photo_makeup_url"
allow="camera *;microphone *"
onload="initialization_function"
></iframe>
  • src : URL of our website.
  • allow : Camera permission must be given. Otherwise camera can not be open. Visitor choose only model or pick image from device.
  • onload : Some informations are must be provided to webview. These informations are defined in below.

2. Structure#

Basically we need one iframe and color buttons. Any design can be created with this plugin. We uses product names or product codes to apply them. Product informations are stored in our CMS system. To apply any product, The only information you need is product name. To ensure product name is unique, product name is consist of three name.

productname = brandname + " " + "product name" + "color_name";

When iframe loaded some informations are must be provided. Comminication between iframe and your site provided by post messages.Post message contents are includes function name and parameters. It can be tested on your localhost. But you need to give us your domain name for production. Unrecorded subdomains are not allowed for security issues.

3. Functions#

You can see very simple usage of our plugin. Iframe is center of page and color buttons below. When web page is loaded init function runs with website_id parameters. Without these information plugin does not works.

<html>
<style>
.colorSelectorDiv{
left: 50%;
bottom: 10%;
position: absolute;
transform: translate(-50%, -10%);
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<iframe id="makeupView" style="width: 51vh;
height: 50%;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);" src="************" allow="camera *;microphone *" onload="init('******************************')"></iframe>
<div class="colorSelectorDiv">
<button value="#008080" style="background-color: #8d2152; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Lipstick', 'Pulpoar Lipstick 01');"></button>
<button value="#008080" style="background-color: #7f081d; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Lipstick', 'Pulpoar Lipstick 02');"></button>
<button value="#008080" style="background-color: #7f081d; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Lipstick', 'Pulpoar Lipstick 3');"></button>
<button value="#e7aa49" style="background-color: #faa199; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Blusher','Pulpoar Blusher 01');"></button>
<button value="#800064" style="background-color: #000000; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Eyeliner', 'Pulpoar Eyeliner 01');"></button>
<button value="#003c80" style="background-color: #ECC4A0; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Foundation', 'Pulpoar Foundation 02');"></button>
<button value="#4d0080" style="background-color: #8A625E; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Eyeshadow', 'Pulpoar Eyeshadow 02');"></button>
<button value="#4d0080" style="background-color: #000000; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Mascara', 'Pulpo Demo'+' Mascara'+' 1');"></button>
<button value="#4d0080" style="background-color: #000000; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Eyepencil', 'Pulpo Demo'+' Eyepencil'+' 1');"></button>
</div>
</body>

Will be used on iframe load

postMessage is must be called to execute functions in iframe.
You must initialize plugin first. Initialization takes your website and it can be usable for only your domain or package.

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"initProducts":website_id}), "*");

You can set first product in 2 different ways.

  1. You can use product code

    //Sample code
    activeProduct = {"code": "********", "makeupMode":0 }
    document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_code":JSON.stringify(activeProduct)}), "*");

    set_active_products_by codetakes json string parameter active product.

    makeupMode: This is an optional parameter. Default value of parameter is zero. There is two makeup mode. Give 0 for use with single product apply and give 1 for use with multi product apply.

  2. Market Place Code

    activeProduct = {"specialProductId":0123456789012,"specialBrandCodeName":"brandname_code", "makeupMode":0, "eyelinerType": 2 }
    document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_brand_id":JSON.stringify(activeProduct)}), "*");

    specialProductId: Takes 13-digit integer value which is the global id of this product provided by us.

    specialBrandCodeName: Code that special for brand. This code help us to give special product code to brand.

caution

There is option to use and design your own camera ui. In this scenario you can create camera ui. And only result is shown by our ui.

caution

If you want to use different blusher or eyeliner type, You must add key value pair to activeProduct dict.

//to apply second type blusher first
activeProduct = {"code": "********", "makeupType":["Lipstick"], "makeupMode":0, "blusherType": 2}
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_code":JSON.stringify(activeProduct)}), "*");
```
//to apply second type eyeliner first
activeProduct = {"code": "********", "makeupType":["Lipstick"], "makeupMode":0, "eyelinerType": 2}
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_code":JSON.stringify(activeProduct)}), "*");
```
!!! info "Info"
if you use code to select product, it must be like below.
//to apply second type blusher first
activeProduct = {"code": "********", "makeupType":["Lipstick"], "makeupMode":0, "blusherType": 2 }
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_code":JSON.stringify(activeProduct)}), "*");
```
//to apply second type eyeliner first
activeProduct = {"code": "********", "makeupType":["Lipstick"], "makeupMode":0,
"eyelinerType": 2 }
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_code":JSON.stringify(activeProduct)}), "*");

You can select different style for eyeliner and blusher#

Eyeliner#

Screenshot Screenshot Screenshot

Blusher#

Screenshot Screenshot

Only use result screen

In this scenario when page load or photo captured, photo must be provided with below function.

`loadimgBase64`takes one argument which is base64 representation of captured photo.
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"loadimgBase64":bese64String}), "*");
<script>
function init(website_id){
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"initProducts":website_id}), "*");
activeProduct = {"Lipstick": "Pulpoar Lipstick 01", "makeupType":["Lipstick"], "makeupMode":0 }
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products":JSON.stringify(activeProduct)}), "*");
}
function applyProduct(category, key){
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProduct":{"category":category, "key":key}}), "*");
}
function applyProductWithCode(code){
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProductWithCode":{"product_code":code,}}), "*");
}
function removeProduct(category){
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"removeProduct":{"category":category}}), "*");
}
</script>
</html>

Will be used on product selection
There is two option to apply any product. You can use product code or product name that consist of brand name, product name and color name.

  • applyProduct takes two argument. Category is can be "Lipstick", "Blusher", "Eyeliner", "Foundation", "Eyeshadow", "Eyepencil", "Concealer". Key must be name of product that recorded on our pms.
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProduct":{"category":category, "key":key}}), "*");
//If it is a blusher or an eyeliner and you want to select different type result, give parameter.
//for blusher
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProduct":{"category":category, "key":key, "blusherType":2}}), "*");
//for eyeliner
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProduct":{"category":category, "key":key, "eyelinerType":2}}), "*");
  • applyProductWithCode takes one argument. Product code is unique id that matches with product. You should integrate our product code list to your app or website. Product code list will be shared.
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProductWithCode":{"product_code":"************"}}), "*");
//If it is a blusher or an eyeliner and you want to select different type result, give parameter.
//for blusher
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProductWithCode":{"product_code":"************","blusherType":2}}), "*");
//for eyeliner
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyProductWithCode":{"product_code":"************","eyelinerType":2}}), "*");
  • removeProducttakes only category name.

You can customize our iframe#

Change Background Color

document.getElementById('makeupView').contentWindow.windlow.postMessage(JSON.stringify({"changeBackgroundColor":{"color":"#D0D1D2"}}), "*");

Change Try Label

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"changeTryLabel": {"label":"TRY IT NOW"}}), "*")

Change Take Photo Button and Color Label (It changes DESKTOP Take Photo button’s color and label)

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"changeTakePhotoButtonColorAndLabel":{"label": "Take a Photo", "color":"#D0D1D2"}}), "*")

Change Choose Model Button Color and Label

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"changeChoosModelColorAndLabel":{"label": "Choose Model", "color":"#D0D1D2"}}), "*")

Change Mobile Take a Photo Color and Label

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"functionchangeTakePhotoWithAppButtonColorAndLabel":{"label": "Take a Photo", "color":"#D0D1D2"}}), "*")

Disable Buttons Hover Action

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"disableButtonsHoverActions":""}),"*");

Apply To Selected Model (If you want to use different models, you can contact us)

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"applyToSelectedModel": selectedModel}), "*")

Hide Choose Model Button (If you want to use your models, you should hide our choose model button)

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"hideChooseModelButton":””}), "*")

Hide Mobile Take Photo Button (If you want to use mobile devices camera application for take photo, you should hide mobile take photo button. You can perform your operation by sending the photo taken from the device camera to the loadImgBase64 function in base64 format.)

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"hideTakePhotoWithAppButton":””}), "*")

Show Before&After Labels (If you want to see before and after labels on your photo or selected model, you can use this function)

document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"showBeforeAfterLabels":””}), "*")

Will be used for UI integration
You can decide to choose your own icons for back button and slider button. Simply hide our button and put your icon. Post message when clicked your button.

  1. Hide slider button.
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"hideSlider":{}}), "*");
  1. Click slider button.
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"clickSlider":{}}), "*");
  1. Hide back button.
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"hideBackButton":{}}), "*");
  1. Click back button.
document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"clickBackButton":{}}), "*");

Plugin files#

Mail us to to get website-id and our plugin URL. You can get contact from [email protected]