JavaScript External Files

JS External File snippets load JavaScript libraries or scripts from a remote URL, with support for defer and async loading attributes. This type is best when you need to include a third-party library from a CDN — such as jQuery, a jQuery plugin, a charting library, a heatmap tool, or any hosted script — without embedding the code directly into your snippet.

How to Create a JavaScript External Files Snippet

To learn how to load external JavaScript files in Joomla, follow the steps below:

1. Log into your Joomla administrator
2. Go to Components → Tassos Code Snippets
3. Click New
4. Enter a descriptive Title (e.g. "Load jQuery from CDN")
5. Select JavaScript External File as the Code Type.
6. Choose one of the following insertion locations
   • Site Header
   • Site Footer
   • Admin Header
   • Admin Footer
7. Enter the URL or relative paths of the JavaScript files you want to load, one per line. Do not write any JavaScript or HTML in the editor, only plain URLs. The extension will create a <script> tag for each URL and inject it at the chosen location.
   • To load an external file, start with https:// or http:// (e.g. https://cdn.example.com/library.js)
   • To load local files on your server, write the path without a leading slash (e.g. templates/mytemplate/js/library.js)
8. In the Script Loading option select how the scripts should be loaded.
   • Defer delays execution until the page is parsed.
   • Async loads the script asynchronously.
9. Open the Conditional Logic tab to restrict which pages or users the snippet runs on. Leave it empty to run it site-wide. Learn more in Using Snippet Logic.
10. Set Status to Published and click Save & Close.

Troubleshooting

Script Not Loading

1. Check URL: Verify the URL is correct and accessible
2. Check HTTPS: Ensure using HTTPS, not HTTP
3. Check console: Look for errors in browser console (F12)
4. CORS issues: Some scripts require crossorigin attribute
5. CDN availability: Verify CDN is operational

Script Loading But Not Working

1. Load order: Ensure dependencies load first (check priorities)
2. Timing: Script may need defer or different location
3. Conflicts: Check for JavaScript conflicts in console
4. Initialization: Some libraries require initialization code

Slow Page Load

1. Defer loading: Use defer or async attributes
2. Location: Move scripts to Footer
3. Minimize requests: Reduce number of external files
4. Use faster CDN: Switch to more reliable CDN