Keep your Teachable course one click away from your Circle topics! With the use of embeds, you can easily display your community making it easy for students to engage in discussions. By using code snippets you can insert an icon in the lower right-hand corner of your Teachable Course that will pop-up when clicked to display an embed your community contents.


Option 1: Community Widget

In Teachable, navigate to Admin → Site → Code Snippets → Logged Out Snippets


To find your custom embed code, navigate back to Circle Settings → Embed.

You can optionally specify a default space or topic slug, otherwise, your community will land on the default space selected under Settings → General.

  • To find your space slug, navigate to Space → Edit Space
  • To find your topic slug, navigate to Space → Topic → Edit Topic
You will want to make sure you:
  • Insert the slug between the ' ' characters
  • Remove the // characters before each line


Option 2: Embed a Space or Topic on a Specific Course Page


Step 1: First, make sure that your space slug (Space → Edit in Circle) and Teachable's course "friendly URL" (Courses -> Course -> Information in Teachable) are the same. 

For example, your URLs should resemble the following:

- demo.teachable.com/p/onboarding
- demo.circle.so/c/onboarding

Step 2: Insert Community Widget into 'layouts/enrolled_course' template

Navigate to Admin → Site → Power Editor → Search for 'layouts/enrolled_course'.


You will want to use your Community Widget. Navigate back to Circle to copy your code under Settings → Embed → Community Widget.


Replace the lines beginning with the "//" characters, with the code below:

    mw('setDefaults', {
    space_slug: '{% if course.friendly_url %}{{ course.friendly_url }}{% endif %}',
    topic_slug: ''
    });

You can insert this code just before the </head> tag within Teachable.

Hit Save and Publish when you're done!

Step 3: Copy and paste the code from Step 2 into the 'layouts/lecture' folder

Place this snippet right before your code begins: 

{% if course.friendly_url == "insert-slug-here" %}

Paste this snippet at the very end of your code: 

{% endif %}

🏁 Save and publish your changes!

Option 3: Embed Topic Comments on a Page

You can take engagement a step further and connect specific topics created in your Circle Community, to specific Teachable lessons. This is the perfect way to boost your community engagement and integrate those conversations natively.


In Teachable, navigate to Admin → Courses → Lesson → Add Custom Code


To locate the custom code, navigate back to Circle Settings → Embed → Topic Widget.

To find your topic slug you can navigate to Space → Topic → Edit Topic.


The topic widget will allow you to embed a specific topic to a lesson. All comments will appear across both platforms! If the topic you are embedding is in a private space, a user will need to be logged in to Circle as well to view this within Teachable.

Suggested Articles: