Overview
The Catalog Widget displays a searchable catalog of courses and events from Administrate directly on your website.
It is the most commonly used WebLink widget for presenting available training before a learner begins the booking or registration process.
The catalog is embedded on your website and automatically updates when courses or events change in Administrate, keeping your public training catalog in sync without manual updates.
If you have not yet configured WebLink, start with WebLink Overview and Installation .
How the catalog widget works
The Catalog Widget retrieves training data directly from Administrate using the WebLink API.
When a visitor opens the catalog page, the widget loads available courses and events based on its configuration.
- Course and event changes automatically update the catalog
- No manual website updates are required
- Filters control which training appears
Typical catalog behavior
The catalog widget typically allows visitors to:
- browse available courses
- view event dates and locations
- filter training by category
- select an event to begin booking
Selecting an event usually transitions the user into a checkout or booking widget.
Generate the catalog widget
The easiest way to generate widget code is through the WebLink Builder.
- Open the WebLink Builder
- Enter your WebLink portal URL
- Select your timezone
- Choose Catalog Widget
- Configure filters and options
- Click Build
The builder generates:
- a shared WebLink script (loads the library)
- a widget container (renders the catalog)
Both must be added to your page.
Example widget container
<div class="administrate-widget" data-widget="catalog"></div>
Actual configuration will vary depending on builder settings.
Filtering the catalog
Filters control which courses appear in a catalog instance.
- category-based filtering
- regional filtering
- product subset filtering
This enables multiple targeted catalog pages.
For advanced strategies, see Product Segmentation in WebLink .
Custom URL routing (advanced)
By default, selecting a course or learning path routes users through WebLink.
You can override this behavior to direct users to custom pages on your website.
This is configured in the widget JavaScript using the links property:
const config = {
links: {
catalogueProduct: ({ name }) = {
const formattedName = name.split(" ").join("-").toLowerCase();
return `https://www.yourwebsite.com/course/${formattedName}`;
}
}
};
This allows you to:
- maintain full control over your site routing
- integrate catalog navigation into your website structure
- avoid sending users to external or default pages
Styling the catalog
The widget inherits styling from your website. Most customization is done using CSS.
- layout and spacing
- buttons
- fonts
- colors
Testing the catalog widget
Test thoroughly before publishing:
- Load the page
- Confirm courses display correctly
- Test filters
- Open course and event pages
- Complete a booking flow
Common issues
Courses do not appear
- Confirm course visibility in Administrate
- Check widget filters
- Verify WebLink configuration
For more help see Why Doesn't my Course Display in the WebLink Storefront .