Version: 1.1.4

Web

caution

We are updated some points on plugin. Most change is entagration is handled by url. Therefore, There is no need to update your app or website frequently. Improvements and new features are reached immediately. Second change is apply function. No more need to enter color information or anything else.The only needed information is product category and product name. this give us to flexiblity of improvement on better visual results. Comminacation on web is handled by postMessage function because of url usage.

caution

Photo makeup and Photo nailpolish usages are very similar but there is some small differences on function names and parameters.

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_nailpolish_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.

caution

You can use any hex color to get result. But it is not recomended for production. Our results are getting better day by day. And we developing algorithms for product base.

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 api-key , website_id and initial_product 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="nailpolishView" style="width: 50vh;
            height: 50%;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%);" src="url of our plugin" allow="camera *;microphone *"  onload="init('APIKEY_HERE', 5, 'Pulpoar Nailpolis 03')"></iframe> 
        <div class="colorSelectorDiv">
            colors:
            <button  value="#008080" style="background-color: #008080; border: 2px solid white; width: 4em; height: 4em;" onclick="applyColor(this.value);"></button>
            <button  value="#e7aa49" style="background-color: #e7aa49; border: 2px solid white; width: 4em; height: 4em;" onclick="applyColor(this.value);"></button>
            <button  value="#800064" style="background-color: #800064; border: 2px solid white; width: 4em; height: 4em;" onclick="applyColor(this.value);"></button>
            <button  value="#003c80" style="background-color: #003c80; border: 2px solid white; width: 4em; height: 4em;" onclick="applyColor(this.value);"></button>
            <button  value="#4d0080" style="background-color: #4d0080; border: 2px solid white; width: 4em; height: 4em;" onclick="applyColor(this.value);"></button>
            <button  value="#4d0080" style="background-color: #fff; border: 2px solid red; width: 4em; height: 4em;" onclick="removeProduct();"></button>
        </div>
        <div class="colorSelectorDiv2">
            products:
            <button  value="#008080" style="background-color: #83c0ae; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Pulpoar Nailpolish 01')"></button>
            <button  value="#e7aa49" style="background-color: #ecadc2; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Pulpoar Nailpolish 02')"></button>
            <button  value="#800064" style="background-color: #75bbd4; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Pulpoar Nailpolish 03')"></button>
            <button  value="#003c80" style="background-color: #726a2c; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Pulpoar Nailpolish 04')"></button>
            <button  value="#4d0080" style="background-color: #ecddd8; border: 2px solid white; width: 4em; height: 4em;" onclick="applyProduct('Pulpoar Nailpolish 05');"></button>
        </div>

    </body>
</html>

Will be used on iframe load postMessage is must be called to execute functions in iframe. Setting api key and initProducts is simple.

set_initial_producttakes string parameter as product name.

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.

Only use result screen

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

loadimgBase64takes one argument which is base64 representation of captured photo.

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

    <script>
        function init(website_id, product_name){
            document.getElementById('nailpolishView').contentWindow.window.postMessage(JSON.stringify({"initProducts":website_id}), "*");
            document.getElementById('nailpolishView').contentWindow.window.postMessage(JSON.stringify({"set_initial_product":product_name}), "*");       
        }
        function applyColor(color){
            document.getElementById('nailpolishView').contentWindow.window.postMessage(JSON.stringify({"applyColorNailPolish":color}), "*");
        }
        function applyProduct(product_name){
            document.getElementById('nailpolishView').contentWindow.window.postMessage(JSON.stringify({"applyProduct":product_name}), "*");
        }
        function removeProduct(){
            document.getElementById('nailpolishView').contentWindow.window.postMessage(JSON.stringify({"removeProduct":""}), "*");
        }

    </script>

Will be used on product selection

applyProduct takes product name. Product name must be name of product that recorded on our pms.
applyColorNailPolish takes hex color in string format.
removeProducttakes only category name.

Plugin files#

Mail us to to get web and api-key. You can get contact from here.