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 of 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 support or your account management team if you need help.
- Go to the WebLink Builder and enter your WebLink Portal address, it should look something like <instance>-<suffix>.administrateweblink.com.
- Specify the time zone that you want your Events to be listed in when someone browses your upcoming events.
- Pick out any widgets that you want to use, e.g. the Event List to show upcoming Events.
- Apply any configurations, e.g. filters for specific courses, to the widgets. Note that you can preview the changes in real-time in the 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:
- The Javascript embed for the WebLink library.
- 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.
Step 1
- On your computer, create a new file and name it index.html
- Edit that file in any text editor
- Paste in the code block below
- then save it.
<html>
<head>
<title>Administrate - Catalogue</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 create your Courses and Events, you must’ve specified the relative Timezones they are running in
-
Pick a Widget from the Widget Picker - for this example, we will pick the Catalogue 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 above the </body> tag. It should look like this.
-
<html>
<head>
<title>Administrate - Catalogue</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 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 (ie: <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 - Catalogue</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.
Step 4
That’s it! You can now proceed to pick from the various Widgets that Weblink offers and embed them on your website.
Comments
0 comments
Article is closed for comments.