This page contains different examples of how the integrated course button can be configured and will work.

The prerequisite for the course buttons to work is that the CORS configuration has been done properly on the open edX side.

Examples

Simple button

This button loads the default configurations for all buttons.

Button with additional css class

This looks different because an additional css class is added to the button.

Button with modified labels

This will have a different label, because they are overwritten in the button configuration.

Button with modified target links

This will link to a different place, because the target links are being overwritten.

Additional documentation

As part of the WordPress Open edX integrator, you can use a Shortcode (edunext_enroll_button) to add a Course button to your pages or posts. This button will be linked to one of your Open edX courses and it will link your post or page will the course as required, according to the Open edX user session and the course settings.

Basic Usage:

In the most simple configuration, the button will behave and look as specified in the Open edX integrator plugin settings.

course-v1:organization+coursenumber+courserun

Overriding properties for the button:

To specify a custom class for the container, button or color you may use the attributes button_class_generic, container_class_generic, color_class_generic

There are 5 alternative buttons. One of them will appear depending on the learner state and course settings:

• • enroll the learner is not enrolled and the course is open for enrollments
• • go_to_course the learner is enrolled and can access the course contents
• • course_has_not_started the learner is enrolled but the course hasn’t started
• • invitation_only the learner is not enrolled and the course is by invitation only
• • enrollment_closed the learner is not enrolled and the course is closed for enrollments

There are some settings that can be customized for each button type, including the label, and some CSS classes to be used with the markup. This customizations can be done for all the Course buttons across the site from the Open edX integrator plugin settings page.

Additionally, the properties can be overwritten for a single button, by adding the desired property and value inside the Shortcode. for example you want to customize how this particular button looks when in the case of “invitation_only” you may use this Shortcode:

course-v1:organization+coursenumber+courserun

You only need to include the properties you want to override in each button. The list of possible variables you can override is:

• button_class_generic
• container_class_generic
• color_class_generic
• label_enroll
• button_class_enroll
• container_class_enroll
• color_class_enroll
• link_enroll
• label_go_to_course
• button_class_go_to_course
• container_class_go_to_course
• color_class_go_to_course
• link_go_to_course
• label_course_has_not_started
• button_class_course_has_not_started
• container_class_course_has_not_started
• color_class_course_has_not_started
• link_course_has_not_started
• label_invitation_only
• button_class_invitation_only
• container_class_invitation_only
• color_class_invitation_only
• link_invitation_only
• label_enrollment_closed
• button_class_enrollment_closed
• container_class_enrollment_closed
• color_class_enrollment_closed
• link_enrollment_closed
• hide_if

Link override:

It is possible to set a link for each state with the attribute link_<state> For example: if you want to set a landing page or e-commerce when the status is enroll, you can set it as link_enroll=”https://myexample.com”

course-v1:organization+coursenumber+courserun

Advanced usage:

You may also use the attribute hide_if=”not logged in” if you want to hide the button when the user is NOT logged in. Inversely you may use the attribute hide_if=”logged in” if you want to hide the button when the user is logged in

course-v1:organization+coursenumber+courserun