It is possible to embed CourseArc content on another website.

When the course setting Public Course?: is set to Yes to share the course via the Internet, learners do not log in and cannot be tracked. As a result, the following limitations exist:

  • Bookmarking, tracking, and progress bar features only work for logged in users.
  • Scoring of activities and passing of scores to an LMS gradebook only work with an LMS-LTI integration.
  • Learners will receive scores and feedback. However, interactions, answers, scores, and feedback will not be saved for learners.
  • All interactions, questions, and activities work as expected with the exception of the following blocks:
    • Writing Blocks
    • Poll Blocks
    • Graphic Organizer Blocks
    • Survey blocks

We recommend you replace those blocks with a different block or activity. If you would like code to be added to the course to hide the SUBMIT buttons on Writing and Graphic Organizer blocks so you can still use them in a public course, please submit a ticket.



  1. Navigate to the Manage Course: view and select Edit Course.

    Note: If a course has a glossary, the Edit Course option will be in the Manage dropdown.
  2. In the Edit Course view, set the Public Course?: option to Yes.

  3. Click the Submit button at the bottom of the Edit Course view to save the changes.

  4. Copy the URL of the first page of the module that needs to be embedded on a webpage.


On your webpage, add the following HTML making sure to replace the URL copied into the src attribute: 

<iframe src="[PASTE YOUR URL HERE]" style="width:100%; height: 100px;" id="courseArcFrame"></iframe>


To ensure that the iFrame sizes itself properly, add this JavaScript into the page.
Note: In line 3, substitute your organization's subdomain for demo.coursearc.com. 

<script type="text/javascript">
window.addEventListener('message', function(e) {
  if (e.origin == "https://demo.coursearc.com" ) { 
    if (typeof e.data === "string") { 
    var message = JSON.parse(e.data);
    } else if (typeof e.data === "object") { 
    var message = e.data
    }
    if (typeof message === "object") { 
    if (message.subject == 'lti.frameResize') {
      var height = message.height;
      if (height <= 0) height = 1;
      document.getElementById('courseArcFrame').style.height = height + 'px';
    }
    if (message.subject == 'lti.scrollToTop') {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
    }
  }
});
</script>


Add this CSS to make the iFrame appear more seamlessly: 

<style type="text/css">
#courseArcFrame { border: 0; }
</style>