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.

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="500" height="500"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

The course catalog widget will only list courses that are marked as "Show this course in published course catalogs and on the front page".
Please make sure to have course banners uploaded to your courses so that they appear as thumbnails.

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:

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="800" height="1000"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

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:

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="500" height="500"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog?showSearchBox=yes">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

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:

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="500" height="500"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog?CatIds=CAT1,CAT2,CAT3">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

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:

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="500" height="500"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog?showCatSelector=yes">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

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

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="500" height="500"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog?lang=es">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

Specifying the Number of Columns

By default the snippet will display three columns and as many rows as necessary to show all your published courses. You can change the number of columns by forcing the snippet to display 1, 2, 3, 4 or 6 (5 or more than 6 columns are not supported).
To do so add an extra parameter colCount=X, where X can be 1, 2, 3, 4 or 6.

Example: Setting 4 columns.

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="500" height="500"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog?colCount=4">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

Combining Parameters

​You can combine several parameters. For example:

<!-- BEGIN ELECTA COURSES CALENDAR FORM -->
<iframe frameborder="0" width="500" height="500"
    src="https://YOUR_ELECTA_SITE_NAME.school-network.net/HTMLApi/HTMLCoursesThumbnailCatalog?showCatSelector=yes&showSearchBox=yes&lang=ar">
</iframe>
<!-- END ELECTA COURSES CALENDAR FORM -->

​