Thinkific

How to integrate Thinkific with Webflow

Integrating Thinkific with Webflow requires a split-site architecture. Webflow handles marketing and sales pages, while Thinkific manages course delivery via its learning management system. Thinkific cannot be embedded in iframes on external domains, preventing direct integration of course content into Webflow pages.

Connect the platforms using Sales Widgets (pre-built buttons generated by Thinkific), direct checkout links (linking Webflow buttons to Thinkific course URLs), Zapier automation workflows for enrollment management, or custom API middleware for advanced synchronization.

Zapier provides documented automation for both platforms, with pre-built workflows for enrollment management that don't require custom code.

Direct checkout links

Direct checkout links are the simplest method to connect Thinkific with Webflow. This approach is 100% no-code and requires only standard button linking.

How to implement:

1. In your Thinkific admin, locate your course and copy the direct checkout URL from course settings
2. In Webflow, create a button element on your page
3. Link the button to your Thinkific checkout URL (e.g., yourschool.thinkific.com/checkout/course-slug)
4. Customize button text and styling as needed
5. Publish your site

Visitors click the button and are redirected to Thinkific's hosted checkout, where they complete purchases and receive immediate course access. The hosted checkout includes PCI compliance managed automatically by Thinkific, a mobile-optimized checkout experience, and immediate course access after purchase. The additional features on TCommerce plans include BNPL options, Apple Pay/Google Pay, gift purchases, and abandoned cart recovery.

Native features, direct embeds and widgets

Thinkific provides Sales Widgets for connecting to Webflow without the need for automation tools or custom code. These widgets create promotional buttons and cards that link to your Thinkific checkout or landing pages.

Sales Widgets

Sales Widgets add customizable course enrollment buttons to Webflow pages without writing code. Generate embed codes through Thinkific's interface, customize colors and button text with built-in tools, then paste the code into Webflow's Code Embed element.

Implementation steps:

1. Publish your course in Thinkific
2. Navigate to Sales Widgets in your Thinkific admin dashboard
3. Select the course you want to promote
4. Choose widget style (button or card format)
5. Customize appearance using the color picker and text editor
6. Set the link destination (checkout page, landing page, or custom URL)
7. Click Generate embed code
8. Copy the generated HTML
9. In Webflow, drag a Code Embed element onto your page
10. Double-click the Code Embed element and paste the Thinkific code
11. Click Save & Close and publish your site

Sales Widgets create promotional buttons or cards that link to your Thinkific checkout or landing pages. Thinkific cannot be fully embedded within iframes on external domains, so course pages, student dashboards, and the course player must be accessed on your Thinkific site. These widgets work as CTAs to direct students to your hosted Thinkific platform for enrollment and course access.

Find complete setup instructions in the Sales Widgets documentation.

Widget capabilities include:

• Button widgets create call-to-action elements with customizable colors and text
• Card widgets display visual course cards with thumbnails and descriptions
• Destination control links to checkout pages, course landing pages, or custom URLs
• Style customization matches your Webflow design through color picker

Sales widgets redirect users to Thinkific's hosted checkout when clicked. The hosted checkout flow handles payment processing, PCI compliance, and immediate course access after purchase.

Automate workflows with Zapier

Zapier is the primary and best-documented no-code platform for connecting Thinkific and Webflow, officially referenced by both platforms. According to Thinkific's official Zapier documentation, Zapier offers 8 Thinkific triggers (New Order, New Full Enrollment, Course Completed, Lesson Completed, New User, Subscription Cancelled, New Free Preview Enrollment, New Lead) and multiple actions (Enroll User, Unenroll User, Search User), combined with Webflow's 4 triggers and item management actions.

Important: Thinkific's "Enroll User" and "Unenroll User" actions in Zapier require a Thinkific Grow plan or higher. Thinkific triggers work on any plan.

Set up automation workflows through Zapier's Thinkific and Webflow integration. For example, trigger a "New Full Enrollment" in Thinkific to "Create Item" in a Webflow collection, automatically syncing student data to your member directories. Or configure "New Form Submission" from Webflow to "Enroll User" in Thinkific for automated enrollment workflows.

Some common automation workflows include:

• Form-to-Enrollment Automation creates Thinkific enrollments when users submit Webflow forms
• Member Directory Synchronization adds new students to Webflow CMS collections when they enroll in courses
• Progress Tracking Updates synchronizes Webflow items when students complete courses or lessons
• Order Synchronization creates CMS entries in Webflow when Thinkific processes payments

Thinkific triggers available in Zapier include New Order, New Full Enrollment, Course Completed, Lesson Completed, New User, Subscription Cancelled, New Free Preview Enrollment, and New Lead according to Thinkific's official Zapier documentation.

Webflow triggers available in Zapier include New Form Submission, New Order, New Item in Collection, and Updated Item according to Webflow's Zapier integration documentation. These triggers connect Webflow form submissions, e-commerce activities, and CMS updates to Thinkific actions like user enrollment and updates.

Zapier uses OAuth authentication (updated January 4, 2023) for connecting to Thinkific. According to Thinkific's Zapier documentation, Zapier's webhook-based triggers provide real-time synchronization between platforms.

Build with Webflow and Thinkific APIs

Important: Custom API integration requires an engineering team. Building middleware to connect Thinkific and Webflow APIs typically takes 40-80 hours of development time and requires backend programming experience. This approach is not suitable for non-technical users.

Custom API integration enables automated enrollment management and data synchronization through server-side middleware. Thinkific's iframe embedding prohibition prevents embedding course content directly in Webflow, requiring separate hosting on Thinkific's platform. Implement server-side middleware to synchronize Thinkific's enrollment and user data with Webflow's CMS and membership features through API calls and webhooks.

Thinkific cannot be embedded directly within Webflow due to Content Security Policy (CSP) headers and X-Frame-Options restrictions that prevent iframe embedding on external domains. For programmatic integrations using Thinkific's APIs, both platforms require backend middleware due to CORS (Cross-Origin Resource Sharing) restrictions. Browser security prevents client-side JavaScript from directly calling APIs on different domains. Your middleware server receives webhook events, processes data transformations, and makes authenticated API requests to both platforms.

Sync course catalogs to Webflow CMS

Use Thinkific's Sales Widgets to create promotional course cards and buttons on your Webflow site. Generate the embed code through Thinkific's admin interface, then paste it into a Webflow Code Embed element. When students click "Enroll," they're directed to Thinkific's hosted checkout. For real-time data synchronization, retrieve student enrollments and course updates from the Thinkific API and sync them to your Webflow CMS using the Collections API. Thinkific cannot be embedded in iframes on external domains per Thinkific's embedding policy, so course content and checkout must remain on Thinkific's platform. Use webhook integrations to automatically update your Webflow CMS when enrollments occur.

Implementation pattern:

1. Retrieve course data with GET https://api.thinkific.com/api/public/v1/courses/{courseid}
2. Map Thinkific fields (name, description, price) to your Webflow collection schema
3. Create items (staged) with POST https://api.webflow.com/v2/collections/{collectionid}/items
4. Publish staged content with POST https://api.webflow.com/v2/collections/{collectionid}/items/publish

The Thinkific API documentation provides complete endpoint specifications, authentication methods, and response schemas.

Automate student enrollment

According to Thinkific's Zapier documentation and the Webflow Zapier integration page, automating student enrollment from Webflow form submissions to Thinkific is the most common integration workflow.

Two primary methods:

Method 1: Form Submission to Enrollment (Zapier)

When a user submits a Webflow form, automatically create a Thinkific enrollment. Set the trigger to New Form Submission in Webflow and the action to Enroll User in Thinkific course. Students immediately gain course access without manual enrollment. Zapier's integration page confirms "enroll new Thinkific users from Webflow form submissions" as a documented workflow.

Note: Zapier's "Enroll User" action requires a Thinkific Grow plan or higher.

Method 2: Webhook-Based Real-Time Enrollment

For custom development, implement direct API integration. Configure Webflow form webhook to your endpoint, then your server receives form data and calls Thinkific Enrollment API endpoint with POST https://api.thinkific.com/api/public/v1/enrollments. This creates immediate course enrollment with automatic dashboard access. Thinkific's API documentation includes the Enrollments API for creating enrollments programmatically.

Implementation Steps (No-Code via Zapier):

1. Create course registration form in Webflow
2. Set up Zapier account and connect both platforms
3. Create automation using "When new Webflow form submission" trigger and "Enroll in Thinkific course" action
4. Map form fields (email, name) to Thinkific user fields
5. Test with sample submission
6. Publish form

Configure Webflow webhooks for form submissions, then use the Enrollments API to grant course access when users submit Webflow forms or purchase membership access.

Webhook configuration involves registering a webhook endpoint with POST https://api.thinkific.com/api/v2/webhooks to receive Thinkific events such as user.signup, enrollment.created, and order.created. Your webhook endpoint receives student enrollment data and processes it to sync with your Webflow site. If capturing form submissions directly from Webflow, configure a webhook with POST https://api.webflow.com/v2/sites/{siteid}/webhooks to receive formsubmission events, which can then trigger enrollments in Thinkific.

Send POST https://api.thinkific.com/api/public/v1/enrollments with user and course identifiers to create enrollments. The API response confirms enrollment and provides enrollment details. For webhook configuration and real-time enrollment events, use the Thinkific Webhooks API at https://api.thinkific.com/api/v2/webhooks. Complete implementation details are available in the Thinkific API Documentation and Webhooks API Reference.

Track progress and update memberships

Subscribe to Thinkific's completion webhooks to update Webflow membership levels when students finish courses. The Webhooks API sends real-time notifications for enrollment events, course completions, lesson progress, and other lifecycle events. Webhook events include enrollment.created, enrollment.completed, lesson.completed, and subscription-related events.

Webhook events for membership updates include:

• enrollment.created adds students to member directories
• enrollment.completed upgrades access levels for graduates
• subscription.cancelled marks inactive members in collections

Update Webflow user accounts with PATCH https://api.webflow.com/v2/sites/{siteid}/users/{userid} to modify user access groups and custom field data based on course completion status.

Handle authentication and webhooks

Critical constraint: Webflow webhooks retry only 3 times with 10-minute intervals (maximum 30-minute delivery window) before permanent failure. Your endpoint needs high uptime to prevent data loss. Implement dead letter queues (storage for failed webhook events) and manual reconciliation processes for failed deliveries, as detailed in the webhook retry documentation. Thinkific webhooks retry up to 14 times over 16 hours before permanent failure.

Authentication uses API keys or OAuth tokens. Thinkific accepts keys via X-Auth-API-Key headers, while Webflow requires OAuth bearer tokens via Authorization: Bearer \<token> headers. Store credentials securely and implement proper error handling for expired or invalid tokens per the Webflow authentication guide.

What you can build

Integrating Thinkific with Webflow requires using Webflow for custom-designed marketing experiences while Thinkific handles course delivery on a separate platform, as Thinkific cannot be embedded directly into Webflow sites. This split-site approach connects through direct linking, third-party automation tools, or custom API middleware.

• Course marketplace with branded checkout: Create a multi-course catalog in Webflow CMS with filtering, search, and course information that links to Thinkific's checkout for payment processing
• Automated enrollment from lead magnets: Build lead capture funnels using Webflow forms that automatically enroll users in Thinkific courses through Zapier or custom webhooks
• Member directory with course completion badges: Display student profiles in a Webflow CMS collection that updates automatically when learners complete courses through webhook-based automation
• Progressive content unlocking system: Gate premium Webflow content behind course completion requirements using webhook events that trigger membership level updates via API integration