BadgeOS Badge Builder Overview

Installation / Setup Instruction:

Following are the step by step instructions to set up the BadgeOS Badge Builder add-on:

• Install and activate the BadgeOS plugin.
• Install and activate the BadgeOS Badge Builder add-on.
• After activating the add-on you will see the new Badge Builder menu item added under the BadgeOS main menu.

General Settings:

Navigate to the Badge Builder menu under the BadgeOS main menu it will display all the settings related to the badge builder.

Allow Achievement Types:
This option allows the admin to select which achievement type(s) can use the BadgeOS Badge Builder. By default, it's All.

Create a Badge:

This option allows the admin to create a badge for a specific achievement, by using the BadgeOS Badge Builder.

Steps: 
Following are the steps to create a badge using BadgeOS Badge Builder:

• On the ‘achievement listing page’ click Add New or Edit any existing achievement.
• On add/edit achievement page you click the link Use BadgeOS Badge Builder, under Featured Image meta-box.

• A pop-up window will load with BadgeOS Badge Builder.
• You will see a predefined badge to get started.

Badge Builder Interface:

Badge builder is divided into three sections:

• Header.
• Toolbar.
• Canvas.

Header:

In the header section, you will see two buttons to save badge as a draft or set as featured image

Toolbar:

The toolbar provides you the options to customize each badge element and change the look and feel of it, like changing badge text, text color, background color, badge shape all these and many other options will be displayed here based on the element you have selected.

Canvas:

Canvas provides you the instant preview of your badge so you can see how the final badge looks like.

Design a Badge:

Badge builder comes with multiple options to design your badge as you want. However, there are four major elements which construct the overall badge, these are the following:

• Badge Background.
• Badge Shape.
• Badge Text.
• Badge Icon.

Badge Background:

You can set any color background for your badge according to your needs, to change the background color click on the background and you will see options changed accordingly in the toolbar.

Badge Text:

To change badge text, click on it and badge builder will provide you text-related options in the toolbar above to change text, color, size, etc.

Badge Shape:

This option provides the user to select from multiple predefined shapes and customize it further as desired. To see badge shape-related options in the toolbar, click on the shape.

Badge Icon:

Badge icon gives the user an option to add another layer of customization, badge builder comes with hundreds of icons to choose from. Users can use badge icons to categorize badge according to their business industry such as pencil or book icon can be set for the education industry or running man and weight lifting for the sports industry.

Undo / Redo Option:

The undo function is used to reverse a mistake. The redo function restores any actions that have been previously undone using an undo. 

Use the Undo / Redo icons at the Badge Builder pop-up window for such purpose while designing a new badge.