Teachable

Sell courses from a custom-designed marketing site while Teachable handles video hosting, quizzes, memberships, payments, and student progress tracking. Design landing pages and a branded experience here, then hand off checkout, enrollment, and course delivery to Teachable, embedding buy buttons or wiring form submissions to CMS records along the way.

This split fits course creators, EdTech companies, language teachers, finance instructors, and fitness coaches, plus agencies building course sites for clients who want more design freedom than Teachable's native pages offer.

How to integrate Teachable with Webflow

What is Teachable? Teachable is an online course platform that lets creators build and sell courses, coaching, digital downloads, and memberships. It handles video hosting, drip content, auto-graded quizzes, and completion certificates. It's built-in checkout supports 120 currencies across 200+ countries, plus a public API and webhooks for developers.

A common setup keeps the front-facing marketing site here and uses Teachable for the authenticated student portal. Teachable itself runs both its marketing site and its course-discovery subdomain on Webflow. Design your sales pages and blog here, then connect to Teachable for checkout, enrollment, and student tracking.

Choose the method based on how much control you need:

• Native features, direct embeds, and Code Embed let you add Teachable checkout buttons and links to your pages without writing code.
• Zapier automation connects form submissions to Teachable enrollment and syncs student data into the CMS.
• The Data API and Teachable API give you full control over CMS sync, gated content, and enrollment workflows, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add Teachable checkout with Code Embed and links

The simplest way to connect the two tools uses Teachable's checkout URLs and embed codes. The documented selling methods are Teachable checkout URLs and embed codes, and the Marketplace does not include a native Teachable app. Link any button to a Teachable checkout page or embed the buy button directly so visitors purchase without leaving your site. These methods need only copy and paste, though publishing custom code requires a paid Site plan.

Link a Webflow button to a Teachable checkout

Use this method when you want visitors to complete checkout on Teachable's hosted page. Linking out keeps your site in the lowest PCI scope, since the merchant page only redirects to a compliant processor.

To link a button to Teachable checkout:

1. In your Teachable school admin, go to the product, then Pricing, and find the pricing plan.
2. Click Copy next to the URL in the Checkout URL column.
3. Select your button or text link in the Designer and paste the URL into the link settings.

This approach works fully no-code in both tools and is the safest option for payment compliance.

Embed the Teachable buy button with Code Embed

Embed Teachable's buy button when you want checkout to appear inline on the page. Generate the embed code from your Teachable admin dashboard, then drop it into a Code Embed element. Teachable describes the buy button as a way to "integrate Teachable's checkout process right into your site." Embedding checkout inline may expand your PCI scope, so evaluate that before going live.

To embed the buy button:

1. Generate the embed code in your Teachable admin dashboard.
2. Add a Code Embed element where you want the button to appear.
3. Paste the Teachable code into the element, then publish your site.

Code Embed elements show only as placeholders in the Designer and render after you publish. Custom code sections cap at 50,000 characters and support HTML, CSS, and JavaScript only.

Point Teachable to your Webflow sales page

Tell Teachable where your sales page lives so course purchase links route to the right place. You can also redirect your Teachable school homepage to your custom domain. This routes purchase traffic to your pages instead of Teachable's default pages.

To set your external sales page:

1. In Teachable admin, open your course and go to the Setup guide tab.
2. In Set up your purchase journey, open the dropdown under "Where would you like to promote your course?"
3. Select My external website and enter your full URL, including https://, then Save.

You can also add site-wide tracking pixels and analytics under Custom code in head and body tags, though head code does not apply to Teachable SSO login or checkout pages.

Connect with Zapier automation

Zapier offers a verified direct connection between Webflow and Teachable with pre-built templates. Use it to enroll students from form submissions or to populate CMS records when someone enrolls or completes a course. This is the officially documented automation method, and it works no-code. Enrollment actions require a Teachable Professional plan or higher.

Available triggers and actions include:

• New form submission → enroll the lead as a user in a Teachable course
• New form submission → add the person as a new Teachable user
• Teachable new enrollment → create a live CMS item
• Teachable new transaction → create a CMS item

You can find these flows as starting templates at Zapier's Teachable and Webflow integration page.

Build with the Data API and Teachable API

For full control over CMS sync and workflows such as gated content or automated certification, use the APIs directly. This path requires server-side development. CORS policies block write operations from the browser, so any API call that modifies data runs on a server or serverless function. API access on Teachable requires a Growth plan or higher.

The available APIs cover these scopes:

• Teachable API v1 handles users, courses, enrollments, and transactions, authenticated with an apiKey header
• The Data API handles CMS collections and form submissions
• Webhooks trigger real-time events between systems

These endpoints let you build sync flows in either direction. The sub-methods below cover the most common cases.

Enroll a Webflow form lead in Teachable

Use this flow to enroll students automatically when someone submits a form. Register a webhook on form submissions, then call Teachable to enroll the user.

To implement this:

1. Register a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks using the form_submission trigger and sites:write scope.
2. Read the submission payload fields name, siteId, data, submittedAt, and formId.
3. Enroll the lead in Teachable with POST /v1/enroll, authenticated with the apiKey header.

This removes manual enrollment work and keeps lead capture and course access connected.

Sync Teachable enrollments to Webflow CMS

Use this flow to build a student directory or member database in the CMS. A Teachable webhook fires on enrollment, and your server creates the matching CMS item.

To implement this:

1. Subscribe to the Teachable Enrollment.created event and read fields like user.email, user.name, course.name, and enrolled_at.
2. Create a CMS item with POST https://api.webflow.com/v2/collections/{collection_id}/items using CMS:write scope and a fieldData object matching your collection schema.
3. Publish the item, since items created via POST are drafts by default.

Keep in mind that the CMS plan holds up to 2,000 CMS items and the Business plan holds up to 10,000, so plan capacity around expected enrollment volume.

Sync your Teachable course catalog to Webflow

To display and update a course catalog in the CMS, sync course data through the API. Teachable has no course.published or course.updated webhook, so catalog sync relies on scheduled polling rather than push events.

To implement this:

1. Poll the Teachable GET /v1/courses endpoint on a schedule to retrieve current courses.
2. Create or update CMS items with POST or PATCH /v2/collections/{collection_id}/items. Paginate with offset and limit up to 100.
3. Publish updated items so changes go live.

This polling approach keeps a Collection List of courses current on your site without a real-time push event.

What can you build with the Teachable Webflow integration?

Integrating Teachable with your site lets you sell courses from custom marketing pages and automate student data without redirecting buyers away.

• Course landing page with inline checkout: Design a course sales page and embed a Teachable buy button so visitors purchase without leaving. The Master the Handpan music school built its entire marketing site in Webflow while running courses on Teachable.
• Lead capture to enrollment automation: Build a lead form that enrolls submitters in a free trial Teachable course through Zapier. Form entries also flow into CMS Collections for a connected record.
• Student or member directory: Use Teachable webhooks and the Data API to create a CMS item for each enrollment. This builds a live member directory or student listing that updates as people join.
• Branded course catalog: Poll the Teachable courses endpoint and sync results into a CMS Collection. A Collection List then renders your full catalog with your own design instead of Teachable's native pages.

If you need more control over gated content or certification workflows, the API integration path covers those cases with full flexibility.