Level of expertise: Easy
In this article you'll learn how to quickly and easily integrate Mazetec with Thinkific courses. The integration is simple and straightforward. Let's get started.
Integrate your Mazetec Mazes as a Thinkific Course multimedia lesson and pass the learner's* details (name and email) from Thinkific into Mazetec. This will pass the learner's name and email in to Mazetec so it's captured in the analytics.
In addition prevent the learner from skipping the Maze by using code in Thinkific to hide the "Complete & Continue" button and reveal it when the user reaches the finish node.
*Learner = Student
Starting in Mazetec, open the Maze you wish to integrate and click Link >>> Distribute Maze or from the dashboard click the "..." more button.
You must select "Require name and email", if this isn't selected the system will ignore the variables.
It's also important to Tag the link so you can identify it later and also parse the results. We recommend adding "Integration", "Thinkific" as tags so you can identify it later and filter the analytics.
You should see a popup modal in Mazetec Player asking for your Name and Email like in the following image.
If you do not see the popup go back and check the settings on your link to ensure "Require name and email" is selected.
Note: The learner will not see this popup modal, the data will be passed in the background.
Lastly, we will map the variable in the link.
Thinkific exposes the variables {{first_name}}, {{last_name}}, and {{email}}.
Once the data are passed to Mazetec via the link the following events occur in the background:
&removemargin=true&removeheader=true&name={{first_name}}%20{{last_name}}&email={{email}}
https://app.mazetec.org/player?uuid=a23a75c3-f083-4272-8644-1acf9128be12&removemargin=true&removeheader=true&name={{first_name}}%20{{last_name}}&email={{email}}
Prevent the skip, with the following script that will prevent learners from being able to skip the Maze before they Finish. Copy the code below and paste it in your site footer in Thinkific.
Here's what it should look like.
<style>
.maze__display--none {
display: none !important;
}
</style>
<script>
/*************************************************************************
*
* MAZETEC CONFIDENTIAL
* __________________
*
* Copyright (c) 2021 MAZETEC LLC
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of MAZETEC LLC and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to MAZETEC LLC
* and its suppliers and may be covered by U.S. and Foreign Patents,
* patents in process, and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from MAZETEC LLC.
*
* This file is subject to additional terms and conditions defined
* at mazetec.org.
*/
$(function () {
if (typeof CoursePlayerV2 !== "undefined") {
// Global context variable used to track the global state between lessons
const incompleteBtnSelector =
"main#main-content footer#course-player-footer .btn--incomplete > button";
const completeAndContinueBtnSelector =
"main#main-content footer#course-player-footer > button";
let __context = {};
const isMazeLesson = (lesson) => {
return (
lesson.contentable_type &&
lesson.contentable_type.toLowerCase() === "iframe" &&
lesson.source_url &&
lesson.source_url.toLowerCase().match(/mazetec\.[\w]+\/player/) !=
null
);
};
const isAlreadyComplete = () => {
return document.querySelector(incompleteBtnSelector) != null;
};
const createContext = (lesson) => {
return {
isMazeLesson: isMazeLesson(lesson),
isAlreadyComplete: isAlreadyComplete(),
isContinueButtonDisabled: false,
};
};
const disableCompleteAndContinueBtn = (ctx) => {
const btn = document.querySelector(completeAndContinueBtnSelector);
if (btn == null) {
return;
}
btn.classList.add("maze__display--none");
ctx.isContinueButtonDisabled = true;
};
const resetCompleteAndContinueBtn = (ctx) => {
const btn = document.querySelector(completeAndContinueBtnSelector);
if (btn == null) {
return;
}
btn.classList.remove("maze__display--none");
ctx.isContinueButtonDisabled = false;
};
const initSetup = (data) => {
__context = createContext(data.lesson);
// if it is maze lesson and it is not already complete then disable button
if (
__context.isMazeLesson === true &&
__context.isAlreadyComplete !== true
) {
disableCompleteAndContinueBtn(__context);
}
console.log(__context, "Context");
};
// Register mazetec iframe messages listener
window.addEventListener("message", (e) => {
if (!e.origin.includes("mazetec")) {
return;
}
if (e.data.et === "finish") {
console.log(e, "-----FINISH-----");
resetCompleteAndContinueBtn(__context);
}
console.log(e, "Event from mazetec");
});
// Register lister to trigger event when user enter in the new lesson
CoursePlayerV2.on("hooks:contentDidChange", function (data) {
console.log(data, "on-content-did-change");
initSetup(data);
});
CoursePlayerV2.on("hooks:contentWillChange", function (data) {
// Cleanup
console.log(data, "on-content-will-change");
});
CoursePlayerV2.on("hooks:contentWasCompleted", function (data) {
// unregister the maze message listener
console.log(data, "on-content-was-completed");
if (__context.isContinueButtonDisabled) {
// Reset, enable the complete and continue button
resetCompleteAndContinueBtn(__context);
}
});
CoursePlayerV2.on("hooks:contentWasMarkedIncomplete", function (data) {
// Cleanup
console.log(data, "on-content-was-marked-incomplete");
initSetup(data);
disableCompleteAndContinueBtn(__context)
});
}
});
</script>
If the values that are passed are not a valid type or are of null value, the Name and Email modal popup will display so the user can manually enter in their information.
Directly pass data into Mazetec through the player to capture the learner's name and email.
Name | URL (GET) Variable | Type | Description |
---|---|---|---|
Name | name | Text (String), 80 Char | Name of the learner saved with the learner's records in Mazetec analytics |
Email format. Validates "@" and "." | This is the learner's email that is saved with the learner's record. |
If you have integrated your Mazetec account with a Learning Repository Store (LRS), the learner's name and email will be captured in Mazetec analytics and be included in the learner's xAPI records that are passed to your LRS.
Thinkific exposes the following variables that we will use to pass learner data into Mazetec
Name | Variable | Description |
---|---|---|
First Name | {{first_name}} | This is the first name of the learner in Thinkific |
Last Name | {{last_name}} | This is the last name of the learner in Thinkific |
{{email}} | This is the learner's email in Thinkific | |
Account created date | {{date_created}} | This is the date the learner created their account in Thinkific |
Data is passed into Mazetec by setting the variables in the embed link.
Mazetec URL (GET) Variable | Thinkific Variable | Example |
---|---|---|
&name= | {{first_name}}%20{{last_name}} | Jane Doe |
&email= | {{email}} | jane.doe@example.com |
Note: The %20 represents a space character.
Example link:
https://app.mazetec.org/player?uuid=a23a75c3-f083-4272-8644-1acf9128be12&removemargin=true&removeheader=true&name={{first_name}}%20{{last_name}}&email={{email}}
Base Maze URL | Enable Responsiveness | Minimize header | Capture Learner Name | Capture Learner Email |
---|---|---|---|---|
https://app.mazetec.org/player?uuid=e0e6242c-c6a3-46b5-9290-82c031d10a6f | &removemargin=true | &removeheader=true | &name={{first_name}}%20{{last_name}} | &email={{email}} |