How do I publish a course catalog on my website?

: 5 Years Ago
: Administrator
: Simple HTML Code Snippets

This guide about publishing a table-like course catalog. There is another code snippet for publishing a course catalog with image thumbnails. Check related guides below.

You can publish your Electa Live course catalog (aka course calendar) on your website using a ready HTML code snippet (widget). Having your list of courses published on your website will allow your website visitors to browse your courses and enroll or purchase them directly from your website.

Getting the Integration HTML Code Snippet

To get the code log into your Electa Live LMS account with admin credentials and open Account Settings > HTML Integration & API Access. Scroll down the page and copy the code from the course catalog area. Then publish this HTML code snippet on your website using your website builder tool.

Sample Course Catalog Code Snippet

The course catalog code snippet looks like this. The code below is just an example. Each code snippet is specific for each account. You can get your own code snippet as explained above.

<iframe frameborder="0" width="500" height="500"
src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesCalendar">
</iframe>

The course catalog widget will only list courses that are marked as "Show this course in published course catalogs and on the front page".

Customizing the Catalog

You can customize your course catalog widget to fit on your website by changing or adding some parameters. The catalog is displayed through a standard iframe html element.

Setting Width & Height

You can change the width and height of the catalog by specifying respectively width and height values of the iframe tag. Example:

<iframe frameborder="0" width="800" height="1000"
src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesCalendar">
</iframe>

Adding a Search Box

You may want to enable course search option for your site visitors. To do so add the following parameter to the src value: showSearchBox=yes.

Example:

<iframe frameborder="0" width="500" height="500"
src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesCalendar?showSearchBox=yes">
</iframe>

Restricting Courses by Category

To restrict the catalog to display course belonging to certain course categories add the following parameter: CatIds=CAT1,CAT2,CAT3 . The parameter CatIds holds the IDs of the categories you would like to show. Only courses belonging the listed categories will be displayed.

Example:

<iframe frameborder="0" width="500" height="500"
src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesCalendar?CatIds=CAT1,CAT2,CAT3">
</iframe>

In the example above CAT1, CAT2, CAT3 are the IDs of the respective course categories as defined in your Course Categories list.

Displaying a Category Selector

To display a list of categories in a drop down-list add the following parameter to your src value: showCatSelector=yes. If this is used with a combination of CatIds parameter only the drop-down category selector will show only categories from the list otherwise all course categories will be available in the drop-down.

Example:

<iframe frameborder="0" width="500" height="500"
src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesCalendar?showCatSelector=yes">
</iframe>

Setting a Language

The default language of the code snippet is the language that is set as default on your account (See Account Settings > Look & Feel). However you may want to have the widget displaying a different language.

To set the language of the widget add the lang parameter to the src value. The following languages are available: en-GB, en-US, es, fr, ar, it, pt, bg.

en-GB - will switch to English with dates/times displaying in as commonly accepted through out the UK.
en-US - will switch to English with dates/times displaying as commonly accepted in US.
es - Spanish
fr - French
ar - Arabic
it - Italian
pt - Portuguese
bg - Bulgarian
ru - Russian (coming soon)
el - Greek (coming soon)
cn - Chinese (coming soon)
de - German (coming soon)

Example: Setting Spanish Language

<iframe frameborder="0" width="500" height="500"
src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesCalendar?lang=es">
</iframe>

Affiliate Tracking

You can track where your students register from by using the Affiliates & Tracking option. To do so you must create affiliates and then provide a unique AffiliateId parameter to each code you embed on different websites. See Affiliates and Tracking.

Combining Parameters

You can combine several parameters. For example:

<iframe frameborder="0" width="500" height="500"
src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesCalendar?showCatSelector=yes&showSearchBox=yes&lang=ar">
</iframe>