How to integrate a Maze with a Thinkific course

Level of expertise: Easy

Purpose

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.

Overview

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

User flow from the learner's perspective

1. Learner starts the course in Thinkific and clicks 'Complete & Continue' lesson.
2. Multimedia lesson loads with the Mazetec player embedded.
3. Mazetec captures the learner's name and email from Thinkific in the background.
4. Learner clicks 'Start' and finishes Mazetec Roleplay - All of the learner's attempts are captured (with name and email) in Mazetec Analytics
5. Learner clicks “Complete & continue” button to move forward in the Thinkific course.

---

Integration Steps

Step 1 - Create a new link and tag it.

Starting in Mazetec, open the Maze you wish to integrate and click Link >>> Distribute Maze or from the dashboard click the "..." more button.

Step 1.1. Click the "..." More menu on your Dashboard and click "Distribute Maze"

Step 1.2. Click "Create Maze link"

Step 1.3. Select "Require name and email" and add a Tag to the link

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.

Step 1.4. Copy the new link

Step 1.5. Test your link - copy and paste in your Browser

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.

Step 2 - Create a new lesson in Thinkific

Step 2.1. Select "New lesson" and choose the "Multimedia Lesson" option.

Step 2.2. Paste your Maze link into the URL field for externally hosted content.

Step 3 - Add the link to the lesson and the variables in the link

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:

• The Name and Email modal is automatically populated with the data for the learner.
• Mazetec then validates the values to validate the expected type.
• Mazetec automatically closes the modal and the user is on the Start node.

Step 3.1 Copy the text below and Paste it at the end of your Maze link in the URL field

&removemargin=true&removeheader=true&name={{first_name}}%20{{last_name}}&email={{email}}

Now your link should look similar to this:

https://app.mazetec.org/player?uuid=a23a75c3-f083-4272-8644-1acf9128be12&removemargin=true&removeheader=true&name={{first_name}}%20{{last_name}}&email={{email}}

Example of what the link looks like in Thinkific

---

Prevent user from skipping your Maze in Thinkific.

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.

Steps

1. In your Thinkific Course, go to Settings > Code & analytics > Site footer code.

Here's what it should look like.

2. Copy and Paste the following code into the text box and click "Save", then Preview your course.

---

<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>

---

Additional Details

Error handling

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.

Mazetec Player Data Variable

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	email	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.

---

Available Thinkific variables

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	{{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

How is data passed into Mazetec using these variables?

Data is passed into Mazetec by setting the variables in the embed link.

Map of Mazetec variables to Thinkific variables

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}}

Understanding Parts in the Mazetec Player link

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}}