How to integrate a Thinglink content

Thinglink is a great tool to creating interactive content using images or videos. Check out their website here: thinglink.com.

Here are examples of a video content and an image content created with Thinglink.

Things to know

• The Thinglink integration in Teach on Mars requires an internet connection. If you wish to have offline access to the content, you need to do it through the Thinglink mobile (or desktop) application (more information here)

• You will need a paid account to Thinglink in order to be able to make your content visible to your audience. More info here.

• For now, the data sent by the content is minimal. Thinglink does not communicate directly with the app and the Mission Center. The time spent in the content will be tracked, and the content will be set to completed when the user closes it, even if he did not reach the end. Points can also be given to the learner who opens the content (see later).

• The integration only works properly with Interactive images and Interactive videos. Interactive 360 images and Interactive 360 videos are not supported yet.

Create your own Thinglink activity

Step 1: Create your content in Thinglink

Thinglink is a pretty intuitive tool but if here is a link to their help center just in case.

Tip: Hide the Thinglink logo

There is a way to hide the logo in the bottom right hand corner of the content. Just open the settings of your content and check the Hide logo option. Like so:

Step 2: Publish your content

First, you need to select the right settings from the settings menu.

Select Unlisted as shown below

Then open the PUBLISH menu

And copy the URL of the embed code (selected in the screenshot below, between the quotes after src= )

This URL will be useful in the next step. Keep it safe somewhere.

Step 3: Create the web activity

Download the example archive from here and open it.

Edit the file data/data.js with a simple text file editor (like Sublime Text for instance) and replace the URL in this file with yours (from step 2):

window.TL = {
 url: "https://www.thinglink.com/card/1283397773818855427",
 points: 0
};

You can also define an amount of points that the learner will earn when launching this activity for the first time. Just enter an integer like 100 instead of 0 in the points property. In order to keep consistency with other activities, please read How are learners points calculated?.

When you're done, save and archive the files again in a new ZIP file. And that's that!

NB: Maybe you have noticed that there are two examples (one image, and one video) in the repository, but the archives are actually identical, you just need to copy the URL for your video or your image.

You can now upload your archive to the Mission Center in a Web Activity as described in the article: How to integrate a web activity?

Update your Thinglink activity

If you have done some changes in your Thinglink activity, just Publish these modifications in Thinglink, there is no need to upload your package again in the Mission Center.