Version: 1.1.3

web

1. Importing plugin#

You can directly import plugin into your project. File structure like below. There is sample html file (index.html) that plugin imported.

Plugin/
- static/
  - css/
  - js/
  - image/
- view.html
index.html

<!--index.html-->
<html>
    <style>
        .colorSelectorDiv{
            left: 50%;
        bottom: 10%;
        position: absolute;
        transform: translate(-50%, -10%);
        }
    </style>
    <head>

    </head>
    <body>
            <iframe id="nailpolishView" style="width: 50%;
            height: 50%;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%);" src="view.html" onload="set_api_key()"></iframe> 
        <div class="colorSelectorDiv">
            <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>
        </div>

    </body>
    
    <script>
        function set_api_key(){
            document.getElementById('nailpolishView').contentWindow.set_api_key('API-KEY');
            document.getElementById('nailpolishView').contentWindow.set_initial_color('#800064');
        }
        function applyColor(color){
            document.getElementById('nailpolishView').contentWindow.applyColorNailPolish(color)
        }
    </script>
</html>

2. Structure#

Basically we need one iframe and color buttons. Any design can be created. View html is can be edit and icons and styles can be modified.

iframe takes least three arguments. Id is used to reach functions with js. Src is a view html file path. And onload is a function that run after page is loaded. API Key must be provided after page load unless it is not worked. Also the initial color must be set.

Hex code is used to apply nail polish. You must create function like applyColor(hex_color). This function will be used on color button clicked.

<button value="#008080" style="background-color: #008080; border: 2px solid white; width: 4em; height: 4em;" onclick="applyColor(this.value);"></button>

3. Functions#

Plugin can be integrated only 3 functions. Plugin functions are used with below command. document.getElementById('nailpolishView').contentWindow.function_name()

Will be used on iframe load

void set_api_key(String API_KEY);
void set_initial_color(String HexCode)

Will be used on color selection

void applyColorNailPolish(String HexCode)

Plugin files#

Mail us to to get plugin files and api-key. You can get contact from [email protected]