Skills Profiler Plugin Download
Click here to download Skills Profiler Plugin CSS & JS Files

Plugin Integration Steps

Add the respective script

Before adding the It's Your Skills plugin, please make sure you have the jQuery plugin on your site.

Add the relevant JS file for the plugin you have purchased. Assuming you have downloaded the plugin already, place your plugin in the head tag of your HTML page as shown below. (Replace the src attribute with the name of the plugin and location in your local environment.)

<script src="https://plugin.itsyourskills.com/IysPlugin.v5.0.js"></script>

Load the following JS via dynamic script with delay.

<script src="https://plugin.itsyourskills.com/src.v5.0.js"></script>

Add the CSS file for the plugin. Assuming you have already downloaded the CSS file from the download section, place your CSS in the head tag of your HTML page as shown below. (Replace the src attribute with the name of the CSS and location in your local environment.)

<link href="https://plugin.itsyourskills.com/src.v5.0.css" rel="stylesheet">

Initialize the plugin

Once you have all the relevant files, initialize the plugin to get started.

First add an empty div tag to wherever you want the Its your Skills plugin to be with a unique id as mentioned below.

<div id="iysSkillsPlugin"></div>

Now reference that div you created, using its id, and initialize the It's Your Skills plugin on the empty div in your script.

                            handler = new SE({
                                refreshToken: 'Your refresh token goes here',
                                data: '', // data holds empty value by detault
                                readOnly: false, // Enables readonly mode in the plugin. If not mentioned, it will be disabled by default
                                allowPreview: 1, //disables preview section in the plugin. If not mentioned, the preview will be available by default
                                showPopularCategories: 1, //disables popular categories section in the plugin. If not mentioned, it will be available by default
                            });
            

This should now show the respective plugin in the div tag you declared on your site.

Get JSON output

Once you have chosen the skills, rating and comments, you can get the JSON output.

Add an output button for the plugin as shown below.

<button id="plugin-output">Output</button>

Now call the output function on click of the output button , as shown below. (Add the following code in the same function as the plugin initialization.)

            $('#plugin-output').click(function(){
                console.log(handler.getSkillsOutput());
                var outputJson = handler.getSkillsOutput();
            });
            

outputJson now contains your JSON stringified Output, with all skills selected. You can store it in your database to view or edit later.

View/Edit JSON

To view the stored JSON file in the It's Your Skills Plugin again, retrieve the saved JSON from the database and pass it as a parameter to the plugin initialization code, as shown below.

If the JSON stored in databse is object then do JSON.stringify(outputJson)

  handler = new SE({
                   refreshToken: 'Your refresh token goes here',
                   data: outputJson, // Data retrieved from database to view / edit 
                   readOnly: false, // Enables readonly mode in the plugin. If not mentioned, it will be disabled by default
                   allowPreview: 1, //disables preview section (Your Skill Profile) in the plugin. If not mentioned, the preview will be available by default
                   showPopularCategories: 1, //disables popular categories section in the plugin. If not mentioned, it will be available by default
                        });
            

The Complete Intialization Script

                            var handler;
                            $(document).ready(function(){
                                setTimeout(_loadJS, 300);
                                handler = new SE({
                                    refreshToken: 'Your refresh token goes here',
                                    data: '', // data holds empty value by detault
                                    readOnly: false, // Enables readonly mode in the plugin. If not mentioned, it will be disabled by default
                                    allowPreview: 1, //disables preview section in the plugin. If not mentioned, the preview will be available by default
                                    showPopularCategories: 1, //disables popular categories section in the plugin. If not mentioned, it will be available by default
                                });
                                $('#plugin-output').click(function(){
                                    console.log(handler.getSkillsOutput());
                                    var outputJson = handler.getSkillsOutput();
                                });
                            });
                            function _loadJS(){
                                var head_ID = document.getElementsByTagName("head")[0]; 
                                var script_element = document.createElement('script');
                                script_element.type = 'text/javascript';
                                script_element.src = 'https://plugin.itsyourskills.com/src.v5.0.js';
                                head_ID.appendChild(script_element);
                            }