How to Embed a Widget on Teachable

Teachable is one of the most popular online course platforms, used by thousands of creators to sell courses and coaching. This guide shows you how to embed interactive Embeddy widgets — like quizzes, assessments, and calculators — on your Teachable sales pages and course content using the Custom HTML block and code snippets.

Beginner~5 min readUpdated 2026

On this page

Prerequisites

Before you embed your widget, you need two things:

  • Your Embeddy embed code. Log in to your dashboard at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code. It looks like this:
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>
  • Teachable school owner or admin access. You need owner or admin privileges to edit page layouts and add custom code blocks on Teachable.

Plan requirement

Custom code blocks and code injection are available on Teachable's Basic plan and above. The free plan has limited customization options and may not support custom HTML blocks.

Sales & Landing Pages

Teachable's page editor lets you build sales pages for your courses using a block-based system. The Custom HTML / Code Snippet block is the primary way to embed iframes and third-party widgets.

  1. 1

    Navigate to your course sales page

    In your Teachable admin, go to Site > Pages or navigate to the specific course and select Sales Page.

  2. 2

    Add a Code Snippet block

    Click the + button to add a new block. Select "Code Snippet" or "Custom HTML" from the block list. This block accepts raw HTML including iframes.

  3. 3

    Paste your embed code

    Paste your Embeddy iframe code into the HTML editor field. The block will show the raw code in the editor view.

  4. 4

    Preview and save

    Click Preview to verify the widget renders correctly, then click Save to publish your changes.

Tip: Place an interactive quiz or assessment widget above the pricing section on your sales page. This lets prospective students engage with your content before purchasing, which can increase conversion rates.

Course Curriculum Pages

You can also embed widgets directly into individual course lectures. Teachable lectures support a text editor where you can add custom HTML alongside your video content.

  1. 1

    Open the lecture editor

    Navigate to your course curriculum and click on the lecture you want to edit.

  2. 2

    Add a Code Snippet block

    In the lecture content area, click Add Block and choose "Code Snippet". This block type allows raw HTML including iframes.

  3. 3

    Paste and save

    Paste your Embeddy iframe code and click Save. The widget will appear inline with your lecture content.

Course creator tip

Embed interactive quizzes at the end of each module to reinforce learning. You can also embed calculators or interactive tools that complement your lesson content, giving students a hands-on learning experience.

Code Injection (Site-Wide)

Teachable also offers a site-wide code injection feature for adding scripts to the head or footer of every page. While this is not ideal for placing a widget on a specific page, it can be useful for adding global tracking scripts or utilities.

  1. 1

    Go to Settings

    In your Teachable admin, navigate to Settings > Code Snippets.

  2. 2

    Paste in the footer code area

    Paste your Embeddy embed code in the Footer Code section. This adds the code to every page on your school.

Note: For page-specific widgets, always prefer the Code Snippet block method described above. Code injection is best suited for analytics scripts or site-wide utilities, not individual widget embeds.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Teachable. Copy your specific code from the Embeddy dashboard — the WIDGET_ID and PROPS_ID values will be filled in automatically.

<!-- Embeddy widget embed — paste into Teachable Code Snippet block -->
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="My Embeddy Widget"
></iframe>

You can adjust height to match your widget's content. Use width="100%" to make the embed responsive across all screen sizes.

Troubleshooting

The widget does not appear in the editor

Teachable's editor may not render iframes in the editing view. Use the Preview button to see the widget on the live page. This is expected behavior.

The Code Snippet block is not available

Code Snippet blocks require the Basic plan or higher. If you are on the free plan, upgrade your Teachable subscription to access custom HTML blocks.

Widget shows a blank area

Verify your Widget ID and Props ID in the embed URL are correct. Open the Embeddy dashboard and copy the embed code again. Confirm that the widget is published (not in draft mode).

Widget is cut off or too small

Increase the height attribute in your iframe code. Try height="600" or higher depending on your widget's content.

Embed code is stripped after saving

Make sure you are using a Code Snippet block, not a regular text block. Text blocks may sanitize HTML and strip iframe tags. Only Code Snippet blocks preserve raw HTML.

Frequently Asked Questions

Can I embed interactive quizzes in Teachable lectures?

Yes. While Teachable has a built-in quiz feature, it is limited to multiple-choice questions. Using Embeddy widgets, you can add richer interactive quizzes, assessments, calculators, and other tools directly within your lecture content via Code Snippet blocks.

Does embedding a widget affect my Teachable page speed?

No. Iframes load independently of your main page. The widget loads from Embeddy's servers in a separate browser thread and does not block your page's rendering. Using loading="lazy" further defers loading until the widget scrolls into view.

Can I use the same widget across multiple Teachable courses?

Yes — paste the same embed code on as many pages and lectures as you like. If you update the widget in the Embeddy dashboard, all embedded instances update automatically.

Ready to build your widget?

Create a free Embeddy widget — no code required. Get your embed code in minutes and drop it into your Teachable school.

Create your free widget at embeddy.ai