Skip to main content

WebLink Widgets

Updated

A WebLink Widget is a small piece of embeddable JavaScript code that allows you to place WebLink functionality directly on your website, such as a catalog, a list of upcoming events, checkout components, or other learner-facing storefront elements.

You can generate widget code using the WebLink Builder. The builder shows live previews of available widgets and lets you configure options such as filtering, hiding columns, and display behavior before you generate the code.

For foundational setup, see WebLink Overview and Installation. For implementation guidance after setup, see Best Practices for WebLink Widgets.

Contents

Before you begin

  1. Make sure you have a live WebLink Portal configured.
  2. Make sure the portal uses the correct brand and visual setup. See Portal Branding.
  3. Confirm the courses, events, pricing, and visibility rules you want to expose through WebLink are already configured.
  4. If you are embedding widgets on an external website, make sure you know where your shared script belongs and where each widget container should appear.

Generate widget code

  1. Go to the WebLink Builder.
  2. Enter your WebLink Portal address: <instance>-<suffix>.administrateweblink.com.
  3. Select the timezone for event display.
  4. Choose a widget (catalog, event list, checkout, etc.).
  5. Adjust configuration options (filters, display settings).
  6. Click Build.

The builder generates two pieces of code:

  • JavaScript library embed (loads WebLink)
  • Widget container (where the widget renders)

The shared script loads WebLink globally, while the container determines where a specific widget appears.

Where the generated code goes

  • Global setup: Add the shared WebLink script to your page template or layout so it loads consistently.
  • Widget placement: Place the widget container exactly where you want the widget to render.
  • Per-widget configuration: Configure behavior in the builder before copying the code.

If a widget does not appear, confirm the portal address is correct and that both the script and container are present.

How to build a widget

Step 1: Enter the portal address

Enter your WebLink Portal URL in the builder.

Step 2: Select the timezone

Choose how event times are displayed. This does not change the event’s stored timezone, only how it appears to users.

Step 3: Configure the widget

  • Hide or show columns
  • Filter courses or events
  • Adjust display behavior

The preview shows your changes in real time.

Step 4: Build and copy the code

Copy both the shared script and the widget container into your website, then publish and test.

Example implementation

The example below shows how a simple widget is added to a basic HTML page.

  • The WebLink script is placed before the closing </body> tag to avoid blocking page load.
  • The widget container is placed where the widget should appear.
<html>
<head>
  <title>Course Catalog</title>
</head>
<body>

<p>Welcome to our training catalog.</p>

<div id="weblink-Catalogue"></div>

<script src="https://your-portal.administrateweblink.com/static/js/weblink.bundle.min.js" defer></script>

<script>
  const webLink = new window.WebLink({
    portalAddress: 'your-portal.administrateweblink.com',
    timezone: 'America/Chicago'
  });

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

</body>
</html>

Troubleshooting tips

  • Make sure the portal URL is correct.
  • Make sure both the script and widget container are included.
  • Check that widget filters are not too restrictive.
  • Confirm courses/events are published and visible.
  • Verify branding and portal configuration if display issues occur.

Related articles