How to add a widget for course registration and student account login
With the SendPulse website builder, you can use the “Course login” widget to add buttons for course enrollment or log in to a student account to the course registration page with your own design.
For example, you can create a multi-page site about your school or an expert, link various courses to it, and present them in the required style.
You can add this widget only to a site with a linked course. To do it, go to the course site, create a new page of your site with a linked course, and add the widget to it.
Add the element
Add the Course login widget to your template.
Select a course
Select a course to add buttons to its page.
Select and customize the buttons
In the Form display options field, select your widget forms (Sign In, Sign Up, or both).
Sign up
This button leads to your course registration page. You can add fields to your registration form and customize your registration button.
Once a user fills out your registration form, they will receive a confirmation email with their login data. They will be able to log in to their account and start learning after following the link specified in your email.
Read more: How to allow students to enroll by themselves.
To configure the button and form, go to the Sign up tab.
Set up your form
You can configure your existing fields, including Email and Password, or add your own.
To add a new field to your form, click Add field.
To edit an existing field, click the pencil icon next to it.
In the next window, select a field type, and enter its name.
In every form field, select a CRM contact field to which you want to save variables. The system will also create deals for your new students.
To make a field required, turn on the toggle.
Set up your button
This button leads to your course registration page. You can display different button text versions depending on whether a student was previously enrolled in any course of the same instructor on that domain or not.
To go to button settings, in the Sign up button field, click the pencil icon.
In the next window, select a text for each scenario:
| Course sign in text | This text version is displayed if the student did not log in to their account. |
| Course sign up text | This text version is displayed if the student logged in but did not enroll in the course. |
| Go-to-course text | This text version is displayed if the student logged in and enrolled in the course. |
Add additional button
You can also add an additional button in the section to add extra information. Click Add button. Click on the pencil to go to button settings.
Sign in
This button leads to your student account login page. Students can log in to their accounts if they registered for a course of the same instructor on this domain.
To configure the button and form, go to the Sign In tab.
Set up your form
You can customize your standard fields (Email and Password) by editing their names and placeholders. To do this, click the pencil icon next to each field.
Set up your button
To edit your button text, click the pencil icon in the Login button section.
Customize the widget appearance
Customize the appearance of the element. Choose the alignment: left, center, or right.
In the Field appearance section, choose how the widget will look on your website page.
| Static form | Displays an expanded authorization or course registration form with data entry fields. |
| Modal form | Displays authorization and registration buttons that open a form when a user clicks them. |
To change your button style, click the pencil icon, and select a button style and size.
To change your field style in the static form, click Field styles.
You can customize your button using the following options:
| Modal window background | This option adjusts your form’s background color. Select a color. |
| Rounding | This option adjusts your form rounding. Specify a value in pixels. |
| Inner padding | This option adjusts your form’s inner padding. Specify a value in pixels. |
| Form texts color | This option adjusts your form’s text color. Select a color. |
| Field appearance | This option adjusts your form’s field shapes. Select a rounded or rectangular shape. |
| Input field text color | This option adjusts your form’s input text color. Select a color. |
| Background color | This option adjusts your form’s text background color. Select a color. |
| Border color | This option adjusts your form’s border color. Select a color. |
| Field size | This option adjusts your form’s field sizes. Available sizes: small (S), medium (M), and large (L). |
| Form link color | This option adjusts your form’s link color. Select a color. |
You can also choose your column content location — left, center, or right — in the Alignment field.
Configure analytics
You can transfer your goals from your form to Google Analytics and Facebook Pixel events. Click Analytics settings.
If you haven't activated analytics yet, follow the How to set it up link.
To complete your data transfer, add the Facebook pixel and Google Analytics code to your website settings.
Read more: How to Connect Google Analytics to Your Site and How to Connect Facebook Pixel to Your Site.
If your analytics are already activated, you will see two toggles.
Turn on the Transfer the goal to Google Analytics or Transfer the goal to the Facebook pixel toggle.
If you have turned on the Transfer the goal to Google Analytics toggle, enter your data in the Category, Action, and Label fields — these parameters will be transferred to Google Analytics in the Events section.
If you have turned on the Transfer the goal to the Facebook pixel toggle, the Complete Registration event will be generated automatically. You will be able to see it in Events Manager in your Facebook Business Account.
Copy your element ID
Every element has an ID that distinguishes it on the page. With it, you can add styles and scripts, show pop-ups, and track events for this element.
To copy an ID, click it. To edit an ID, click the pencil icon.
Read more: Block and widget ID.
Save your settings, and then publish the site.
Last Updated: 14.03.2024
or