Recognition Widget | Axero Documentation

Add a Recognition widget to a page to showcase accomplishments and accolades that are available.

Add Template

1. Click the gear icon > Page Builder > Templates.
2. Click Add a new template.
3. In Template Name, enter Title i.e. Badges Available.
4. In Widget Type, select Content List.
5. In Widget Sub Type, select Content List.
6. In the editor, paste the following code.

   <div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
   
       {{#if ShowWidgetHeader}}
       <div class="axero-widget-header">
           <h3>{{{WidgetTitle}}}</h3>
       </div>
       {{/if}}
       
       <div class="axero-widget-content axero-widget-content-padded axero-award-list axero-earned-award-list axero-my-recognition">
           <ul class="badges-earned-list axero-award-list-ul"> 
           
               {{#each Contents}}
               <li class="axero-award-list-li">
                   <a href="{{ContentURL}}" title="{{{Title}}}"><img src="{{ContentImageURL}}" alt="{{{Title}}}" /></a>
               </li>
               {{/each}}
               
           </ul>
       </div>
       
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
   		{{{FooterHTML}}}
           
       </div>
       {{/if}}
       
   </div>

7. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

   /*My Recognition widget*/ 
   .axero-widget-content.axero-my-recognition ul.badges-earned-list li {
       width: 20%
   }

3. Click Save CSS Overrides.

Add the Widget to the User Profile Page

1. Click People > User Profiles.
2. For the User Profile page, click the gear icon > Edit Page.
3. Click Widgets.
4. Click Built in Widgets.
5. Drag a Content List widget onto the page.
6. On the Content List widget, click the gear icon > Edit properties.
7. In Title, enter Badges Available.
8. In Widget Sub Type, select Content List.
9. In Content types, select Badge.
10. In Total items, enter how many badges to display.
11. Click Template.
12. Select the My Recognition template.
13. Click Save Widget.
14. Click Publish changes.
15. Click Go to page.