Using the HTML Plug-in on your website

Search for a solution

The HTML plug-in is a low-development way to integrate your accessplanit courses into your website.

The HTML plug-in displays a table of advertised, future courses on your website to easily advertise your Course availability and give your customers a seamless transition into your accessplanit shopping basket when they click to book!

Why integrate?

There are two main reasons to integrate your courses into your website:

  1. To advertise your course availability
    The HTML plugin displays a table of available, future courses. Your customers can see which courses you are running on what dates, where those courses are being run, and if there are still places left.

  2. To allow people to directly book course places online
    With the HTML plugin you can include a ‘Book’ button which takes your customers straight to your accessplanit shopping basket with that course added, this means you can be taking bookings 24 hours a day, 7 days a week!

 


Why use the HTML Plugin for website integration?

There are two core ways to integrate your accessplanit courses into your website. You can either use accessplanit’s XML feeds which offer a lot of flexibility and functionality for a highly-configured website, or you can use accessplanit’s HTML Plugin for a quick and easy integration, many accessplanit customers opt for the HTML Plugin route as a long-term integration, and some have also chosen this route as a temporary solution while their website developers work on their final website using the XML Feeds.

The benefits to using the HTML Plugin are:

  1. Simplicity, there are only a handful of decisions to make when defining how your website will display your courses if you choose to use the HTML plugin, whereas there are a lot more design details and decisions for you to work with your website developer on if you choose to use the XML Feeds.

  2. Speed, the HTML Plugin is very easy to implement which often means that your website can be up and running much quicker and at a much lower cost.

Please Note: If you’re using Wix, some components of the HTML might not be compatible. (Wix only supports HTML that starts HTTPS)


Example website

Here is an example website containing the HTML plugin, the design of the form (i.e. the fields included and the styling) are defined by yourselves and your web team, so you can choose what information you display, and include your own branding!


Customer decisions

Before your web team begin adding the HTML Plugin into your website, you need to decide how you would like your courses to be filtered and what information you would like to display.

  • Filtering your courses
    There are several options for filtering your courses on each of your web pages. For example if you have a page on your website per category (i.e. a Health & Safety page, or a Professional Development page) you would filter your courses by category. Whereas if you have a page dedicated to each course that you offer, and only wish to display the dates for that specific course on the page, you would filter by Course Template.

    The only mandatory filter is the Training Provider offering the course, this means that if you have multiple Training Providers, at minimum you will need to set up a different page on your website for each provider.

    The following options are available for filtering:

    1. Display all course dates for the training provider

    2. Display the course dates per course (template)

    3. Display the course dates per course category

    4. Display the course dates per venue

    5. Display the course dates per industry

  • Information to display
    You can decide what information is included within the table of courses.
    There are lots of options for you to choose from:

    • Course Name (recommended)

    • Course Alias

    • Start Date (recommended)

    • End Date

    • Start Time

    • End Time

    • Dates

    • Venue (recommended)

    • Trainers

    • Course Type

    • Places (recommended)

    • Cost

    • Cost Type

    • Cost With Currency (recommended)

    • Currency

    • Currency Symbol

    • Enquire button

    • Book button (recommended)

Please let your web team know your filtering and information preferences.


Whitelisting

Before your web team begin development, please provide accessplanit with the URLs that need access to use the HTML Plugin as these must be whitelisted for the tool to work. These URLs do not need to be publicly accessible, however they should not be locally hosted.

If you have trouble loading courses on your website using the HTML Plugin, this may be the cause.

If you will be hosting the table in a frame, please let a member of the accessplanit team know so that we can allow for frame security.

Please ensure when providing the URL, that it is exact and contains https://


Which courses won't show?

There are a few reasons why a course might not show in the HTML Plug-in:

  • Exclusivity - If a course template or date is exclusive to a certain account or account group, this won't show in the plug-in. This is to make sure that only public courses are listed on your website, rather than any courses that you are running specifically for one customer. There is a setting that accessplanit can change to allow exclusive course to show, please get in contact with the accessplanit support team if you would like this changed. 

  • Advertising - If both the course template and course date have the "Advertise" field ticked, and the current date is within the "Advertise Start/End Dates" date range, then the course will show in the feed.

  • Dates - By default, only future courses will show, however there is a setting that accessplanit can change to allow courses that have already started to appear in the feed. Please get in contact with the accessplanit support team if you would like this changed. 

  • Status - Courses with the following statuses won't show in the plug-in:

    • Cancelled

    • Completed

    • On Hold

    • Failed

You can learn more about Course Management here. 


Example HTML

Here is the example HTML for the plugin, please make the required changes to this and include it in-line within your web pages.

<script src="https://configname.accessplanit.com/accessplan/NetLibrary/ClientScripts/webintegration.js"></script> <script type="text/javascript"> var options = { ContainerID: 'response', CompanyID: "TRAININGPROVIDERID", Columns: [CourseManager.columns.CourseName, CourseManager.columns.StartDate, CourseManager.columns.StartTime, CourseManager.columns.EndTime, CourseManager.columns.Venue, CourseManager.columns.Cost, CourseManager.columns.Places, CourseManager.columns.Book] }     CourseManager.coursesTable(options); </script> <div id="response">Please wait, loading course dates...</div>

The following two changes must be made to the example HTML above for it to work on your website:

  1. Script Source
    The ‘configname' in the example HTML above should be replaced with your accessplanit platform’s name. This is the first part of the URL on your platform and this is typically the name of your company.
    For example, if your accessplanit platform was called 'Galaxy’, the URL to access your accessplanit platform would be https://galaxy.accessplanit.com and the script source URL would be
    https://galaxy.accessplanit.com/accessplan/NetLibrary/ClientScripts/webintegration.js


    If you are setting up your integration with your Sandbox accessplanit environment to begin with, before switching the integration to use your Live accessplanit environment, then you will also need to change your script source to reference the sandbox site. To do this change ‘accessplan’ in the URL to ‘accessplansandbox’. For example:
    https://galaxy.accessplanit.com/accessplansandbox/NetLibrary/ClientScripts/webintegration.j

    Please note: Only the sandbox feed OR the live feed can be used on one page - not both

  2. Company ID
    The ‘TRAININGPROVIDERID’ in the example HTML above should be replaced with the ID of the Training Provider running the courses.
    You can find the Company ID inside your accessplanit platform by viewing your Training Provider Account and checking the ‘Account ID’ option:


HTML breakdown & further options


Integration script

This is used to reference the accessplanit JavaScript needed to build the table.

<script src="https://configname.accessplanit.com/accessplan/NetLibrary/ClientScripts/webintegration.js"></script>

 

Build Options object

In a <script> tag, build up an options object:

var options = {   ContainerID: 'response',   CourseIDs: ["COURSEID"],   CompanyID: "TRAININGPROVIDERID",   CategoryIDs: [],   IndustryIDs: [],   VenueIDs: [],   Columns: [],   CssClasses: { table: 'table', headrow: '', headcell: '', valuecell: '', valuerow: '', datecell : '',     courseName: '', trainers: '', venue: '', anchor:'btn', bookBtn: 'tdbtn', enquireBtn: 'tdBtn'}     }

Please note that only the CompanyID is mandatory here, this is the Training Provider’s Account ID.

The rest of the options such as CourseIDs, and VenueIDs can be used to filter down the results as required.

 

ContainerID is the ID of a container in your website which will have its HTML replaced with the requested course table.

 

Columns: If empty then this will include all columns defined as default. If only specific columns are required, then use the object CourseManager.columns and include desired columns in an array.

To change the column names, i.e. from “Course Name” to “Product Name”, include the replacement name directly after the column.

It is important to note that the position of this line of code is extremely important and should be located after <script type="text/javascript"> like so:

Similar assignments can be used for all column headers:

 

CssClasses: The client website has the option of just styling the container passed to us or pass in specific classes to the CssClasses object. The options in the example should be fairly self-explanatory.


Call Coursemanager

Now the options object needs to be passed into the CourseManager object as below:

The container div should be populated with the data and styling requested.

Define the loading message

Include any loading message you want in the container being populated, e.g.

 


Date and time formatting

Some users have experienced issues with course dates & times appearing in a different format (UK or US) when using the plugin.

This is due to the language settings in the user's browser, which can be accessed in Google Chrome by copying this (chrome://settings/?search=language) into the address bar, or through your browser settings in Chrome and other browsers. 

All users should have their language set to their geographical area, for example: English (United Kingdom) for UK dates and times, and English (US) for US dates and times. 


Cookies

The accessplanit platform uses cookies to store the content of Users' shopping baskets, so that the information is remembered as they navigate around your website and through the basket. 

Once a customer clicks to add a course to their basket, we will store a cookie recording this.

If you do not yet have a cookie policy available on your website, we encourage adding one to inform your customers that cookies will be recorded.