Embeddable fluidic player

As an enterprise, you can now provide a custom experience for your learners even outside Captivate Prime. Using the public API, you can fetch all the information related to learning objects, learners’ enrollments and learning progress and display them on your website. More importantly, you can even embed the fluidic player of Prime in your website, so that the learner can consume the content right within your website. The fluidic player gives you the power to play any content that Captivate Prime supports. When embedded on your own website, it has the exact same capabilities as when used within Captivate Prime.

Play any eLearning content

The Fluidic player plays virtually any type of eLearning content in the same consistent and intuitive manner without requiring any plugins, or downloads. The learner can launch the content and irrespective of the contents file type, it starts playing.

Notes and Bookmarking

You can take notes and bookmark any content irrespective of its file type. If you want to make a certain selection from a long file or video, you can bookmark the very points where you have found the information that is relevant to your needs. The notes and bookmarks can be searched or sent as email. Clicking on them lands you in the fluidic player exactly at that point of the video, or page of the document.

For more information on fluidic player, see Fluidic player.

Here are some examples of where you can use the embeddable fluidic player.

• You can use the embeddable fluidic player in your website to list down the enrolled courses of your employee and also provide a link to launch a training on the same page. This would mean that your learners can consume trainings on your intranet website.
• If you are in the business of training, you may perhaps have a website where your customers purchase courses. You can integrate the embeddable player with the same website so that your customers can consume the content they buy within your website.
  

Building a custom application for embedding fluidic player in your website involves three basic steps:

1. Create an application in integration admin app of Captivate Prime.
2. Retrieve Access token.
3. Use access token to retrieve resources from Captivate prime using public API.
   

This step is required to create an application/client id and application/client secret which is used to retrieve refresh token and access token. For more information on creating an application, see Application development process.

As Captivate Prime uses OAUTH2.0., access token is required to retrieve resources using public API. Access token can be fetched using refresh token, client id, or client secret.

2.1 Refresh token

• Retrieve OAuth Code

OAuth code is required to retrieve refresh token. Captivate Prime redirects the user to the redirection URL with the OAuth code when signed-in using the below url (OAuth code extraction is exemplified in the “oauthredirect.html” file in the sample application):

https://captivateprime.adobe.com/oauth/o/authorize
client_id= <application_id>
&redirect_uri=<redirect_uri>
&state=<dummy_data>
&scope=learner:read,learner:write
&response_type=CODE
&account=<account_id>
&email=<email_id>

Here, client id is the application id obtained in step 1.
redirect_url is the redirect_url set in step 1.
state is any dummy data based on which we need to filter redirect URL to get OAuth code. Scope is learner scope set in Step 1.
response_type is always “CODE”.
account is an optional field
email is an optional field
* If both account id and email are provided, the above URL will allow the user to log in to the same account. This endpoint example is depicted in “index.html” file in the sample application.

• Retrieve Refresh Token

Once OAuth code is received, refresh token can be retrieved using the received OAuth code, client id, and client secret from the below endpoint:

https://captivateprime.adobe.com/oauth/token

As a response to your post request, you will receive the following:

i. refresh_token
ii. access_token
iii. user_id
iv. expires_in
v. user_role
vi. account_id

2.2 Retrieving access token from refresh token

To retrieve your access token, send another request with your refresh_token, client_id, and client_secret as a post body to the below URL:

https://captivateprime.adobe.com/oauth/token/refresh

As a response to your post request, you will receive the following:
i. refresh_token
ii. access_token
iii. user_id
iv. expires_in
v. user_role
vi. account_id

As the third step, you need to use the access token to retrieve resources from Captivate Prime using public api. Access token is required to make any public api call and is required to be added in the header as exemplified in the sample application.

Third-party applications can make use of embeddable player to play the content of a learning object.

Open a course in embeddable player

1. Create an embeddable URL

To open a course using embeddable player, you need to create an embeddable URL as shown below:

https://captivateprime.adobe.com/app/player?lo_id=<v2-api course id>&access_token=<access_token>

Here, lo_id needs to comply with the V2 API course id format.

Example: https://captivateprime.adobe.com/app/player?lo_id=course:123456&access_token=45b269b75ac65d6696d53617f512450f

Certifications, learningPrograms, and jobAids can also be played in the embeddable player.

Examples: https://captivateprime.adobe.com/app/player?lo_id=certification:12345&access_token=c1a4847dfbf4007826a027d481b93c1e

https://captivateprime.adobe.com/app/player?lo_id=learningProgram:12345&access_token=c1a4847dfbf4007826a027d481b93c1e

https://captivateprime.adobe.com/app/player?lo_id=jobAid:1234&access_token=c1a4847dfbf4007826a027d481b93c1e

     2. Set this URL in the “src” attribute of iframe.

Closing embeddable player

window.addEventListener("message", function closePlayer(){
   if(event.data === "status:close"){
     //handle closing event
   }
});

The attached pdf document contains a sample application tutorial.