Moodle

How to integrate Moodle with Webflow

Moodle handles the backend learning management while Webflow delivers the professional frontend experience that students and administrators interact with. Connecting these platforms enables automated enrollment workflows, branded course discovery, and synchronized user data between marketing sites and learning environments.

You can integrate Moodle with Webflow through iframe embedding for displaying course content directly in Webflow pages, automation platforms like Zapier and Make.com for handling enrollment workflows without coding, or API integration for complete programmatic control over users and courses.

Embed Moodle content in Webflow

Display Moodle courses, activities, or H5P interactive content directly in Webflow pages using Code Embed elements with iframe code. Moodle administrators must first enable iframe functionality by navigating to Site Administration > Security > HTTP security and enabling "Allow frame embedding" to add your Webflow domain to allowed sources. This method works for showcasing sample lessons, embedding specific course modules, or displaying interactive quizzes on marketing pages.

Before embedding works, configure Moodle security settings. By default, Moodle blocks iframe embedding through X-Frame-Options: SAMEORIGIN headers. Navigate to Site Administration > Security > HTTP security, enable "Allow frame embedding", and add your Webflow domain to the allowlist.

Embed course content

Add a Code Embed element from Webflow's Add Elements panel and paste standard iframe HTML:

<iframe src="<https://yourmoodlesite.com/course/view.php?id=123>"
width="100%"
height="600"
frameborder="0">
</iframe>



Test different height values for Moodle iframe embeds because iframe content dimensions don't adjust automatically without additional configuration. According to Moodle's iframe documentation, you must manually set height values and test across different content types. For mobile responsiveness, implement CSS techniques using relative positioning and percentage-based padding (56.25% for 16:9 aspect ratios, 75% for 4:3) to maintain proper scaling on smaller screens.

Embed H5P interactive content

H5P interactive content can be embedded directly into Webflow pages using Code Embed elements. According to H5P's Moodle documentation, H5P enables creation and embedding of interactive content including quizzes, videos, and presentations.

To embed H5P content:

1. In your Moodle course, create or add H5P content (quiz, interactive video, etc.)
2. Copy the iframe embed code provided by H5P
3. In Webflow, add a Code Embed element from the Add Elements panel
4. Paste the complete embed code including the H5P resizer script

<iframe src="<https://yourmoodlesite/mod/hvp/embed.php?id=596>"
width="1077"
height="424"
frameborder="0"
allowfullscreen="allowfullscreen">
</iframe>
<script src="<https://yourmoodlesite/mod/hvp/library/js/h5p-resizer.js>"
charset="UTF-8">
</script>



The included resizer script automatically handles dynamic content sizing, addressing standard iframe dimension limitations and ensuring responsive display across devices.

This method requires a paid Webflow plan to access custom code embedding capabilities. Note that iOS 14+ Intelligent Tracking Prevention blocks third-party cookies in iframes, potentially requiring users to manually enable "Allow Cross-Website Tracking" in iOS Settings for seamless mobile experiences.

Cross-origin limitations

iOS 14 and later blocks third-party cookies in embedded iframes through Intelligent Tracking Prevention. Users must manually enable "Allow Cross-Website Tracking" in Settings > Safari according to the Moodle App FAQ. For iOS users experiencing cookie-related authentication issues with iframe embeds, consider using direct links to Moodle or the native Moodle mobile app instead of iframes.

CORS errors require configuring server-level headers at the web server (Apache/Nginx) or through Moodle config.php. Add your Webflow domain to Access-Control-Allow-Origin (specific domain required, wildcard origins prohibited when credentials required), include Access-Control-Allow-Methods: POST, GET, OPTIONS, Access-Control-Allow-Headers: Content-Type, Authorization, and Access-Control-Allow-Credentials: true for authentication cookies. Additionally, configure Moodle to handle OPTIONS preflight requests and enable "Allow frame embedding" in Site administration > Security > HTTP security, specifying your Webflow domain in the "Frame ancestor" setting.

Automate enrollment with Zapier or Make.com

Automation platforms like Zapier and Make.com connect Webflow forms and e-commerce to Moodle enrollment without coding. When someone submits a Webflow form or completes a purchase in Webflow, automated workflows create Moodle user accounts and enroll them in specific courses.

Zapier's Moodle integration supports these triggers: new course created, new user enrollment, new user created. Actions include enroll user in course, create user, update user, and find user. Webflow triggers fire on form submission, new e-commerce order, CMS item created, or CMS item updated.

Form submission to enrollment workflow

Create a Zap with Webflow form submission as the trigger. When a user submits a registration form on your Webflow site containing name, email, and course selection fields, map these form fields to Moodle user profile parameters. The workflow adds two sequential actions. First, create a user in Moodle using core_user_create_users. Second, enroll the new user in the specified course using the enrol_manual_enrol_users endpoint (with roleid set to 5 for student role). This automation connects your Webflow form directly to Moodle course enrollment without manual data entry. Note that due to CORS restrictions and token security requirements, implement a server-side middleware layer to proxy these API requests rather than calling Moodle endpoints directly from Webflow.

For existing users, add a "Find User" step before enrollment using the core_user_get_users function to check if accounts already exist. This prevents duplicate account errors when users register for multiple courses.

E-commerce purchase to enrollment

Use Webflow's "New e-commerce order" trigger within Zapier or Make.com to automatically enroll customers in Moodle courses. When a customer completes a purchase on your Webflow e-commerce site, the automation workflow captures the order details and product information. Map product SKUs to specific Moodle course IDs, then create enrollment actions through the Moodle API that set the student role (roleid 5) for each enrolled user. Configure enrollment timeframe parameters if courses expire after a specific period using the timestart and timeend parameters in the enrollment action. This multi-step automation ensures purchased courses are immediately accessible to customers without manual intervention.

Make.com for complex workflows

Make.com's Webflow integration provides visual flowchart building with advanced conditional logic. The Make.com Moodle integration is labeled "community-developed," offering less robust support than enterprise-tier integrations but supporting multi-step enrollments and branching logic.

Use Make.com when your Webflow form submissions need conditional processing. For example, checking user attributes before assigning specific course sequences in Moodle, or enrolling users in different cohorts based on form responses. Make.com's visual flowchart interface and advanced conditional logic excel at complex multi-step enrollments connecting Webflow to Moodle. However, note that Make.com's Moodle integration is community-developed, meaning less robust support than enterprise-tier integrations. For non-technical teams managing complex conditional enrollments, Zapier remains the recommended platform despite requiring custom workarounds for advanced logic.

Webhook configuration

Webflow webhooks enable real-time event capture for form submissions and CMS changes. Navigate to Site Settings > Integrations > Webhooks in Webflow to create webhooks. While you can configure webhooks to POST to Zapier or Make.com endpoints, note that according to Webflow Webhook Documentation, webhooks have only 3 retry attempts using exponential backoff. For direct Moodle integration, implement server-side middleware to securely proxy requests, manage API tokens, and handle rate limiting. Direct client-to-client integration is not feasible due to CORS restrictions and authentication complexity. For simpler workflows, use automation platforms like Zapier or Make.com as intermediaries between Webflow forms and Moodle API endpoints.

When implementing integration workflows through Webflow webhooks, ensure middleware processes complete within timeout limits to avoid failed webhook deliveries. For longer-running operations, implement asynchronous processing or queue systems rather than synchronous middleware responses.

Build with Webflow and Moodle APIs

API integration provides programmatic control over user management, course enrollment, progress tracking, and content synchronization using Moodle's REST-based Web Services API. Key endpoints include core_user_create_users and core_user_update_users for user management, enrol_manual_enrol_users for course enrollment, core_enrol_get_users_courses for enrollment tracking, and core_course_get_contents for content retrieval. All endpoints are accessed via POST requests to the single /webservice/rest/server.php endpoint with token-based authentication. However, direct client-side integration from Webflow is not feasible due to CORS restrictions and token security requirements. Build server-side middleware that manages Moodle API tokens securely, handles CORS headers, transforms data between platforms, proxies Webflow webhook requests, and manages authentication.

Direct client-side integration doesn't work because of CORS restrictions. Moodle does not set CORS headers by default for web service endpoints, requiring server-level configuration of headers like Access-Control-Allow-Origin to enable cross-origin requests from Webflow. Additionally, Moodle tokens are permanent until manually revoked and should never be stored in browser-accessible code due to security vulnerabilities. According to the research, server-side middleware running on Node.js, Python, or similar platforms between Webflow and Moodle solves these constraints by enabling server-to-server communication, eliminating CORS restrictions, securely managing tokens, and handling authentication.

Both platforms use REST APIs with different authentication architectures. Moodle uses token-based authentication through a single endpoint (/webservice/rest/server.php), where tokens are permanently stored until manually revoked and accessed via the wstoken parameter. Webflow supports two authentication methods: OAuth 2.0 for public integrations requiring the Authorization Code Grant flow, and Bearer token authentication (Site Tokens) for site-specific access, with tokens included in the Authorization header as Bearer <token>.

Manage users between platforms

Create, update, and synchronize user accounts across Webflow and Moodle using Moodle's Web Services API. According to Moodle's Web Services architecture, all API functions are called via POST requests to a single endpoint /webservice/rest/server.php. The specific function is determined by the wsfunction parameter, while authentication requires a wstoken generated through /login/token.php. This token-based, single-endpoint architecture enables flexible API access while maintaining security through capability-based access control.

Obtain Moodle authentication tokens

POST to https://[your-moodle-site]/login/token.php with username, password, and service name according to External services security. Store returned tokens securely in your middleware environment variables. Tokens are permanent until manually revoked. Call the token endpoint again to generate a new token when needed for updated credentials or fresh authentication.

Before making API calls, configure Moodle web services by following these seven steps:

1. Enable web services through Site Administration > Advanced Features
2. Enable REST protocol via Site Administration > Plugins > Web Services > Manage Protocols
3. Create a custom service under Site Administration > Server > Web Services > External Services and add required functions like core_user_create_users and enrol_manual_enrol_users
4. Add required capabilities to the appropriate user role
5. Create a dedicated web service user account
6. Generate authentication tokens through Site Administration > Server > Web Services > Manage Tokens for secure API access

Create users with core_user_create_users API endpoint

The External Functions API documents user creation with required parameters: username, firstname, lastname, email, password. Send user arrays for bulk creation up to 100 users per request:

POST /webservice/rest/server.php
wstoken=[token]&
wsfunction=core_user_create_users&
moodlewsrestformat=json&
users[0][username]=newuser&
users[0][firstname]=John&
users[0][lastname]=Doe&
users[0][email]=john@example.com&
users[0][password]=SecurePass123



Response from the core_user_create_users endpoint includes newly created user IDs. Store these Moodle user IDs in your middleware database to maintain user identity mapping between the Moodle LMS and Webflow platforms, enabling future API calls to reference and synchronize user data across both systems.

Check for existing users before creating new accounts

According to Moodle's user management endpoints, administrators should verify whether a user already exists before attempting creation. Use core_user_get_users with email or username search criteria to prevent duplicate account creation:

{
"criteria[0][key]": "email",
"criteria[0][value]": "user@example.com"
}



If the user exists, use core_user_update_users to modify existing profiles instead of creating duplicates. This prevents data consistency issues and enrollment conflicts in automation workflows.

Use core_user_get_users with email as the search criteria to avoid duplicate accounts. According to the Moodle forum, the recommended approach is to search by email: criteria[0][key]=email and criteria[0][value]=user@example.com.

Update user profiles

Call core_user_update_users when Webflow user data changes to update specific user profile attributes. Include the user ID and the profile fields you want to modify in the request.

Enroll users in courses

Course enrollment connects users to learning content with specific roles and timeframes. The Enrolment API provides multiple enrollment functions, including enrol_manual_enrol_users for manual enrollment (requiring role ID, user ID, and course ID, with optional parameters for start/end times) and enrol_self_enrol_user for self-enrollment workflows.

This Moodle API endpoint enables programmatic user enrollment into courses. According to the Enrolment API documentation, the function requires three essential parameters: enrolments[0][roleid] (typically 5 for student role), enrolments[0][userid] (the user's ID), and enrolments[0][courseid] (the course's ID). Optional parameters include enrolments[0][timestart] and enrolments[0][timeend] to set enrollment start and end dates, and enrolments[0][suspend] to control enrollment status. This endpoint is commonly used in Webflow-Moodle integrations to automate course access when users complete enrollment forms or make purchases.

Enroll users by sending arrays with role ID (5 for student), user ID, and course ID to the enrol_manual_enrol_users endpoint:

enrolments[0][roleid]=5&
enrolments[0][userid]=123&
enrolments[0][courseid]=456&
enrolments[0][suspend]=0



Optional parameters include timestart and timeend for enrollment periods. Set suspend=0 to create active enrollments or suspend=1 to create inactive enrollments that can be activated later.

Retrieve enrolled users

Call core_enrol_get_enrolled_users with a course ID to list all enrolled students. For large courses, use pagination with the options array: options[0][name]=limitfrom with options[0][value] for the starting offset, and options[1][name]=limitnum with options[1][value] for the number of results to return (e.g., limit 50 results starting at offset 0).

Get user's enrolled courses

Use core_enrol_get_users_courses with a user ID parameter to retrieve all courses where the user is enrolled. According to Moodle's External Functions API, this endpoint returns an array of course objects containing course names, IDs, and enrollment status, along with additional course metadata depending on the context and fields available in the API response.

Sync course catalogs to Webflow CMS

Display Moodle course information on Webflow marketing pages by using the Moodle REST Web Services API to fetch course data (via endpoints like core_course_get_courses and core_course_get_contents), then synchronizing this data to Webflow CMS collections through either automation platforms like Zapier and Make.com or custom middleware. Create or update Webflow CMS items with course titles, descriptions, pricing, and availability using the Webflow CMS Collection API (POST /collections/{collection_id}/items or PUT /collections/{collection_id}/items/{item_id}), enabling your marketing site to automatically display current Moodle course catalogs without manual updates.

Retrieve courses from Moodle

The Web service API functions include core_course_get_courses to list all courses. Call without parameters to retrieve all courses in the system with their complete details, or pass options[ids][0] with a course ID to retrieve specific courses. Alternatively, use core_course_get_courses_by_field for searching courses by specific criteria.

core_course_get_contents returns complete course structure including sections, modules, and activities. Use this for detailed course information beyond basic metadata.

Create CMS items in Webflow

Authenticate to Webflow's CMS API using OAuth 2.0 (recommended for public integrations and requiring client_id and client_secret credentials) or Bearer tokens (site-specific tokens tied to individual Webflow sites). POST to https://api.webflow.com/v2/collections/{collection_id}/items with JSON field data using the fieldData parameter containing the collection item properties:

{
"fieldData": {
"name": "Course Title",
"slug": "course-slug",
"course-description": "Course content here",
"_archived": false,
"_draft": false
}
}



Map Moodle course fields to corresponding Webflow CMS field slugs in your middleware, ensuring proper field type alignment (e.g., text fields to plain text, course descriptions to rich text). Transform data formats as needed, like converting Unix timestamps to ISO 8601 date format (for example, converting 1642012800 to 2022-01-13T00:00:00Z).

Publish content automatically

After creating CMS items, POST to /v2/collections/{collection_id}/items/{item_id}/publish to make content live. The Webflow Rate Limits documentation warns that the site publish endpoint is limited to one successful publish per minute. Batch your CMS updates and publish once after all items are updated.

Track progress and completion

Monitor student progress and course completion through Moodle's Web Services API using endpoints like core_completion_get_course_completion_status to retrieve completion status. However, direct client-side integration from Webflow is not feasible due to CORS restrictions and token security requirements. Instead, implement a server-side middleware architecture that securely manages Moodle API tokens, proxies requests, and transforms data for display on Webflow pages or triggering post-completion workflows. For real-time progress updates, install Moodle's local_webhooks plugin to enable event-driven synchronization when courses are completed.

Get course completion status

According to Tracking progress documentation, use the core_completion_get_course_completion_status API endpoint with course ID and user ID parameters. The response includes completion state, completion date, and criteria met. For activity-level progress tracking, the core_completion_get_activities_completion_status endpoint provides individual activity completion states within a course.

Activity-level completion tracking

Use core_completion_get_activities_completion_status to retrieve individual activity completion states within a course. Returns arrays showing which specific modules, quizzes, assignments, and other activities students have completed.

Retrieve grades

The Gradebook API provides core_grades_get_grades for retrieving grades with optional filtering by component (like mod_assign), activity ID, or user IDs. For user-specific grade items in a course, use gradereport_user_get_grade_items, which requires the course ID and user ID as parameters and returns all grade items along with the grades for that user in the specified course.

Handle webhooks for real-time sync

Moodle doesn't provide native webhooks. To send HTTP POST requests when events occur, install the local_webhooks plugin from the Moodle Plugins directory. This plugin bridges Moodle's internal observer pattern for event handling with HTTP webhooks, enabling integration with external systems like Webflow.

After installing, configure webhooks through Site Administration > Server > WebHooks. Add your middleware endpoint URL and select events to monitor: \\core\\event\\course_created, \\core\\event\\user_enrolled, \\core\\event\\course_completed.

Note that Moodle does not provide native webhook functionality out of the box. You must first install the local_webhooks plugin from the Moodle Plugins directory to enable this functionality. This plugin bridges Moodle's Events API with HTTP POST webhooks.

Event payloads include object IDs, metadata, and event-specific additional data according to the Events API, but not complete object data. The other field may contain some event-specific properties such as course details or enrollment parameters, however, comprehensive object information requires additional API calls using the provided IDs to fetch full details before syncing to Webflow.

What you can build

Integrating Moodle with Webflow enables branded learning experiences through a frontend-backend architecture where Webflow serves as the professional marketing site and user interface while Moodle handles comprehensive course management.

• Course marketplace with automated enrollment: Build a course catalog in Webflow CMS using data synchronized from Moodle via Zapier or Make.com, sell courses through Webflow e-commerce with Stripe, and automatically enroll buyers in corresponding Moodle courses through automation workflows (Zapier/Make.com) or server-side API integration
• Corporate training portal with SSO: Create department-specific landing pages in Webflow that link to role-based Moodle training programs with SAML single sign-on, so employees authenticate once and access assigned courses based on their job function through automated cohort-based enrollment (requires DevOps expertise with typical 12-16 week implementation timeline for enterprise deployment)
• Membership site with tiered course access: Use Memberstack to manage subscriptions and membership tiers in Webflow, which grants access to different Moodle course libraries based on subscription tier (payment processing and user authentication handled by Memberstack on Webflow, course content delivery and progress tracking handled by Moodle)
• Educational institution with brand consistency: Design the public university website in Webflow for prospective students with fast page loads and modern design while enrolled students access Moodle through a custom-themed instance configured to match Webflow's design elements (Webflow design updates can be made without developers, but Moodle theme customization requires developer support)