Thinkific integration

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

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"

more menu distribute maze

create new maze link

You much 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. configure the link by selecting Require name and email

copy-new-link.jpg

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.

name-and-email-modal.jpg

Step 2 - Create a new lesson in Thinkific

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

Mazetec Thinkific integration new lesson

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.

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

Mazetec Thinkific integration set link with variables



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. Advanced Thinkific integration

  1. 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}}
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}}
Last modified on February 12, 2021