How to integrate Skilljar with Instruqt to create a seamless hands-on lab experience for your learners
Even if you hate math, you will love this formula: Instruqt + Skilljar = Happy learner
And, of course, you also want happy learners if you are lucky enough to work with Instruqt and Skilljar. Here you will find how you do that. But first things first. Just to be sure, we are on the same page about what Instruqt and Skilljar are and can do for you.
What Instruqt can do for you
Instruqt is a hands-on virtual IT Lab Platform for interactive learning. Virtual IT labs provide learners with hands-on sandbox environments. In which they can learn about products and technology.Instruqt instantiates a running version of your software in a protected lab environment. With the lab environment, you can create product tutorials, demos, and training with Instruqt using real-world scenarios, infrastructure, and technology. Because Instruqt is a browser-based solution, Instruqt takes away the hassle of firewalls, configuring laptops, or virtual machines. And it provides you these benefits:
- Stable demonstration environments for your applications, so you expose your applications with complete confidence.
- Prebuild complex environments like Kubernetes for your applications, saving you time and worries.
- Real live environments where your applications cooperate with other (web) services and software that give your learners an authentic experience.
- Sandboxes where your learners can experiment with your applications without breaking anything, which boosts their trust in your applications.
Quite a list of benefits, isn't it? Together they turn your applications into a growth engine. And it's not only me saying this, but more importantly, what Instruqt customers say.
Instruqt’s essential parts
Tracks and challenges are Instruqt’s essential parts. A track is a series of challenges that a learner has to solve. Where a challenge is a task the learner has to do:
Example track
Take a quick look at this example track to fully grasp what Instruqt is about.
What Skilljar can do for you
Now, let’s move over to Skilljar. Skilljar is a Learning Management System (LMS). Or, in Skilljar's own words: Skilljar is the leading, purpose-built customer training platform for external education.Yes, you’re right, that's a pretty bold statement, but Skilljar backs this up with a nice list of customers and testimonials.Okay, very interesting, but that's enough marketing stuff. Let's shift gears to where Instruqt and Skilljar meet.
Combine Instruqt and Skilljar, and you get the best
Bottom line, Instruqt and Skilljar both serve customer training, and when you combine them, you will get:
- A unifying experience for customer training and community engagement.
- Better self-service for your learners as they can quickly locate the learnings.
- A streamlined data flow.
- Top-notch analytics and reporting.
And who doesn't want that? Especially if you have both tools available in your organization. Only one thing is needed for you to get the best: join Instruqt and Skilljar in technical matrimony.
What you can do with the integration
Your creative sky is the limit, but here are some groovy things you can do when you join Instruqt and Skilljar:
- Create a one-stop training experience for your learners by embedding Instruqt tracks into Skilljar.
- Record your learners' progress in Skilljar when they play your tracks.
How to Integrate Instruqt with Skilljar
Okay, I bet I've got you interested in integrating Instruqt with Skilljar, and you really want to know how you do that. Just follow along, and I’ll guide you. Integrating Instruqt and Skilljar involves embedding your tracks and event callbacks into Skilljar courses with HTML iframes and JavaScript event listeners. This might sound like technical mumbo jumbo, but don't worry. I'll take you step-by-step through the pieces and refer to the Instruqt docs for detailed instructions to keep this post uncluttered.
Embed an Instruqt track into a Skilljar course
Let's start with embedding one of your tracks in a Skilljar course, which you do via an iframe on a web page. An iframe is an HTML element inside a web page that embeds videos or other interactive features such as Instruqt tracks into a web page like this example:
And embedding a track into Skilljar is a two-step process:
- Generate the iframe embed code from Instruqt.
- Create a course page in Skilljar and past the generated embed code into the course page.
The Instruqt docs provide you with detailed instructions to fulfill these steps. And afterward, your learners can launch and play your track directly from Skilljar. Very neat!
Embed event callbacks to track the learners' progress
You could leave the integration to embedding Instruqt tracks into Skilljar, and that's just fine. But you can also take it a step further, which only requires one thing:
- Embed event callbacks into your Skilljar course page.
Just enough theory to get you going
To understand what event callbacks are and how they work, let’s look behind the scenes of web browsers. Under the hood, web browsers are driven by events. When you click a button or hover over an image, that causes events like click and mouseover, which can be acted upon in programming code.The programming code behind web pages is JavaScript, enabling you to run functions when an event occurs. A function is a bundle of code that performs a specific task—for example, changing the background color of a button when you hover over it. And these functions are also called callbacks. As callbacks only execute when certain events happen, you could say they listen to events, which is why JavaScript handles callbacks as event listeners.
An example to help you further
Are you still with me? Let's look at an example to be sure. Have you ever opened a web page and did an intrusive pop-up appear when you moved your mouse to leave? I bet you do. Well, this was all handled by events and callbacks. The programmer made code that listened to if you threatened to leave the page. And when you did, you caused an event that executed the callback that showed you the pop-up.
Instruqt events you can tap into
In the same way, you can embed event callbacks to trace your learners' progress because Instruqt sends back events to the parent web page when embedding a track. For example, the track.completed event when a learner finishes a track.
Callback to update Skilljar
When you program the code behind your Skilljar course page to listen to Instruqt events, you can execute a callback function that updates Skilljar whenever a specific Instruqt event occurs. For updating Skilljar, you just call Skilljar's API and mark the course complete for your learner.More precisely, the callback code is added through a theme in Skilljar because themes can contain code snippets. And that's where you put your event listener and callback code. The Instruqt docs provide detailed instructions for embedding callbacks and updating Skilljar through its API. But here is already an example of an event listener to give you an impression of what the callback code looks like:After implementing this code in Skilljar, you can track your learners' progress in real-time
<script>
window.addEventListener(
"message",
(event) => {
// Check the event is from Instruqt
if (event.origin !== "https://play.instruqt.com") {
return;
}
// Event data is available in event.data
console.log(
"Received event:",
event.data.event,
"with params:",
event.data.params
);
// Mark SkillJar lesson complete
if (event.data.event === "track.completed") {
completeLesson();
}
},
false
);
</script>
Analytics in Skilljar
Skilljar's analysis capabilities are too extensive to cover them all here. But you can start with an overview and drill down into individual courses and learners (students):
The analytics information gives you insights such as challenges where your learners get stuck so you can help them with additional instructions. Which results in happy learners, and that makes the equation right. Not such bad math, isn't it?
Even if you hate math, you will love this formula: Instruqt + Skilljar = Happy learner
And, of course, you also want happy learners if you are lucky enough to work with Instruqt and Skilljar. Here you will find how you do that. But first things first. Just to be sure, we are on the same page about what Instruqt and Skilljar are and can do for you.
What Instruqt can do for you
Instruqt is a hands-on virtual IT Lab Platform for interactive learning. Virtual IT labs provide learners with hands-on sandbox environments. In which they can learn about products and technology.Instruqt instantiates a running version of your software in a protected lab environment. With the lab environment, you can create product tutorials, demos, and training with Instruqt using real-world scenarios, infrastructure, and technology. Because Instruqt is a browser-based solution, Instruqt takes away the hassle of firewalls, configuring laptops, or virtual machines. And it provides you these benefits:
- Stable demonstration environments for your applications, so you expose your applications with complete confidence.
- Prebuild complex environments like Kubernetes for your applications, saving you time and worries.
- Real live environments where your applications cooperate with other (web) services and software that give your learners an authentic experience.
- Sandboxes where your learners can experiment with your applications without breaking anything, which boosts their trust in your applications.
Quite a list of benefits, isn't it? Together they turn your applications into a growth engine. And it's not only me saying this, but more importantly, what Instruqt customers say.
Instruqt’s essential parts
Tracks and challenges are Instruqt’s essential parts. A track is a series of challenges that a learner has to solve. Where a challenge is a task the learner has to do:
Example track
Take a quick look at this example track to fully grasp what Instruqt is about.
What Skilljar can do for you
Now, let’s move over to Skilljar. Skilljar is a Learning Management System (LMS). Or, in Skilljar's own words: Skilljar is the leading, purpose-built customer training platform for external education.Yes, you’re right, that's a pretty bold statement, but Skilljar backs this up with a nice list of customers and testimonials.Okay, very interesting, but that's enough marketing stuff. Let's shift gears to where Instruqt and Skilljar meet.
Combine Instruqt and Skilljar, and you get the best
Bottom line, Instruqt and Skilljar both serve customer training, and when you combine them, you will get:
- A unifying experience for customer training and community engagement.
- Better self-service for your learners as they can quickly locate the learnings.
- A streamlined data flow.
- Top-notch analytics and reporting.
And who doesn't want that? Especially if you have both tools available in your organization. Only one thing is needed for you to get the best: join Instruqt and Skilljar in technical matrimony.
What you can do with the integration
Your creative sky is the limit, but here are some groovy things you can do when you join Instruqt and Skilljar:
- Create a one-stop training experience for your learners by embedding Instruqt tracks into Skilljar.
- Record your learners' progress in Skilljar when they play your tracks.
How to Integrate Instruqt with Skilljar
Okay, I bet I've got you interested in integrating Instruqt with Skilljar, and you really want to know how you do that. Just follow along, and I’ll guide you. Integrating Instruqt and Skilljar involves embedding your tracks and event callbacks into Skilljar courses with HTML iframes and JavaScript event listeners. This might sound like technical mumbo jumbo, but don't worry. I'll take you step-by-step through the pieces and refer to the Instruqt docs for detailed instructions to keep this post uncluttered.
Embed an Instruqt track into a Skilljar course
Let's start with embedding one of your tracks in a Skilljar course, which you do via an iframe on a web page. An iframe is an HTML element inside a web page that embeds videos or other interactive features such as Instruqt tracks into a web page like this example:
And embedding a track into Skilljar is a two-step process:
- Generate the iframe embed code from Instruqt.
- Create a course page in Skilljar and past the generated embed code into the course page.
The Instruqt docs provide you with detailed instructions to fulfill these steps. And afterward, your learners can launch and play your track directly from Skilljar. Very neat!
Embed event callbacks to track the learners' progress
You could leave the integration to embedding Instruqt tracks into Skilljar, and that's just fine. But you can also take it a step further, which only requires one thing:
- Embed event callbacks into your Skilljar course page.
Just enough theory to get you going
To understand what event callbacks are and how they work, let’s look behind the scenes of web browsers. Under the hood, web browsers are driven by events. When you click a button or hover over an image, that causes events like click and mouseover, which can be acted upon in programming code.The programming code behind web pages is JavaScript, enabling you to run functions when an event occurs. A function is a bundle of code that performs a specific task—for example, changing the background color of a button when you hover over it. And these functions are also called callbacks. As callbacks only execute when certain events happen, you could say they listen to events, which is why JavaScript handles callbacks as event listeners.
An example to help you further
Are you still with me? Let's look at an example to be sure. Have you ever opened a web page and did an intrusive pop-up appear when you moved your mouse to leave? I bet you do. Well, this was all handled by events and callbacks. The programmer made code that listened to if you threatened to leave the page. And when you did, you caused an event that executed the callback that showed you the pop-up.
Instruqt events you can tap into
In the same way, you can embed event callbacks to trace your learners' progress because Instruqt sends back events to the parent web page when embedding a track. For example, the track.completed event when a learner finishes a track.
Callback to update Skilljar
When you program the code behind your Skilljar course page to listen to Instruqt events, you can execute a callback function that updates Skilljar whenever a specific Instruqt event occurs. For updating Skilljar, you just call Skilljar's API and mark the course complete for your learner.More precisely, the callback code is added through a theme in Skilljar because themes can contain code snippets. And that's where you put your event listener and callback code. The Instruqt docs provide detailed instructions for embedding callbacks and updating Skilljar through its API. But here is already an example of an event listener to give you an impression of what the callback code looks like:After implementing this code in Skilljar, you can track your learners' progress in real-time
<script>
window.addEventListener(
"message",
(event) => {
// Check the event is from Instruqt
if (event.origin !== "https://play.instruqt.com") {
return;
}
// Event data is available in event.data
console.log(
"Received event:",
event.data.event,
"with params:",
event.data.params
);
// Mark SkillJar lesson complete
if (event.data.event === "track.completed") {
completeLesson();
}
},
false
);
</script>
Analytics in Skilljar
Skilljar's analysis capabilities are too extensive to cover them all here. But you can start with an overview and drill down into individual courses and learners (students):
The analytics information gives you insights such as challenges where your learners get stuck so you can help them with additional instructions. Which results in happy learners, and that makes the equation right. Not such bad math, isn't it?
You might also like
Try Instruqt Yourself
Get a closer look at how Instruqt can help you sell smarter and train better.
Take a self-guided tour of Instruqt