WebLink - Catalog Widget

1. Overview
2. How to Use
3. URL Routing

Overview

The WebLink Catalog Widget feature allows users to seamlessly integrate a customizable catalog of Courses and Learning Paths onto their websites. Users can filter the content, easily embed the catalog, and override the URL of Course and Learning Path Cards to redirect users to specific routes on their website. This feature enables website owners to curate and present relevant content while maintaining a consistent user experience and keeping visitors engaged within their website's ecosystem.

How to use

1. Navigate to Weblink Builder

2. Type or Paste in your WebLink portal URL
   

3. Click Connect

4. Next Screen, Select the TimeZone and Widget “Catalogue”
   
5. Select the filters you need
   

6. You can click Preview to check the result

7. Click on Build
   

8. Copy the snippet code and insert it to the bottom of the body of your page (i.e.: index.html)

9. Copy the div tag for the widget, and place it anywhere on your page where you want to display the Widget
   
10. Done

URL Routing

You have the option to override the default routing for WebLink Course and Learning Paths by adding your URL configuration within the WebLink Widget snippet (See bolded lines in the below snippet)

<!-- Styling -->
<link
rel="stylesheet"
href="https://[instance-suffix].administrateweblink.com/static/css/main.css"
/>
<!-- JQuery - you can skip this line if you already have JQuery in your app -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Weblink-->
<script src="https://[instance-suffix].administrateweblink.com/static/js/weblink.bundle.min.js" defer ></script>
<!-- Create Weblink instance and mount widgets-->
<script>
$(function () {
var webLinkConfig = {
portalAddress: '[FIXME_WEBLINKURL]',
hashRouting: false,
timezone: '[FIXME_TIMEZONE]',
hooks: {
onCheckoutNavigation: function(redirectUrl) {
// ... perform whatever actions necessary here

// Returning false below will prevent the usual redirect to
// the checkout page to happen. If you want to redirect there
// after you have completed your actions, you can use the
// redirectUrl provided to the function.
// return false;
},
}
};

var webLink = new window.WebLink(webLinkConfig);

const config = {
showDateFilter: true,
showLocationFilter: true,
// ... ANY OTHER CONFIGURATION HERE ...
links: {
catalogueProduct: ({name}) => {
const formattedName = name.split(" ").join("-").toLowerCase();
return `https://www.yourwebsite.com/blah?q=${formattedName}`;
}
}
};


webLink.mount(
document.getElementById('weblink-Catalogue'),
'Catalogue',
config,
);
});
</script>