Course Listings Widget

Why Should You Use the Course Listings Widget?

Streamlined Course Catalog Management

Display your educational offerings with a professional, organized course catalog interface that makes it easy for students to discover learning opportunities. Showcase multiple courses with detailed information including course titles, descriptions, instructors, pricing, duration, and difficulty levels. Each course listing presents comprehensive details in an attractive card format with optional images, ensuring students can quickly scan and identify courses that match their learning goals and interests.

Advanced Multi-Filter Search System

Empower learners to find their perfect course with powerful filtering capabilities. Students can search by keywords, filter by course level (Beginner, Intermediate, Advanced, or custom levels), and narrow results by price ranges. The intelligent filtering system works seamlessly together, allowing users to combine multiple criteria to pinpoint exactly the courses they're looking for. Real-time result counts update dynamically as filters are applied, providing instant feedback on available courses.

Detailed Course Information Display

Each course listing showcases essential information at a glance: course title, description, instructor name, course level, price with customizable currency, and duration. Optional course images add visual appeal and help courses stand out. Students can click on any course card to open a comprehensive detail modal that reveals the full course description and all course attributes in an easy-to-read format. This two-tier information architecture ensures the main listing page remains clean and scannable while providing complete details on demand.

Customizable Call-to-Action Buttons

Add custom action buttons to each course listing with configurable button text and destination links. Direct students to enrollment forms, detailed course pages, external learning platforms, or any URL you specify. Buttons can be enabled or disabled globally through settings, and each course can have its own unique button configuration. Action buttons appear both on course cards and within the detailed course modal, ensuring students can take action at any point in their browsing journey.

Image Upload and Management

Enhance your course listings with visual appeal through integrated image upload functionality. Upload course images via drag-and-drop or traditional file selection, with automatic validation for file size (up to 5MB) and supported formats (JPEG, PNG, WebP, SVG). Images are automatically converted to base64 format for seamless integration. Preview uploaded images before saving, and easily remove or replace images as needed. Course images appear on both the listing cards and in the detailed modal view.

Responsive Mobile-First Design

The Course Listings Widget adapts beautifully across all devices with a mobile-first responsive design. On desktop, filters appear in a convenient sidebar for easy access. On mobile devices, the layout transforms to a streamlined vertical format with a collapsible filter panel accessed via a dedicated filter button. Search functionality is optimized for both desktop and mobile, ensuring students can find courses regardless of their device. Touch interactions work smoothly on tablets and phones, and all text remains readable without zooming.

Flexible Content Structure

Configure your course listings with complete flexibility. Define custom course levels that match your educational framework, create price ranges that reflect your pricing strategy, and establish currency symbols that align with your market. Add detailed course descriptions, instructor names, duration information (hours, weeks, or custom formats), and unique course identifiers for internal tracking. Each field is optional, allowing you to provide as much or as little detail as needed for each course.

Drag-and-Drop Reordering

Organize your content exactly how you want it with intuitive drag-and-drop functionality. Reorder course levels to prioritize certain difficulty levels, rearrange price ranges to match your preferred display sequence, and reorganize individual courses to feature your most popular or newest offerings. Visual feedback during dragging makes it clear where items will be placed, and changes are reflected immediately in the live preview.

Customizable Branding and Messaging

Personalize the widget with your own catalog title and description to match your educational brand. Configure the search placeholder text to guide students with helpful prompts. Show or hide the title section based on your page layout preferences. Set your preferred currency symbol to match your market (USD, EUR, GBP, or custom symbols). The widget respects your design choices while maintaining its core functionality, ensuring it feels like a natural part of your educational website or learning platform.

Live Preview Functionality

See exactly how your course catalog will appear to students with real-time preview functionality. As you add courses, modify filters, adjust settings, or update content, the preview updates instantly. Test search functionality, try different filter combinations, click on course cards to see the detail modal, and verify that all buttons and links work correctly. The live preview ensures you can perfect your catalog before publishing, with no redeployment or page refresh required.

Instant Updates and Real-Time Synchronization

Changes to course listings, filters, levels, and settings appear immediately with real-time preview functionality. Add new courses, update existing listings, modify filter options, upload images, or adjust settings and see the results instantly. The widget maintains state across edits, allowing you to make multiple changes and see them all reflected in real-time. Your course catalog stays current as your educational offerings evolve.