Version: 1.1.3

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

!!!Info Info 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>

!!!Info Info Functions are used

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

info "Info" 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(api_key, website_id, product_name){
            document.getElementById('nailpolishView').contentWindow.window.postMessage(JSON.stringify({"set_api_key":api_key}), "*");
            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>

You can customize our iframe#

Change Background Color

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

Change Try Label

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

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

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

Change Choose Model Button Color and Label

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

Change Mobile Take a Photo Color and Label

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

Disable Buttons Hover Action

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

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

document.getElementById('nailpolishView').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('nailpolishView').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('nailpolishView').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('nailpolishView').contentWindow.window.postMessage(JSON.stringify({"showBeforeAfterLabels":””}), "*")

Hide Take Photo Button For Desktop If you want to hide take a photo button for desktop, you can use this function

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

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 [email protected]