Skip to content

Widgets/Website Integration

Course Finder allows you to integrate your course/class offering directly into your existing website/homepage so that your participants/customers can get immediately an overview of the offering and book them right from your website.

To create a new widget for integrating into yourwebsite, proceed as follows:

  1. From the course provider view, click Settings in the top menu bar.
  2. Click on Website integration/widget in the left menu bar.
  3. Now click on New widget.
  4. A window opens.
  5. Provide a widget name if you have defined several widgets to keep track of them.
  6. Select whether your course offerings should be displayed on the website in the form of a weekly calendar or as a list, or both.
  7. For the list display, select which information the list should contain by adding/removing columns as well as arragingig the desired order.
  8. With the Course filter you can also restrict whether all or only certain courses should be displayed in the widget.
  9. Then click Save
  10. Then copy the HTML code into your website where the widget should appear. You can use the preview function to test in advance how the widget would appear on your website and to see what information it would display.

Advanced Settings

In the Advanced Settings you can configure the appearance of the widget such as CSS styling etc..

Button text

Here you can determine which text should appear on the buttons. By default, the text Book is assigned to the book button and the text Waiting list to the waiting list button.

Click on book button

A click on the book button for a course offering in the list or the calendar view can either forward your website visitors to the offering on the Course Finder website where the participants can then make the booking, or alternatively, to the embedded registration form for making the booking straight from your website.

Embedding

The widget can be embedded either directly or as an iframe via so-called DOM manipulation in the existing HTML tree of the website.

DOM tree

With DOME tree embedding, the design of your website will be applied to the widget so that the font, size, colors and buttons immediately have the same style as other elements of your website.

iframe

When embedding via iframe, you must use CSS style sheets to specify the font, size, colors, etc. yourself so that the widget fits well into the existing website.

By default, the widget uses CSS classes and theme from the so-called Bootstrap framework. Based on the existing Bootstrap CSS stylesheet, you can easily customize your design on the following website without any programming knowledge: https://bootstrap.build/app

You can customize the CSS classes and which CSS style sheets are to be used under CSS style sheets, CSS table definitions and CSS form definitions.

Filter for CourseId

In this field, you can enter a regular expression that will be used as a filter for the course ID. For example, if you use AF-DD-2105 as the course ID for one of your aqua fitness courses, then all aqua fitness courses with this course ID will appear using the AF-DD-.... filter, regardless of the last four digits. However, a baby swimming course with a course ID BS-DD-2105 will not appear.