Integrating Teachable with Discourse

The integration consists of two steps; automatically inviting new Teachable registrants to join your Discourse forum (no additional forms to fill out);
and an optional step to automatically add discussion topics to Discourse. See more details below.

Automatically inviting new users to the forum

We are going to set up a webhook so new users in Teachable will get an invitation to join your forum.

This can be done using Zapier, but in case you are hosting your forum with Communiteq Discourse hosting you won’t be needing Zapier, since we provide the webhook endpoint ourselves.

Our hosting plans for your Discourse forum start at only $20 per month – that’s the same as you’ll save when you don’t need to pay for Zapier any more!

With your Communiteq hosted Discourse forum

1) First of all, log in to your forum and go to the Plugins menu. Scroll down and click the Settings button next to the Teachable plugin.

1plugins-a

2) You will be taken to the plugin configuration screen:

2settings

3) Then, enable the plugin and optionally modify the other two settings: enter the welcome text that is sent in the email, and set the user that will be sending the emails. If you do not choose a user, the mails will be sent by the first admin user of your forum.

3settings

You’re going to need the “secret” value later, we’ll get back to that in a moment.

4) Next step is to configure the webhook on Teachable side. Log in into your Teachable environment and go to Settings by clicking on the Cog in the lower left side. Then select Webhooks in the menu. You will be taken to the webhook configuration screen.

4webhooksa

5) Click the “New Webhook” button and fill in the URL. That consists of three parts.

  • The first part is the address of your forum.
  • The second part is /teachablewebhooks/incoming/.
  • And the third part is the ‘teachable webhooks secret’ that you copied from the Discourse forum Settings area, as shown below:

5secret

The Event Trigger should be set to New User, as shown below:

5create webhook-a

Now you have successfully connected Discourse and your users will receive invitations to the forum once they sign up for your Teachable school.

Once the first invitation has been sent the “Pending” in the webhooks screen will change to “Verified”.

6) Starting with version 1.1 of our integration, we support the New Enrollment event as well.

In order to set up the New Enrollment webhook just follow the directions above but choose the ‘New Enrollment’ Event Trigger instead.

The New Enrollment event does need some additional configuration on Discourse side:

  • You’ll need to create a category with the same name as your course;
  • don’t forget to edit the welcome topic for the category!
  • you’ll need to create a group with the same (full) name as your course
  • go to the category security permissions and add that group with create/reply/see permissions (and you will probably want to remove the permissions for the ‘everyone’ group).

When a user enrolls in your course, they will be added to the group (which will grant them access to the category), and invited to the welcome topic of the category.

You can use the New Enrollment webhook next to the New User webhook, but you can also choose to use the New Enrollment webhook only.

This feature is still in beta. If you want to use the New Enrollment functionality, please check if your integration is version 1.1 or higher. If it is not on version 1.1 yet, please open a support ticket and we will make sure you get access.

Embedding discussions

This is an optional step.

In order to embed discussions, you will need to configure things on both sides.

1) So let’s first go back to Discourse, go to Admin – Customize – Embedding and click “Add Host”:

6addembed1a

2) Enter the URL of your Teachable environment, choose the category where you want posts to be created, and click the checkmark.

6addembed2a

3) An important step that you should not forget: scroll down and enter the username that will be used in order to create the topics in Discourse.

6addembed3a

4) And finally, head back to Teachable, go to Site, Code Snippets, Logged in,

7add snippetb

5) Copy the code snippet below and fill in the URL of your forum on the 12th line.

<script type="text/javascript">
function removeParams(s) 
{
  return s.substring(0, s.indexOf('?'));
}

function addDiscourse(url)
{
  var embedUrl = url || $('link[rel="canonical"]').attr('href')

  DiscourseEmbed = { 
    discourseUrl: 'https://YOUR_FORUM_HOST_HERE/',
    discourseEmbedUrl: url || window.location.href
  };

  window.addEventListener('message', function (e) {
    function nu(url) {return url.toLowerCase().replace(/^https?(\:\/\/)?/, '');}
    if (!e || nu(DiscourseEmbed.discourseUrl).indexOf(nu(e.origin)) === -1) { return; }
    $('.hidewhenloaded').hide();
  }, false);

  var d = document.createElement('script'); 
  d.type = 'text/javascript'; d.async = true;
  d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
  $('.lecture-content').append('<div id="discourse-comments"><a class="hidewhenloaded" href="' + 
    removeParams(DiscourseEmbed.discourseUrl) + '" target="_blank">' +
    'Click here to log in to the forum and participate in the discussion</a></div>');
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
}

document.addEventListener("lecture:change", function(e) {
  addDiscourse(e.target.url);
});

$( document ).ready(function() {
  addDiscourse();
});

</script>
 

6) When you copied the code and changed the third line, press the Save button.

7) And that’s all there is to it. Now your lectures will show a ‘Start Discussion’ link that will take people to the forum so they can discuss the lecture.

“One Moment” is a registered trademark of the One Moment Company, LLC.