Moodle

How to integrate Moodle with Webflow

Integrating Moodle with Webflow requires custom implementation. Use iframe embedding to display Moodle content directly in Webflow pages, automation platforms like Zapier or Make.com to handle enrollment workflows without coding, or API integration for complete programmatic control.

Embed Moodle content in Webflow

Iframe embedding displays Moodle courses, activities, or H5P interactive content directly on Webflow pages by adding a custom code embed element with an iframe tag pointing to your Moodle content URLs.

Administrators must first enable iframe functionality in Moodle 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, your Moodle administrator must configure 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. Without this configuration, browsers block the embedded content.

To embed course content, add a custom 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, as the iframe content dimensions don't adjust automatically. 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 to maintain proper scaling on smaller screens.

H5P interactive content can be embedded directly into Webflow pages using the custom code embed element. H5P enables the creation and embedding of interactive content, including quizzes, videos, and presentations.

To embed H5P content, follow these steps.

1. In your Moodle course, create or add H5P content such as a quiz, interactive video, or presentation
2. Copy the iframe embed code provided by H5P
3. In Webflow, add a custom 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 attempts to handle dynamic content sizing, though it may not work reliably in all scenarios. Consider using fixed iframe heights for more consistent display across devices.

This method requires a paid Webflow plan to access custom code embedding capabilities.

Automate enrollment with Zapier or Make.com

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

Zapier's Moodle integration supports triggers for new course created, new user enrollment, and new user created. Actions include enrolling users, creating users, updating users, and finding users. Webflow triggers fire on form submission, new e-commerce order, or CMS item changes.

To set up form-to-enrollment automation, create a Zap with Webflow form submission as the trigger. Map form fields (name, email, course selection) to Moodle user parameters, then add two sequential actions:

1. Create user in Moodle using core_user_create_users
2. Enroll user using enrol_manual_enrol_users with roleid 5 (student role)

Due to CORS restrictions and token security, implement server-side middleware to proxy API requests rather than calling Moodle directly from Webflow. For existing users, add a Find User step using core_user_get_users to prevent duplicate account errors.

For e-commerce workflows, use Webflow's New e-commerce order trigger to automatically enroll customers. Map product SKUs to Moodle course IDs and configure enrollment timeframes using timestart and timeend parameters.

Make.com's Webflow integration provides visual flowchart building with advanced conditional logic. The Moodle integration is community-developed with less robust support. Use Make.com when form submissions need conditional processing, such as assigning course sequences based on user attributes. For non-technical teams, Zapier remains recommended due to its more reliable Moodle integration.

Configure Webflow webhooks in Site Settings > Integrations > Webhooks.

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 and Webflow's APIs. Key endpoints include core_user_create_users for user management, enrol_manual_enrol_users for enrollment, and core_course_get_contents for content retrieval. All endpoints use POST requests to /webservice/rest/server.php with token-based authentication.

Direct client-side integration from Webflow isn't feasible due to CORS restrictions and token security requirements. Build server-side middleware to manage Moodle API tokens securely, handle CORS headers, and proxy Webflow webhook requests. Moodle tokens are permanent until manually revoked and should never be stored in browser-accessible code.

Both platforms use REST APIs with different authentication: Moodle uses token-based authentication via the wstoken parameter, while Webflow supports OAuth 2.0 for public integrations or Bearer tokens for site-specific access. Learn more in the Webflow REST API introduction.

Manage users between platforms

Create and synchronize user accounts using Moodle's Web Services API. Obtain authentication tokens by POSTing to /login/token.php with username, password, and service name per External services security.

Before making API calls, configure Moodle web services in Site Administration: enable web services in Advanced Features, enable REST protocol in Plugins > Web Services > Manage Protocols, create a custom service with required functions in Server > Web Services > External Services, and generate tokens through Manage Tokens.

The External Functions API documents user creation with required parameters: username, firstname, lastname, email, and 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

Store returned Moodle user IDs in your middleware to maintain identity mapping between platforms. Use core_user_get_users with email criteria to check for existing users before creating accounts, and core_user_update_users to modify existing profiles.

Enroll users in courses

The Enrolment API provides enrol_manual_enrol_users requiring roleid (5 for student), userid, and courseid. Optional parameters include timestart and timeend for enrollment periods, and suspend (0 for active, 1 for inactive).

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

Use core_enrol_get_enrolled_users with course ID to list enrolled students (supports pagination via limitfrom and limitnum options). Use core_enrol_get_users_courses with user ID to retrieve all courses where a user is enrolled.

Sync course catalogs to Webflow CMS

Fetch course data via core_course_get_courses and core_course_get_contents, then sync to Webflow CMS collections through automation platforms or custom middleware using the Webflow CMS API.

The Web service API functions include core_course_get_courses (call without parameters for all courses) and core_course_get_contents for complete course structure including sections and modules.

POST to https://api.webflow.com/v2/collections/{collection_id}/items with JSON fieldData. See the List Collection Items reference for retrieving existing items.

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

Map Moodle fields to Webflow CMS field slugs, transforming formats as needed (such as Unix timestamps to ISO 8601). After creating items, POST to /v2/collections/{collection_id}/items/{item_id}/publish.

Track progress and completion

Monitor progress using core_completion_get_course_completion_status with the course ID and user ID per Tracking progress documentation. Use core_completion_get_activities_completion_status for activity-level tracking. The Gradebook API provides core_grades_get_grades and gradereport_user_get_grade_items for grade retrieval.

What you can build

Integrating Moodle with Webflow lets you build branded learning experiences where Webflow serves as the professional marketing site while Moodle handles 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
• Corporate training portal: Create department-specific landing pages in Webflow that link to role-based Moodle training programs, allowing employees to access assigned courses based on their job function while marketing maintains the public-facing site
• Membership site with tiered course access: Use Memberstack to manage subscriptions and membership tiers in Webflow, then connect to Moodle through Zapier to grant access to different course libraries based on subscription level
• Educational institution marketing site: Design the public university website in Webflow for prospective students with fast page loads and modern design, display course catalogs synced from Moodle, while enrolled students access Moodle directly for learning