Enable HTML External Links

Article Overview

If you are using HTML screens in your lessons, you can choose which external, embedded links you want to enable for use during Skyllful lesson consumption.  

Process Overview

To enable a link that exists inside of your html, you will add an attribute to the link in the code.  You do not need code writing skills to complete this process.  The majority of the work will be accomplished via scripting that takes place automatically within the Skyllful platform once you've added the attribute.  This is to ensure non-coding professionals can perform this task.

Step-by-Step Tutorial

1.  Before pulling html screens into Skyllful, edit the links you want enabled

• To do this, open your html code and locate the link, or the element that is functioning as a link.  
• Links can be quickly located using a browser's inspect feature, then using your html editor to make changes to your file.

• NOTE:  Only the links you tag with the added attribute will be accessible to the learner during training.  This gives you full control over the learning environment and prevents the learner from accessing content you would rather they avoid during training.

2.  Add the necessary attribute to your code  

• If your linked element contains 'href'
  • i.e.:  <a href="https://skyllful.com">Link name as it appears to the viewer</a>
  • You will double click href
    • <a href="https://skyllful.com">Link</a>
  • And replace it with data-skyllful-external-link
    • It will now appear:  <a data-skyllful-external-link="https://skyllful.com">Link</a>
• If your linked element does NOT contain 'href'
  • You will locate the element that is functioning as a link (a button, div, etc.)
  • And add the attribute data-skyllful-external-link="yourlinkgoeshere" to the inline element code

3.  Save your html file

4.  Import your file to Skyllful