# Overview

In order to support rapid integration SkillTree has taken an innovative approach of supplying fully navigable Ranking and Visualization views. User's progress and ranking is visualized using a JS Skills Display component that comes with the provided SkillTree Client Libraries. These libraries also enable instrumenting your application to report skill events via the JS skill reporting utility.

Integrated Application Image

Please Note

In order to support rapid integration SkillTree does not expose an API to retrieve individual gamification training profile components such as skills, subjects, badges, etc... but rather provides fully navigable and themeable Ranking and Visualization views that implement display of those concepts.

To integrate with the SkillTree service/dashboard please execute the following steps:

  1. Create and customize your training profile in the SkillTree Dashboard
  2. Embed Ranking and Visualization views using the Skill Display component
  3. Instrument your application to report skill events

Integrated Application Image

Please visit the Dashboard Guide to learn about the best practices and options for customizing your gamification training profile. This Integration Guide focuses on step 2 and 3: integration of the Client Display and the reporting libraries.

# SkillTree Client Libraries

SkillTree Client JS libraries are used to integrate gamified training into your web-application. These libraries are hosted on NpmJs.com (opens new window) so they can be easily installed.

SkillTree client libraries support:

  • Fully navigable Ranking and Visualization views via the Skill Display component
  • SkillsReporter JS utility to report skill events
  • A convenient component to display user's current overall level in the application.
  • Global event handler JS functions that allows applications to register for all skill events
    • Ex. in order to display encouragements for things like points earned and levels completed

There are several libraries supported, please visit the following links to learn more:

# Skills Display Integration

The Skills Display component provides fully navigable and themeable Ranking and Visualization views. This UI component is integrated into your web-based application by utilizing SkillTree libraries which are hosted on NpmJs.com (opens new window) so they can be easily installed.

Integrated Application Image

Below is a screenshot of the component's landing view:

Skills Platform Skills Display Image Rank, Badges and Subject cards are clickable and allow users to drill down to those views. Please visit the Screenshots section to see more examples of the Skills Display component.

TIP

You can easily theme this component to match your application's look-and-feel.

Skills Display visualizes gamified training progress and ranking for a user, which includes subjects, skills, badges and dependencies just to mention a few.

Please Note

In order to support rapid integration SkillTree does not expose an API to retrieve specific gamification training profile components such as skills, subjects, badges, etc... but rather provides fully navigable Ranking and Visualization views that implement display of those concepts.

When integrating the Skills Display component into your application we generally recommend the following integration pattern:

  1. Put a button in the header that displays the user's level (ex. Level 1)
    • We like placement on the top right but this really depends on your layout
  2. Clicking on the button will take you to the page that renders the Skills Display
    • Use one of the provided client libraries if using an explicitly supported UI framework or the Pure JS client library if using a different UI framework
    • Dedicate a full page to the Skills Display
  3. (Optional) Theme Skills Display to match your application
  4. (Optional) Display user progress summary on your home page or splash page
    • Pass true to skills display options.isSummaryOnly

Skills Display support is provided for the following libraries, please navigate to a specific library to learn more:

# Report Events Integration

When reporting skill events you have 2 options:

  • Option 1: Directly from JS code - SkillTree libraries come with a SkillsReporter JS utility that enables you to report skill events.
  • Option 2: From the backend server using SkillTree REST endpoints

Skills Platform Report Skill Events Image

TIP

Generally option 1 is the most common use-case but sometimes it's easier to derive skill events on the backend server.

Please visit the following sections to learn more:

# Browser Support

SkillTree is supported on all major browsers since the following versions:

Firefox Browser Supported
Firefox
50+
Chrome Browser Supported
Chrome
50+
Edge Browser Supported
Edge
16+
Safari Browser Supported
Safari
5.1+
Opera Browser Supported
Opera
60+
Last Updated: 6/6/2023, 1:21:26 PM