Embedding in iframe

Ilya Kukovitskiy Updated by Ilya Kukovitskiy

An iframe, or inline frame, is an HTML element used to embed another HTML element within it. You can embed the entire EasyLlama learner portal or a specific training assigned to a learner in your application or website by leveraging the EasyLlama API and iframes.
This is an advanced integration and will require the EasyLlama API and a knowledgeable administrator within your organization, who can setup and maintain the embed.

To embed EasyLlama in an iframe, you will use the training_link value from the API as the src. Depending on which API call was used, there are two types of training_link: for the learner portal for a given learner, and for a training that is assigned to a learner. When embedding an assigned training, you can set up a course completion signal listener in the parent window.

API Reference: https://dashboard.easyllama.com/apidocs

To embed EasyLlama in an iframe, please follow these steps:
  1. Obtain the training_link value via API. There are two options:
    1. GET /learners/{learner_id} - Learner Portal
    2. GET /learner_trainings?learner_id={learner_id} - Training Courses Assigned to Learner
  2. Create an iframe (you can use this 3rd party for testing: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_Iframe)
  3. Enter the training_link from step 1.
  4. Adjust the iframe as needed

Course Completion Signal to the Parent Window

Instead of SCORM completion tracking, we can send the completed learnerTraining payload via postMessage to the parent window when the course is loaded inside an iframe.

This method is only applicable when the course is embedded in an iframe.
  1. Add the following code in the parent:
    window.addEventListener("message", function(event) {
    console.log('event.data >> ', event.data);
    //........
    }, false);
  2. Handle event.data that is sent to the parent window. Here is a sample of event.data:
    {
    "id": "UUID1",
    "certificateUrl": "https://l.easyllama.com/certificates/UUID2.pdf",
    "status": "completed",
    "scorePercent": X
    }

How did we do?

Deel Integration

Gusto Integration

Contact