Important KPI Widget

Admin: Web Office Admin
Page: Code Customization > Custom Widgets
URL: {client_ID}

Display an important data point (KPI) in a widget for emphasis.

Important KPI Widget example

The following code will help you create a similar custom widget:

<div class="card minheight">
 <!-- Header -->
  <div class="card-header bgm-color1">
    <h2 class="card-title">@String("This is Your Life")</h2>    
 <!-- Body Content --> 
  <div class="card-body">       
    <p>User Country: @User.Country</p>
    <p>An Important Number to Increase:</p>
    <p style="text-align:center"><span class="circle">@User.CommissionsCV</span></p>
  <!-- Footer --> 
  <a class="card-footer--link" href="">        
    <svg class="card-footer__icon" xmlns="" xmlns:xlink="" version="1.1" width="24" height="24" viewBox="0 0 24 24">
      <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>       
    <span class="ng-scope">@String("See Inside...")</span>   
.circle {
    display: inline-block;
    height: 60px;
    width: 60px;
    line-height: 60px;
    border-radius: 30px; /* or 50% */
    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
<p style="text-align:center"><span class="circle">@User.CommissionsCV</span></p>

Use Razor Syntax to pull-in data points.