JavaScript

JavaScript snippets are designed for writing and running custom client-side code that enhances your site's behaviour and interactivity. Common applications include setting up analytics and event tracking, implementing cookie consent logic, adding custom form validation, building interactive UI elements, or running any JavaScript that needs to execute on page load. If you're writing the code yourself rather than loading it from an external source, this is your type.

How to Create a JavaScript Snippet

To learn how to add custom JavaScript in Joomla, follow the steps below:

1. Log in to your Joomla administrator
2. Go to Components → Tassos Code Snippets
3. Click New
4. Enter a descriptive Title (e.g. "Cookie Disclaimer")
5. Select Text as the Code Type.
6. Choose one of the following insertion locations
   • Site Header
   • Site Footer
   • Admin Header
   • Admin Footer
7. Write or paste your JavaScript into the code editor without including <script> tags. Your code is automatically wrapped in a <script> tag when injected at the chosen location.
8. 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.
9. Set Status to Published and click Save & Close.

Best Practices

Wait for DOM Ready

Always wait for the DOM to load before manipulating elements:

document.addEventListener('DOMContentLoaded', function() {
    // Your code here
});

Troubleshooting

Script Not Executing

1. Check browser console for errors (F12 → Console)
2. Verify snippet is Published
3. Ensure location is appropriate (Footer for DOM manipulation)
4. Check conditional logic settings
5. Verify no JavaScript conflicts with other scripts

Console Errors

• Check for syntax errors in your code
• Verify external dependencies are loaded
• Ensure selectors match actual elements on the page
• Check for conflicts with other scripts

Timing Issues

• Use DOMContentLoaded or place scripts in Footer
• For external dependencies, ensure they load first
• Use defer or async attributes when loading external scripts