Skip to main content

Quick Start Guide

By following this step-by-step guide, you learn how to integrate your website with Workshop Butler. Here we describe common steps for configuring each widget. To learn more about the configuration of a specific widget, read the Widgets section.

The approximate time for the completion of this guide is 10-15 mins.

info

We have an easy-to-use click-through kit to configure the widgets. We recommend starting with it and coming back here for more detailed information or in case you want to configure widgets manually. See the Website Integration Kit in the Overview section for more details.

Steps to follow to configure a widget manually:​

Step 1 - Define a website structure​

First, you need to decide what website pages you use for adding the widgets. Let's say you own a website on https://awesomewebsite.com/ domain, and you want to have the list of trainers with their profiles, the schedule of events, and related registration pages.

In this case, a recommended structure is:

  • https://awesomewebsite.com/schedule - for the schedule of events.
  • https://awesomewebsite.com/schedule/details - for the details of each event, together with a registration form.
  • https://awesomewebsite.com/trainers - for the list of trainers.
  • https://awesomewebsite.com/trainers/details - for the profiles of the trainers

Create these pages and move on to the next step.

Step 2 - Include styles and libraries​

Before any Workshop Butler widget can be configured, it should be loaded first. Add this code to the header (<head></head> section) of each page you added on the previous step:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.workshopbutler.com/widgets.1.7.3.js" defer></script>
<link href="https://cdn.workshopbutler.com/styles.1.7.3.min.css" rel="stylesheet">

Line by line explanation:

  1. Loads jQuery library. It's required for correct functioning of the widgets. Remove the line if your website already loads this library. Otherwise, some conflicts may arise.
  2. Loads FontAwesome used by Workshop Butler default themes.
  3. Loads Workshop Butler JS widgets together with page templates.
  4. Loads styles for default themes.

Step 3 - Initialise a widget (or widgets)​

During the initialisation phase, you specify what widgets should be created and launched. The initialisation should be run only after our JS Widgets library is fully loaded. For that, place your initialisation script inside a document event handler wsbwidgetsloaded:

document.addEventListener('wsbwidgetsloaded', function () {
   //the initialisation code goes here
});

The initialisation script consists of two main parts: the configuration of widgets and the launch of Workshop Butler JS Widgets library.

document.addEventListener('wsbwidgetsloaded', function () {
   const eventList = {
       type: 'Schedule',
       target: '#wsb-event-list',
       theme: 'alfred',
       eventPageUrl: '/event-details.html',
       filters: ['type', 'location', 'language', 'trainer']
   };
   const widgets = [eventList];
   const config = {
       apiKey: 'api_key',
       locale: 'en-us'
   };
   WorkshopButlerWidgets.launch(config, widgets);
});

Let’s look at the example above.

The first parameter config contains a general configuration, which applies to all widgets. In this case, it contains the API key and locale. The locale is used to translate the widgets to one of six supported languages. Numbers, dates, and currencies are rendered based on the specified locale.

tip

See the General Configuration for more information.

The second parameter widgets contains configurations for all widgets on the page. For example, eventList is a configuration for the Schedule widget. The list of events will have four filters (by type, location, language, and trainer) in the given order. The page with a configured EventPage widget is located at event-details.html. The widget will use a template located in HTML element with id='event-tpl' to render each event in the list. The library can create several widgets at once so it accepts the array of widgets We launch the library by specifying the API key and the widgets to create.

tip

See the Widgets section for more information.