Analytify dashboard sections on frontend as shortcodes

shortcode.html

<style>
  .analytify_status_box_wraper {
    border: 1px solid #e2e5e8;
    margin-bottom: 20px;
    background: #fff;
    line-height: 1.5;
    font-family: 'Roboto', sans-serif;
    color: #848484;
    font-size: 14px;
  }
  .analytify_status_box_wraper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .analytify_status_header {
    border-bottom: 1px solid #e2e5e8;
    background: #f9fafa;
    padding: 20px 20px;
    position: relative;
    text-align: left;
  }
  .analytify_wraper h3 {
    color: #444444;
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    line-height: 1.2;
    margin: 0;
    font-weight: 400;
  }
  .analytify_status_footer {
    border-top: 1px solid #e2e5e8;
    background: #f9fafa;
    padding: 15px 20px;
  }
  .analytify_general_status_boxes_wraper {
    padding-bottom: 20px;
    text-align: left;
  }
  .analytify_general_status_box {
    width: calc(33% - 24px);
    margin: 20px 0px 0px 20px;
    border: 1px solid #e2e5e8;
    background: #fff;
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 20px 20px 50px;
    vertical-align: top;
    font-size: 14px;
  }
  .analytify_general_status_box h4 {
    position: relative;
    font-weight: 700;
    color: #848484;
    font-size: 14px;
    text-transform: uppercase;
  }
  .analytify_general_status_box h4:after {
    display: block;
    max-width: 100px;
    height: 1px;
    background: #e2e5e8;
    content: "";
    margin: 7px auto 10px;
  }
  .analytify_general_stats_value {
    font-size: 48px;
    color: #444444;
    font-weight: 100;
  }
  .analytify_wraper p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
  }
  .analytify_general_status_footer_info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #f2f2f2;
    text-align: center;
    border-top: 1px solid #e2e5e8;
    width: 100%;
    padding: 10px;
    font-size: 11px;
    color: #00c853;
  }
  .analytify_status_footer p {
    position: relative;
    display: inline-block;
    padding: 3px 0px 3px 37px;
  }
  .analytify_status_footer p span {
    color: #fa5825;
  }
  @media screen and (max-width: 768px) {
    .analytify_general_status_box {
      width: calc(50% - 24px);
    }
    .analytify_general_status_boxes_wraper {
      padding-right: 20px;
    }
  }
  @media screen and (max-width: 639px) {
    .analytify_general_status_box {
      width: calc(100% - 24px);
    }
  }
</style>

<div class="analytify_status_box_wraper">
  <div class="analytify_status_header">
    <h3>General Statistics</h3>
  </div>
  <div class="analytify_general_status_boxes_wraper">
    <div class="analytify_general_status_box">
      <h4>Sessions</h4>
      <div class="analytify_general_stats_value">[analytify-stats metrics="ga:sessions" permission_view=""]</div>
      Total number of Sessions within the date range. A session is the period time a user is actively engaged with your website. app. etc.
    </div>
    <div class="analytify_general_status_box">
      <h4>Visitors</h4>
      <div class="analytify_general_stats_value">[analytify-stats metrics="ga:users" permission_view=""]</div>
      Users that have had at least one session within the selected date range. Includes both new and returning users.
    </div>
    <div class="analytify_general_status_box">
      <h4>Page views</h4>
      <div class="analytify_general_stats_value">[analytify-stats metrics="ga:pageviews" permission_view=""]</div>
      Pageviews is the total number of pages viewed. Repeated views of a single page are counted.
    </div>
  </div>
</div>

Does this work now?