Let's follow this steps to create your first widget. On your backend dashboard go to Toolbox -> Widget Manager then click on the New Widget button found on the top right corner


You should now see the following:




The Blue Circle is where you would write your code. The Green Circle shows the different tabs which hold the different parts of the code. For HTML and PHP code, we would use the HTML tab. For CSS we would use the CSS tab and lastly for Javascript code, we would use the Javascript tab. Note that the CSS tab is the only one that does not need opening and closing tags, meaning, it does not need <style></style> in it, you can simply start writing the CSS code in it. For all other tabs you need to add their respective opening and closing tabs.


The Red Circle points to the Widget Type. This should be left as "widget" by default. Lastly the Orange Circle gives us the option to name the widget. The widget can have spaces and supports alpha-numerical values.


So let's start by by doing the following:


1. Name the widget testingWidget.

2. Inside the HTML Tab, write the following:

 

<h2>This is a testing Widget</h2>

 

3. Press CTRL + S to save. It should now look like the following:




Now we need to use the widget on a specific page, for our example, we will use it on the How it Works page (Also known as the about page). For this we would go to Content -> Edit Web Pages and edit the How it Works from the list:



After you have the about page opened, click on the Source Code button



and paste the following at the end of the code just before the last </div> tag:


[widget=testingWidget]


so it looks like this:





Now click on the Save Page button. Now if we go to our site and check out the About page, we should see the following: