WebLink Widgets

WebLink Widgets enable quick integrations with minimal effort by embedding WebLink components within an existing website.

We have many Widgets available to choose from in our WebLink Widget Builder such as:

  • Catalog
  • Search bar
  • Event list
  • Cart

... and many more!

The following 2 examples show how to use the WebLink Widget Builder to embed these on a website. The examples assumes building pages from scratch and an already configured WebLink portal. All Widgets can be built and embedded following the same steps, here we focus on the two most popular ones.

Catalog

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

<html>
    <head>
        <title>Catalogue</title>
    </head>
    <body>
        <p>Welcome. Below you can find a list of Courses that we offer.</p>
    </body>
</html>

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

Embed

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

<html>
    <head>
        <title>Catalogue</title>
    </head>
    <body>
        <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>
    </body>
    <!-- left-hand side snippet copied from WebLink Builder -->
    <link
       rel="stylesheet"
       href="https://myinstance-portal.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://myinstance-portal.administrateweblink.com/static/js/weblink.bundle.min.js" defer ></script>
    <!-- Create Weblink instance and mount widgets-->
    <script>
    $(function () {
        var webLinkConfig = {
            portalAddress: 'myinstance-portal.administrateweblink.com',
            hashRouting: false,
            timezone: 'Europe/London',
        };

        var webLink = new window.WebLink(webLinkConfig);

        webLink.mount(
            document.getElementById('weblink-Catalogue'),
            'Catalogue',
            {"showDateFilter":true,"showLocationFilter":true,"showCourseFilter":true,"showCategoryFilter":true,"showTitleColumn":false,"showLocationColumn":true,"showVenueColumn":true,"showStartDateColumn":true,"showEndDateColumn":true,"showDateAndtimeColumn":false,"showDurationColumn":true,"showSessionsColumn":false,"showTimeColumn":true,"showPlacesRemainingColumn":true,"showPriceColumn":true,"showAddToCartColumn":true,"showClassroomStartDateColumn":false,"showClassroomDurationColumn":false,"showClassroomTimeColumn":false,"showLmsStartDateColumn":false,"showLmsDurationColumn":false,"showLmsTimeColumn":false,"pagerType":"full"}
        );
    });
  </script>
</html>

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

WebLink Builder - Embedded Catalog Preview

Cart

It is likely your website will include a cart page where the user can navigate to in order to view the cart contents, check the total amount and proceed to checkout. Our Cart widget does exactly that, and its "Proceed to checkout" button will take the user to our hosted WebLink portal to gather user details and complete payment. This is our recommended integration option (see our Checkout section for more information).

Generate widget code

  1. Follow the steps above for the Catalog example, but select the "Cart" widget in the dropdown
  2. Click Build and copy the generated snippets

Embed

Following from the previous example, the page with the embedded widget might look like the following:

<html>
    <head>
        <title>Cart</title>
    </head>
    <body>
        <!-- right-hand side snippet copied from WebLink Builder -->
        <div id="weblink-Cart"></div>
    </body>
    <!-- left-hand side snippet copied from WebLink Builder -->
    <link
       rel="stylesheet"
       href="https://myinstance-portal.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://myinstance-portal.administrateweblink.com/static/js/weblink.bundle.min.js" defer ></script>
    <!-- Create Weblink instance and mount widgets-->
    <script>
    $(function () {
        var webLinkConfig = {
            portalAddress: 'myinstance-portal.administrateweblink.com',
            hashRouting: false,
            timezone: 'Europe/London',
        };

        var webLink = new window.WebLink(webLinkConfig);

        webLink.mount(
            document.getElementById('weblink-Cart'),
            'Cart',
            {"showPlacesRemaining": true}
        );
    })
  </script>
</html>