Teachable Gamification Integration
Want to motivate students to complete courses and engage as a community? Use Pointagram to gamify your Teachable course!
With Pointagram, you can add a point system to a course’s activities and create a fun and more interactive experience. Generate competitions between students with leaderboards, badges awarded as they progress, and display metrics. You can even set it up so students can convert points to virtual coins for buying rewards.
It’s a great way to increase course completion rates while also giving students well-deserved recognition for their hard work. But that’s not all! You can also fetch data from other data sources as well!
Installing Teachable
To start using Pointagram and Teachable together, you’ll first need to sign up for accounts on both platforms. Once you’ve done that, head to the Settings and Integrations section of Pointagram. You can find Settings on the left navigation bar at the bottom of the page – look for the gear-wheel icon.
Once you’re in the Integrations tab, install the Teachable App. After that, you’ll need to update your authentication key by clicking on the “Update key” button. You can find your authentication key in Teachable under Settings and API Key. If you don’t have an active key, you’ll need to create one and then paste it into Pointagram.
Next, you’ll need to copy the Integration.webhook.url link from the Pointagram settings page. You can do this by clicking on “show url”, selecting the link, and copying it. Then, head over to Teachable and create a new webhook by going to Settings and Webhooks. Paste the URL into the webhook you’re creating
Finally, you’ll want to make sure that you’re subscribed to the right events in Teachable. The supported events include:
- New Enrollment
- Lesson Completed
- Enrollment Completed
- New User
- User Profile Updated
Once you’ve completed all these steps, don’t forget to enable Share settings on the Pointagram settings page. This will allow you to embed Pointagram pages into Teachable.
Then go to the Steps tab in Pointagram. A popup will appear with all the steps available – just press “Add”.
Now you are done.
Want to add all existing students immediately to Pointagram? Press on the User.created/User.updated 3-dotted menu and import players.
Installation is done, what now?
Players
On Teachable student sign-in and sign-up, Pointagram receives student data and creates students as players in Pointagram.
Points
Pointagram has added one score series called Points. So, now we are starting to track students in Pointagram.
Teachable course activities are added as point types in Pointagram. When editing Points score series from the 3-dotted menu, you will find point types under point input. Here you can configure how much each activity is worth.
Point tags
Every point added to Pointagram gets tagged with a course name. It gives the point context and more filtering options. A use case can be that only specific course points should qualify for a badge, competition, or a KPI widget. Read more about the score series in general. Continue reading here.
Naming a course: How to excel in #Sales ?
Pointagram will add the whole course name as a tag and Sales as a separate tag. This gives more flexibility to gamify a specific topic like sales when using this type of naming convention. So, hashtags in the course name will generate an extra tag.
How to embed Pointagram pages
Pointagram adds a pages into Teachable by utilizing Teachable’s own site builder function. Embed Pointagram by adding a HTML blck in Teachable. The most common way is to add a custom page, then add a Pointagram code block and link it to a header.
Teachable Own Guides, Good To Read:
- Press on Site – Create a custom page.
- Press on Pages
- Add custom page, name your page.
- Add a custom HTML block
- Add your HTML snippet.
How to embed Profile Page code snippet
After have added the HTML block, copy and paste the code below and add it to the block. NOTE, if you hover over the code, you will get a copy option.
Important! In the first two rows, you have to place your App Shared Secret Value and App Id Value. Here is how you retrieve them.
{% assign appsharedsecret_value = 'add your appsharedsecret here' %}
{% assign appid_value = 'add your appid here' %}
{%- capture my_public_string -%} TE:{{current_user.id}} {{ appid_value }} {{"now" | date: "%s"}}{%- endcapture -%}
{%- assign secret_message = my_public_string | hmac_sha256: appsharedsecret_value -%}
How to embed Reward Store code snippet
After have added the HTML block, copy and paste the code below and add it to the block. NOTE, if you hover over the code, you will get a copy option.
Important! In the first two rows, you have to place your App Shared Secret Value and App Id Value. Here is how you retrieve them.
{% assign appsharedsecret_value = 'add your appsharedsecret here' %}
{% assign appid_value = 'add your appid here' %}
{%- capture my_public_string -%} TE:{{current_user.id}} {{ appid_value }} {{"now" | date: "%s"}}{%- endcapture -%}
{%- assign secret_message = my_public_string | hmac_sha256: appsharedsecret_value -%}
How to embed Competition code snippet
After have added the HTML block, copy and paste the code below and add it to the block. NOTE, if you hover over the code, you will get a copy option.
Important! In the first three rows, you have to place your App Shared Secret Value, App Id Value, and Competition ID. Here is how you retrieve them.
{% assign appsharedsecret_value = 'add your appsharedsecret here' %}
{% assign appid_value = 'add your appid here' %}
{% assign competitionid_value = 'add your competition id here' %}
{%- capture my_public_string -%} TE:{{current_user.id}} {{ appid_value }} {{"now" | date: "%s"}}{%- endcapture -%}
{%- assign secret_message = my_public_string | hmac_sha256: appsharedsecret_value -%}
How to embed Widgetboard code snippet
After have added the HTML block, copy and paste the code below and add it to the block. NOTE, if you hover over the code, you will get a copy option.
Important! In the first three rows, you have to place your App Shared Secret Value, App Id Value, and Widgetboard ID. Here is how you retrieve them.
{% assign appsharedsecret_value = 'add your appsharedsecret here' %}
{% assign appid_value = 'add your appid here' %}
{% assign widgetboardid_value = 'add your widgetboard id here' %}
{%- capture my_public_string -%} TE:{{current_user.id}} {{ appid_value }} {{"now" | date: "%s"}}{%- endcapture -%}
{%- assign secret_message = my_public_string | hmac_sha256: appsharedsecret_value -%}
How to add course player notifications
The course players fire events on a lesson and course completion that trigger a pop-up notification. The pop-up shows how many points the student scored in Pointagram for the Points score series and any linked scores series to Points.
A notification will also appear on ongoing/awarded badges.
At the moment, if you have custom domain, you need to reach out to support@pointagram.com for us to enable your custom domain.
Are you looking to customize your pop-up design or add specific links to your notification? We are using Toast.js for pop-up messages, which are highly customizable: Read here.
How to Install
Copy the code below and paste it to your Teachable Logged in Code Snippets. The Logged in Code Snippets is found under Site – > Code Snippets.
Common questions
No, it only tracks new events from Teachable. Adding history can be done manually in Pointagram with tags and specific dates.
Yes, you can. Important that the Teachable User and Pointagram User have the same email address. On Teachable sign-in or sign up we will then pair the users.
If you only are embedding Pointagram into Teachable, make sure to only add the players as Offline players. Read more about managing players.
Yes. Pointagram has a team function. At the moment adding players to teams is done manually. There are Pointagram APIs that can handle this type of automation. Get in touch with our team if you need any help.