Skip to main content

Overview

Workshop Butler JS Widgets library allows you to show information about events and trainers on your website and enables visitors to register for your events via customisable registration forms. It is easily configurable and works seamlessly with Workshop Butler API. At the moment, there are 6 widgets you can configure to your needs.

Types of supported widgets:

  • Event schedule shows past or upcoming events with various filters and allows visitors to register for future events.
  • Event page contains the details of a specific event.
  • Registration page allows visitors to register for an event.
  • List of trainers shows the list of all trainers with various filters.
  • Trainer profile contains detailed information about a particular trainer and a list of future or past events.
  • Sidebar event list shows past or future events in the layout suitable for adding it to a sidebar.

See the Widgets section to learn more about each widget, all available features and their configuration.

info

We constantly improve our JS Widgets and the documentation about the library. The library is open-sourced so you can always take a look inside the code if you have the question not covered by this documentation. The documentation always reflects the most recent library's version.

How the widgets work

Before making the first step, let's discuss how the widgets work. This knowledge helps you understand the rest of the guide better.

A widget is a piece of javascript code. It executes when a page is fully loaded. As a result, you may experience a very short delay between the moment the page loads, and an appropriate content (an event schedule or a trainer's profile) appears.

The execution process consists of several steps:

  1. A widget parses an URL and retrieves the required parameters. For example, the ID of an event.
  2. The widget sends a request to Workshop Butler to get page data.
  3. The widget renders the content of the page, using the data it got on the previous step.
  4. The widget inserts the rendered content on the page inside an existing HTML element. When this step is completed, a visitor sees the content.
  5. If the widget contains references to other widgets, it executes them as well.

With new knowledge in hand, it's time to start integrating your website with Workshop Butler.

Website Integration Kit

We highly recommend you use our integration kit. With it, you can easily configure any widget with a click-through UI:

https://workshopbutler.com/kit

Just choose the configuration you need and you’ll receive the generated code and the instructions on where to put it to get the widget up and running. This way, you can set up any of the 6 widgets listed here.

tip

If you want to see how the kit works first, type in “test” in all the fields on the first two steps.

Follow the steps below to configure any widget:

Step 1 - Enter preliminary data

Insert your API key, choose the widget language, and the engine your site is on.

Follow the instructions from the Intro section to get your API key.

Right now, 6 languages are supported by JS widgets: English, German, Portugues, Spanish, French, Dutch. Read more about setting up languages in the General Configuration section.

Step 2 - Set up pages

Choose the pages of your website on which you plan to add widgets - set up pages for the event itself, registration form, and a trainer's profile.

You can read more about how to define site structure in the Quickstart Guide.

Step 3 - Choose a theme

Choose the theme for your widgets.

A theme is what your widget looks like - color, fonts, etc. You can either pick one of the two standard themes or add your own custom theme. Read our Theme Customisation section to learn how to do it.

tip

If you want to customise not just the style, but the structure of the template, follow our instructions in the Template Customisation section.

It’s also possible to change the way the widget itself works. For this, read the Widget Customisation section.

Step 4 - Choose a widget

Choose the widget you wish to install on your website.

Read the Widgets section for more detailed information about each of them and to see how they look live.

Step 5 - Choose a configuration

Choose the Widget configuration.

Depending on what widget you have chosen in the previous step, you will be offered different configuration options.

Step 6 - Get the code

Get the code with the instructions on where on the page you should insert it. The code will be generated based on the choices from your previous steps.

That’s it. As you can see, the guide is really simple and doesn’t require any technical skills. With it, you can configure basic widgets for your website.

However, if you wish to delve deeper and configure everything yourself, follow our Quickstart Guide.