Version: 1.1.4

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 to apply them. Product informations are stored in our pms system. To apply any product, The only information you need is product code.

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="applyProductWithCode('************');"></button>
            <button  value="#008080" style="background-color: #7f081d; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></button>
            <button  value="#008080" style="background-color: #7f081d; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></button>
            <button  value="#e7aa49" style="background-color: #faa199; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></button>
            <button  value="#800064" style="background-color: #000000; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></button>
            <button  value="#003c80" style="background-color: #ECC4A0; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></button>
            <button  value="#4d0080" style="background-color: #8A625E; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></button>
            <button  value="#4d0080" style="background-color: #000000; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></button>
            <button  value="#4d0080" style="background-color: #000000; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProductWithCode('************');"></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.

You can use product code
//Sample code
activeProduct = {"code": "********"}
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 dictionary consist of least three keys and values.
Market Place Code
activeProduct = {"specialProductId":0123456789012,"specialBrandCodeName":"brandname_code",}
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": "********"}
    document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_code":JSON.stringify(activeProduct)}), "*");
    ```

    //to apply second type eyeliner first
    activeProduct = {"code": "********"}
    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": "********"}
    document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({"set_active_products_by_code":JSON.stringify(activeProduct)}), "*");
    ```

    //to apply second type eyeliner first
    activeProduct = {"code": "********"}
    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#

Example usage of eyeliner types

 activeProduct = { "specialProductId": 0123456789123, "specialBrandCodeName": "example_code", "makeupType": ["Eyeliner"], "makeupMode": 0, "eyelinerType": 2 }
 document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({ "set_active_products_by_brand_id": JSON.stringify(activeProduct) }), "*");

Eyeliner Type 0	Eyeliner Type 1	Eyeliner Type 2

Blusher#

Example usage of blusher types

 activeProduct = { "specialProductId": 0123456789123, "specialBrandCodeName": "example_code", "makeupType": ["Blusher"], "makeupMode": 0, "blusherType": 1 }
 document.getElementById('makeupView').contentWindow.window.postMessage(JSON.stringify({ "set_active_products_by_brand_id": JSON.stringify(activeProduct) }), "*");

Blusher Type 0	Blusher Type 1

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 = {"code":"********"}
            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.

applyProductWithSpecialProductCode takes one argument. Product code is unique id that matches with special product code. 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({"applyProductWithSpecialProductCode":{"specialProductId":code}}), "*");

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":"************"}}), "*");

removeProducttakes only category name.

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

Plugin files#

Mail us to to get website-id and our plugin URL. You can get contact from here