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 -->