Enhanced Iframe Embeds

Example


Overview

If you’re embedding Path in an external website, this enhanced method of embedding Iframes has some key improvements:

  • The Header and Footer of Path will automatically be hidden (useful if you’re also using Path standalone)
  • You can send users directly to a page within the Iframe without creating an extra page on your site
  • Native browser functions work (such as the back button and refresh button)
  • Share buttons (on Video Go videos) will link back to the parent website as opposed to standalone Path

Basic Usage

1.) Paste this snippet into into your website, updating each option at your discretion:

Typically this would go in the <head> section, but it may also work in the <body>

<script src="https://www.pathlms.com/path-embeds.js"></script>
<script>
  window.addEventListener('load', function () {
    window.pathEmbeds = new PathEmbeds({
      pathAccountSlug: 'Your account slug on PathLMS', //Required. http://pathlms.com/this-is-your-slug
      pathUrlParamName: "pathLMS page parameter name in your site's url", //Optional. Defaults to 'pathPage'
      hideIframeBorder: true, //Optional. Defaults to false
      iframeContainerId: 'unique id of your path iframe container DOM element', //Optional. Defaults to 'path-iframe-container'
      iframeBaseSrc: 'Default iframe src attribute (URL)', //Optional. String type. Defaults to '/library'
      loadingOverlayImgUrl: 'URL to some image for iframe loading overlay', //Optional.
      iframeWidth: 640,  //Optional. Number of pixels
      iframeHeight: 480, //Optional. Number of pixels
    });
  });
</script>

2.) Paste this snippet on your page where you want the iframe to appear

<div id='path-iframe-container'></div>

3.) Optional - If you need additional flexibility, such as enabling responsiveness for a mobile friendly site, you can manually add an Iframe element with the attributes you need. For example:

<div id='path-iframe-container'>
  <iframe allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" height="500" frameborder="0" style="border-width:0; width:100%;"></iframe>
</div>