Menu

The Widget Menu

Widgets are small applications that can be embedded into your websites without using our APIs. All you need to do is to put our generated JavaScript code onto your website and it will display instantly. There are 4 different widgets that you can use: Leaderboard, Live feeds, User Profile and User bar. Let’s take a look on how to create widgets!

Notification widget

Copy and paste the code below into your page. It will display automatically all the notifications : points, badges, level-up, ...

Social login widget

1. Go to the Widget Menu and click on the Social login tab.

2. Click on the social network you want your users to be able to login from. Enable or disable the social login for each social network. For each enabled social network, fill up the form with following information provided by the social application (Facebook, Twitter, Google-plus, etc...) you had created : api key, api secret and the sorting order you want the social login to be displayed in the social login menu. Also, fill up the CallBackURL page that need to be executed after the social login is completed.

3. When it is done, you can press the preview button to preview what the social login menu looks like on your website. Once everything looks as expected, you can get the generated code by clicking the Get Code button.

4. Lastly paste this JavaScript code on your page, ideally should be right after the opening <--body--> tag.

Leaderboard widget

1. Go to the Widget Menu and by default the Leaderboard tab is selected. Enter the preferred width of the Leaderboard so that it is suitable for your website. You may change the Color theme of the Leaderboard by clicking the color field and a color picker will pop up so you can choose.

2. Choose a suitable color that matches with your website with the color picker, you can also insert RGB or Hexadecimal code.

3. Next you have an option to rank by your available rewards to players. For instance Points, Experience points, or Custom points that was set by you. By default if you have just started using the dashboard you would only see Point and Exp available.

4. After when that is done, you can press the preview button to preview what the leaderboard looks like on your website. Once everything looks as expected, you can get the generated code by clicking the Get Code button.

5. Lastly paste this JavaScript code on your page, ideally should be right after the opening <--body--> tag.

Live feed Widget

The Live feed widget allows us to view all activities that all Players has accomplished tasks or earned rewards in real time. If your website is full of Playbasis’s actions this Live feed will be very active

1. Click on the Live feed tab to view the Live Feed and Insert the width, height and color of the

2. Make sure to preview the LiveFeed by clicking the Preview button and once it is as expected get the generated code by clicking the Get code button and paste the JavaScript code into your website.

Profile Widget

The profile widget is a representation of a user’s current status in your web applications. The main information that will be displayed is the, user’s display picture, level of the user, number of points that the user has and the percentage remaining to the next level. The required information for this widget is a user id, which it could be anyone just for testing purposes. Let’s see how we can create this widget.

1. Click on the Profile tab to view the Profile widget setup.

2. Insert the width and color of the profile widget that is suitable for your website.

3. Choose the type of rewards to display. By default if you have just started using the dashboard, you will only see the Point and Exp. However if you have created custom points, then custom points will also be in the drop down list.

4. Once that is done, insert a player id for testing purposes and then press Preview to check if everything is as expected. Once satisfied with the preview, click on the Get code button to generate JavaScript code so that you can paste it into your web application.

Achievement widget

1. Go to the Widget Menu and click on the Achievement tab. Enter the preferred width of the Achievement widget so that it is suitable for your website. You may change the Color theme of the Achievement widget by clicking the color field and a color picker will pop up so you can choose.

2. When it is done, you can press the preview button to preview what the achievement widget looks like on your website. Once everything looks as expected, you can get the generated code by clicking the Get Code button.

3. Lastly paste this JavaScript code on your page, ideally should be right after the opening <--body--> tag.

User bar Widget

The User bar widget is similar to the User profile widget but it displays as a horizontal sticky bar that lives at the bottom of your web application. By default the entire bar is hidden except for a narrow tab that is located at the bottom right corner of your website. Let’s see how we can create this.

1. Click on the User bar tab to set up the User bar widget. Choose the color that is suitable with your website and select the reward type to display. By default if you have just used the dashboard only Point and Exp are available to choose from. If you have custom points created, then the custom points will appear in the drop down list.

2. Make sure to fill in a player id for testing purposes and press preview to view what it looks like if it was to be on your website.

3. Once Preview is done and everything is as expected, you can generate JavaScript code by pressing the Get code button and paste it in your web application.