A WebLink Widget is a small piece of embeddable JavaScript code that can be placed on your website, which allows embedding specific functionality, like listing a set of upcoming events in a table on a page.

Getting the appropriate WebLink widget code for your needs is quite simple using our online configuration tool: the WebLink Builder.

The tool is designed to show live previews of all the available widgets and the available configuration options (e.g., hiding columns).

To get started:

Ensure you have a Brand and WebLink portal configured. Contact our support team or your account management team if you need any help.
Go to the WebLink Builder and enter your WebLink Portal address, which should look something like: <instance>-<suffix>.administrateweblink.com.
Specify the time zone that you want your Events to be listed in when someone views your upcoming events.
Pick out any widgets that you want to use, e.g., the Event List to show upcoming Events.
Apply any configurations to the widgets, e.g., filters for specific courses. Note that you can preview the changes in real-time in the WebLink Builder.
Click Build to get the JavaScript and HTML that you'll need to embed on your website. Note that you'll need to place two pieces of code:
1. The JavaScript embed for the WebLink library.
2. A small <div> section where each widget will be rendered on your web page.

How-to Guide

Let's build together a sample web page to display a Course Catalog. For this example, you would need your Weblink Portal configured and accessible via your <instance>-<suffix>.administrateweblink.com portal.

Note that using a local file may produce unexpected results with some widgets.

Step 1

On your computer, create a new text file and name it: index.html
Edit that file in a text editor
Paste in the code block below
Save the changes.

<html> 
<head> 
<title>Administrate — Catalog</title> 
</head> 
<body> 
<p>Welcome to Administrate. Below you can find a list of our Courses that we offer.</p>
</body> 
</html>

Step 2

Go to WebLink Builder to build your widget
Under the Portal Address URL, enter your WebLink Portal URL. It should look something like this: <instance>-<suffix>.administrateweblink.com
Click Connect
Next, select the Timezone. When you created your Courses and Events, you must have specified the relative Timezones they are running in.
Pick a Widget from the Widget Picker. For this example, we will pick the Catalog Widget.
On the right pane, you can define your catalog options (i.e., hiding columns). Pick the options as per your preference.
Click Build. You will see a generated script that you can copy and paste on your website’s page.

Let’s copy that and put it on our index.html file, just before the </body> tag. That way, scripts can load without delaying the rest of the page.

It should look like this.

<html> 
<head> 
<title>Administrate — Catalog</title> 
</head> 
<body> 
<p>Welcome to Administrate. Below you can find a list of our Courses that we offer.</p> 

<!-- Styling --> 
<link rel="stylesheet" href="https://my-weblinkportal.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://my-weblinkportal.administrateweblink.com/static/js/weblink.bundle.min.js" defer >
</script> 
<!-- Create Weblink instance and mount widgets--> 
<script> 
$(function () { 
var webLinkConfig = { 
portalAddress: 'my-weblinkportal.administrateweblink.com', 
hashRouting: false, 
timezone: 'America/Chicago', 
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); 
webLink.mount( document.getElementById('weblink-Catalogue'), 'Catalogue', {"showDateFilter":true,"showLocationFilter":true,"showCourseFilter":true,"showCategoryFilter":true,"showTitleColumn":true,"showLocationColumn":true,"showVenueColumn":false,"showStartDateColumn":true,"showDurationColumn":true,"showTimeColumn":true,"showPlacesRemainingColumn":false,"showPriceColumn":true,"showAddToCartColumn":true,"showClassroomStartDateColumn":false,"showClassroomDurationColumn":false,"showClassroomTimeColumn":false,"showLmsStartDateColumn":false,"showLmsDurationColumn":false,"showLmsTimeColumn":false,"pagerType":"full","catalogueType":null} ); }); 
</script>
</body> 
</html>

Now save the changes in your index.html file.
The next and final step for this example is to display the widget wherever we want on the website.
Go back to the Weblink Builder, and on the right pane, copy the widget (i.e., <div id="weblink-Catalogue"></div>) and put it where you want to display the catalog.

In this example, we will put just under the welcome message.

The final sample code would like this:

<html> 
<head> 
<title>Administrate — Catalog</title> 
</head> 
<body> 
<p>Welcome to Administrate. Below you can find a list of our Courses that we offer.</p> 

<p>My Catalog</p>
<div id="weblink-Catalogue"></div>

<!-- Styling --> 
<link rel="stylesheet" href="https://my-weblinkportal.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://my-weblinkportal.administrateweblink.com/static/js/weblink.bundle.min.js" defer >
</script> <!-- Create Weblink instance and mount widgets--> 
<script>
$(function () { 
var webLinkConfig = { 
portalAddress: 'my-weblinkportal.administrateweblink.com', 
hashRouting: false, 
timezone: 'America/Chicago', 
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); 
webLink.mount( document.getElementById('weblink-Catalogue'), 'Catalogue', {"showDateFilter":true,"showLocationFilter":true,"showCourseFilter":true,"showCategoryFilter":true,"showTitleColumn":true,"showLocationColumn":true,"showVenueColumn":false,"showStartDateColumn":true,"showDurationColumn":true,"showTimeColumn":true,"showPlacesRemainingColumn":false,"showPriceColumn":true,"showAddToCartColumn":true,"showClassroomStartDateColumn":false,"showClassroomDurationColumn":false,"showClassroomTimeColumn":false,"showLmsStartDateColumn":false,"showLmsDurationColumn":false,"showLmsTimeColumn":false,"pagerType":"full","catalogueType":null} ); }); 
</script> 
</body> 
</html>

Save your index.html file.

Step 3

Open the index.html file in any browser and view your catalog. Remember that, as this is a local file, this may produce unexpected results with some widgets.

Step 4

That’s it! You can now proceed to pick from the various Widgets that Weblink offers and embed them on your website.

WebLink Widgets

Articles in this section

How-to Guide

Step 1

Step 2

Step 3

Step 4

Comments

WebLink Widgets

Articles in this section

How-to Guide

Step 1

Step 2

Step 3

Step 4

Related articles