Standalone Profile Card

The standalone profile card allows you to integrate specific profile components individually into your website. This provides flexibility to create custom layouts while maintaining the functionality of the Gamifiera profile system.

Available Components

Avatar Full Body

Displays the user's full body avatar:

<div class="gmf-my-avatar-fullbody"></div>

Customer Name

Displays the customer's username:

<div class="gmf-my-customer-name"></div>

Customer Level

Shows the customer's current level:

<div class="gmf-my-customer-level"></div>

Profile Pills

Displays the profile attribute pills:

<div class="gmf-my-profile-pills"></div>

Profile Stats

Shows the customer's statistics:

<div class="gmf-my-profile-stats"></div>

Implementation Example

Here's an example of how to implement all components together:

<div class="my-custom-profile-container">
  <div class="profile-header">
    <div class="gmf-my-avatar-fullbody"></div>
    <div class="user-info">
      <div class="gmf-my-customer-name"></div>
      <div class="gmf-my-customer-level"></div>
    </div>
  </div>
  <div class="profile-details">
    <div class="gmf-my-profile-pills"></div>
    <div class="gmf-my-profile-stats"></div>
  </div>
</div>

Notes

• Make sure the Gamifiera main script is properly initialized before implementing these components.
• The user must be logged in for these components to display properly.
• These components can be placed anywhere on your website, not just on profile pages.