Skip to content
  • There are no suggestions because the search field is empty.

Embedding in iframe

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

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.

Embed the EasyLlama learner portal or specific training courses in your application or website by leveraging the EasyLlama API and HTML iFrames.

Before You Start

What You'll Need

  • EasyLlama API access configured on your account
  • A knowledgeable administrator/developer within your organization who can set up and maintain the embed
  • Access to the EasyLlama API Reference

Quick Reference

  • What's possible: Embed the learner portal for a given learner, or embed a specific training assigned to a learner
  • Key API endpoints: GET /learners/{learner_id} (portal) or GET /learner_trainings?learner_id={learner_id} (courses)
  • Completion tracking: Optional course completion signal via postMessage to parent window when course is embedded

Embed EasyLlama Content via iframe

Step 1: Obtain the Training Link via API

Use the EasyLlama API to get the training_link value. There are two options depending on what you want to embed:

Option A: Get Learner Portal Link

GET /learners/{learner_id}

This returns a training_link for the learner's portal.

Option B: Get Assigned Training Course Links

GET /learner_trainings?learner_id={learner_id}

This returns an array of assigned trainings, each with its own training_link for that specific course.

Step 2: Create the iframe

Use the training_link value from the API as the iframe src attribute.

Basic iframe HTML:

<iframe src="YOUR_TRAINING_LINK_HERE"></iframe>

For testing purposes, you can use a third-party tool like W3Schools iframe tester.

Adjust the iframe dimensions and attributes as needed for your application.

Step 3: Set Up Course Completion Signal (Optional)

This method applies only when a course is embedded in an iframe.

Add this event listener in the parent window to receive completion signals:

window.addEventListener("message", function(event) {
  console.log('event.data >> ', event.data);
  // Handle the completion data here
}, false);

When a learner completes an embedded course, EasyLlama sends a postMessage to the parent window with event.data containing:

{
  "id": "UUID1",
  "certificateUrl": "<https://l.easyllama.com/certificates/UUID2.pdf>",
  "status": "completed",
  "scorePercent": X
}

Helpful Tips

Using the proper training_link type

Portal links and individual course links serve different purposes. Choose based on whether you need the full portal or a specific course.

Not testing the iframe embed

Test your implementation using the W3Schools tool or your development environment before deploying.

What's Next?

Quick Questions

When does the course completion signal work?

The postMessage completion signal is only sent when a course is loaded inside an iframe. It does not apply to the learner portal embed.

What's in the completion signal?

The event.data contains the training ID, certificate URL, completion status, and score percentage.

Llama Fact: Llamas are excellent at adapting to new environments—similar to how iframe embedding lets you adapt EasyLlama training into your own website or application!