Skip to main content

WebLink - Catalog Widget

Updated

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.

  1. Open the WebLink Builder
  2. Enter your WebLink portal URL
  3. Select your timezone
  4. Choose Catalog Widget
  5. Configure filters and options
  6. 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:

  1. Load the page
  2. Confirm courses display correctly
  3. Test filters
  4. Open course and event pages
  5. 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 .

Related articles