Catalog widget

The home page will most likely include the Course Catalog, let's start with the following basic page:

        <p>Welcome. Below you can find a list of Courses that we offer.</p>

Generate widget code

Our WebLink Widget Builder makes it easy to obtain the code necessary to embed the Catalog widget:

  1. Enter the URL of your configured WebLink portal and click "Connect".
  2. Select a time zone, to ensure any Event dates display correctly.
  3. Select the Catalog widget from the Widget Picker dropdown.
  4. After selection, the right-hand side allows for widget customisation (filters, ordering, display options...)
  5. Once happy with your selection, click "Build", which will generate HTML snippets:
    1. the left-hand side snippet should be added to the bottom of existing pages before the closing </html> tag
    2. the right-hand side snippet must be placed where you want the widget to appear

WebLink Builder - Catalog HTML snippets and options


Given the page HTML above, we can embed the 2 snippets provided by the builder like this

        <p>Welcome. Below you can find a list of Courses that we offer.</p>
        <!-- right-hand side snippet copied from WebLink Builder -->
        <div id="weblink-Catalogue"></div>
    <!-- left-hand side snippet copied from WebLink Builder -->
    <!-- JQuery - you can skip this line if you already have JQuery in your app -->
    <script src=""></script>
    <!-- Weblink-->
    <script src="" defer ></script>
    <!-- Create Weblink instance and mount widgets-->
    $(function () {
        var webLinkConfig = {
            portalAddress: '',
            hashRouting: false,
            timezone: 'Europe/London',
            analyticsHandler: function (event) {
                // Send event to the analytics provider.

                // For example, if using Google Tag Manager,
                //   1. Ensure snippet is added to your website according to the [instructions](
                //   2. Then call: window.dataLayer.push(event)

        var webLink = new window.WebLink(webLinkConfig);


If everything is configured correctly, you should see the Catalog being displayed on the page:

WebLink Builder - Embedded Catalog Preview