Embedding organizational courses – Help center

To expose a course for learners on your website, you will need the ID of the course (COURSE_ID) and a Versal session ID (SID) for the learner. A Learner SID can be obtained in one of two ways:

1. Versal For Organizations API

Execute a sign-in script to authenticate your existing users with the Versal for Organizations API and obtain a session ID for the learner (LEARNER_SID). Fill the COURSE_ID and LEARNER_SID in to the course embedding template below:

<!-- 1. Insert required styles and scripts into the page <head> -->
<link rel="stylesheet" href="https://versal.com/player/browser.css">
<script src="https://versal.com/player/vendor.js"></script>
<script src="https://versal.com/player/browser.js"></script>

<!-- 2. Provide a "root element" within the <body> of the page -->
<div id="player_container"></div>

<!-- 3. Provide a user session ID and course ID and call the launcher script -->
<script>
var playerOptions = {
  "sessionId" : "LEARNER_SID",
  "courseId"  : "COURSE_ID"
};

var rootEl = document.getElementById('player_container');

var player = window.launchVersalPlayer(rootEl, playerOptions);

player.on('courseCompleted', function (payload) {
  console.log("You've completed ", payload.courseId)
});

</script>

2. SAML Single Sign-On

Versal supports single sign-on for course learners with the SAML 2.0 protocol. Please contact us here to configure your organization for SAML SSO support. We will need the following SAML Identity Provider configuration parameters:

Entity ID
X.509 Certificate
NameId Format
SSO Service Endpoint URL

plus your Versal Organization ID (ORGANIZATION_ID).

Fill the COURSE_ID and ORGANIZATION_ID in to the course embedding template below:

<html>
    <head>

    <!-- 1. Insert required styles and scripts into the page <head> -->
    <link rel="stylesheet" href="https://versal.com/player/browser.css">
    <script src="https://versal.com/player/vendor.js"></script>
    <script src="https://versal.com/player/browser.js"></script>

    <!-- 2. Insert the SAML specific session script with your organization ID in the URL -->
    <script src="https://versal.com/sso/saml/orgs/ORGANIZATION_ID/session.js"></script>
    </head>

    <body>
    <!-- 3. Provide a "root element" within the <body> of the page -->
    <div id="player_container"></div>

    <!-- 4. Provide a user session ID and course ID and call the launcher script -->
    <script>
      if (window.versalSessionId) {
        var playerOptions = {
          sessionId : window.versalSessionId,
          courseId  : 'COURSE_ID'
        };

        var rootEl = document.getElementById('player_container');
        var player = window.launchVersalPlayer(rootEl, playerOptions);

        player.on('courseCompleted', function (payload) {
          console.log("You've completed", payload.courseId);
        });
      } else if (window.versalAuthenticationUrl) {
        window.location = window.versalAuthenticationUrl + '?resource=' + window.encodeURI(window.location);
      } else {
        console.error('A session could not be established with Versal');
      }
    </script>

    </body>
</html>

Find information about SAML test users here.

Related articles