Skills with Roles Plugin

<script type="text/javascript" src="https://skills.itsyourskills.com/plugins/js/skills.roles.min.js"></script>

<script type="text/javascript" src="https://skills.itsyourskills.com/plugins/css/skills.profiler.min.css"></script>

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 type="text/javascript" src="js/skills.roles.min.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="css/skills.profiler.min.css" rel="stylesheet">

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="iys-skills-plugin"></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.

                var handler=$('#iys-skills-plugin').SE({
                    client_id: 'Your Client id goes here',
                    client_secret: 'Your Client Secret goes here',
                    allowRating: 0 //disables rating in the plugin. If not mentioned, the rating will be available by default
                    allowComments: 0 //disables comments in the plugin. If not mentioned, the comments will be available by default
                    allowPreview: 0 //disables preview section in the plugin. If not mentioned, the preview will be available by default
                });
                

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

Once you have chosen the skills, rating and comments, you can export them into a JSON file.

Add an output button for the plugin as shown below.

<button id="skills-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.)

                $('#output').click(function(){
                  console.log(JSON.stringify(handler.getSave()));
                  var outputJson = JSON.stringify(handler.getSave());
                });
              

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

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.

                var handler=$('#iys-skills-plugin').SE({
                    client_id: 'Your Client id goes here',
                    client_secret: 'Your Client Secret goes here',
                    data: outputJson
                });