Classe365's Front End Widget

Classe365 Front End Widget provides educational institutions to embed login options directly into their website.

Ashley Cooper avatar
Written by Ashley Cooper
Updated over a week ago

In addition to the account URL (example - youraccount.classe365.com), we now support a login widget that can be embedded into your website. An example can be found in this link. Click on the bottom right-hand corner to open the widget. The widget enables users to Login, access CRM Forms, E-commerce products and fundraising campaigns.

STEP-1: GET EMBED CODE

Login to Classe365 as a super-admin and go to Account > Org Settings > Organization Profile > Copy the Embed Code

The embed code has the following options:

  • Domain - this is your subdomain, leave this as it is and do not change the value here.

To disable the default options you can uncomment the following and bind the widget to any custom button or a link.

  • classSelector - You can specify any HTML tag with the class value to pop out the widget on click events. It can also be used to load the widget through an HTML element like a button with custom theme/template style to match your website brand.

  • defaultSelector - 'yes' or 'no', it'll allow you to load the default values in the widget. By default, "yes" is selected, if you don't want to load the default you can uncomment by removing "//" in the code.

STEP-2: ADD THE CODE IN YOUR WEBSITE

Share this code with your website developer, the developer will have to place the code inside your webpages.

A sample HTML page can be found here.


Preview of Front-End Widget

Here's a preview of your front-end widget in a sample webpage.

Clicking on the "Logo" will load a crisp UI containing the "Login", "CRM Forms", "E-Commerce", and "Fund Raising" front-end blocks.

Login Tab


Forms Tab

Similarly, the "E-Commerce Products" and "Fund Raising Campaigns" are rendered in this widget.

NOTE: To customize the widget or to bind with custom HTML element, refer to the below code:

Make a note of classSelector it should have the class-name with a "dot" preceding.

<button class="classe365-btn btn-primary btn pull-right">
Click Here
</button>
<script>
var c365FwConfig = {
domain : 'evaluate3x', // DO NOT CHANGE
defaultSelector : 'yes', // uncomment this to hide defaultSelector
classSelector : '.classe365-btn' // uncomment this and specify the class name to display this widget on click of any element in your website
};
</script>

Questions?

Write us here "support@classe365.com" or contact us using the in-app chat tool!

Did this answer your question?