Teachable

How to integrate Teachable with Webflow

Connecting Teachable with Webflow lets you sell courses through custom-designed marketing sites, sync student data to member directories, and automate enrollment workflows without manual updates.

Connect these platforms through Zapier automation for enrollment syncing, Teachable embed codes for checkout buttons, or API webhooks for custom features like gated content. Automation tools handle standard workflows without coding, embeds add checkout functionality to Webflow pages, and APIs support custom implementations.

Connect through Zapier automation

Integrate Teachable with Webflow through Zapier to sync enrollment data, student information, and course completions to Webflow's CMS automatically. When students enroll in courses or complete lessons, Zapier creates or updates corresponding CMS items in your Webflow site using pre-built templates.

Note: Zapier integration requires Teachable Growth plan ($139/month) or higher.

Set up automation by connecting both platforms through Zapier's authentication system. Configure trigger events from Teachable like new enrollments and corresponding actions in Webflow like creating CMS items. The visual workflow builder shows how data flows between platforms.

Common automation workflows:

• Create Webflow CMS items from new enrollments to add student profiles to member directories when users enroll
• Update course completion status to track student progress in Webflow CMS collections
• Sync student information to keep user data current across both platforms
• Trigger notifications to send data to other services when course events occur

Zapier handles authentication, error handling, and data transformation automatically. Test automations before activating them to verify data mapping works correctly.

Embed Teachable checkout on Webflow pages

Teachable provides embed codes for buy buttons and checkout flows that work directly in Webflow. Students complete purchases without leaving your Webflow site while Teachable's infrastructure handles payment processing, transaction security, and order fulfillment.

Access the embed code generator in your Teachable admin dashboard. Select the course or product you want to sell, then copy the generated embed code.

In Webflow, add an Embed element where you want the button to appear. Paste the Teachable code into the embed element, then publish your Webflow site to activate the checkout functionality.

Embed capabilities:

• Buy buttons for individual courses or bundles
• Complete checkout flows that handle entire transaction process within embedded interface
• Secure payment processing managed by Teachable
• Responsive design that adapts to mobile and desktop viewports

Style the surrounding Webflow elements to match your design system. The embedded checkout inherits your Teachable branding settings. Configure external website navigation in Teachable's Site > Navigation settings to control redirect behavior after purchases.

Build with Webflow and Teachable APIs

Teachable's webhook events send real-time notifications when students enroll, complete courses, or make purchases. Webflow's APIs allow programmatic interactions with your site data. Combining these capabilities enables custom features like gated content, personalized dashboards, or automated certification workflows.

Note: Webhooks are available on Teachable Basic/Builder plans and higher. API access requires Growth plan or higher.

Set up webhook endpoints that receive Teachable event data. Process the payload and make corresponding API calls to Webflow. For example, when Teachable fires an Enrollment.created event, your endpoint can call the Webflow Data API to create a new CMS item granting course access.

Complete API documentation requires authenticated developer accounts on both platforms. Access developers.webflow.com for Webflow API specifications and Teachable's developer portal for webhook payload details.

Available webhook events:

• User.created for new user registrations and creating Webflow CMS profiles
• User.updated for profile changes and real-time data synchronization
• Enrollment.created for new student enrollments and restricting content to enrolled students
• Enrollment.completed for course completion and certification workflows
• LectureProgress.created for individual lecture completion tracking
• Sale.created for purchase completions with transaction data
• Transaction.refunded for refund events and access revocation
• UserTag.created for tagging events and showing different content to different user groups
• Comment.created for course discussion activity

Sync enrollment data to Webflow CMS

Build custom synchronization that creates Webflow CMS items when students enroll in courses. Configure Teachable webhooks to send Enrollment.created events to your endpoint. Your server receives enrollment data including student email, course ID, and enrollment date, then makes API calls to Webflow to create corresponding CMS items in your student directory or member database.

This pattern works for member directories, student showcases, or course completion certificates. Your Webflow site displays current enrollment data without manual updates while students see their progress reflected immediately after completing lessons.

Create gated content based on enrollment

Restrict Webflow pages to enrolled students by checking enrollment status through API calls. When users visit protected pages, verify their enrollment through Teachable's API before granting access. Implement custom middleware or serverless functions to handle access verification.

Combine Teachable's Enrollment.created and Enrollment.deleted webhooks with your custom access control logic. Your server receives enrollment changes and updates access permissions accordingly. This approach works for premium content, member-only resources, or student communities.

What you can build

Integrating Teachable with Webflow lets you create custom learning experiences that combine course functionality with full design control.

• Student dashboards: Build personalized Webflow pages that display enrollment status, course progress, and completion certificates by syncing Teachable enrollment data to Webflow CMS collections
• Marketing sites with embedded checkout: Design course landing pages in Webflow and add Teachable's checkout embeds so visitors browse course information on your custom site and purchase without platform redirects
• Member directories: Automatically populate Webflow CMS collections with student profiles when users enroll through Teachable to create searchable directories showing course completions, student cohorts, or alumni networks
• Automated certification pages: Generate individual certificate pages in Webflow when students complete courses using Teachable's Enrollment.completed webhook, giving each certificate a unique URL with student name, course details, and completion date