Add a cookie consent banner to a Joomla site

Cookbook · platform Last verified View raw markdown (for agents)

In short: paste the live snippet in your template's index.php, inside <head>, above the <jdoc:include type="scripts" /> line (or directly after <head>).

Confirmed on a Joomla site: the snippet is the first script in the rendered page's <head>, on the home page and on an article page.

You need #

Where it goes #

  1. Copy the live snippet (see above).

  2. Open templates/<your_template>/index.php. Cassiopeia writes the page head through three includes (metas, styles, scripts); the scripts include carries Joomla's own scripts, core.min.js among them. Paste the snippet as the first script, directly after <head> or directly above the scripts include:

    <head>
        <!-- Cookie Compliance: first script on the page (paste live snippet here) -->
        <script>
            var huOptions = { "appID": "YOUR_APP_ID", "currentLanguage": "en", "blocking": true, "globalCookie": false };
        </script>
        <script src="https://cdn.hu-manity.co/v2/hu-banner.min.js" type="text/javascript" charset="utf-8"></script>
    
        <jdoc:include type="metas" />
        <jdoc:include type="styles" />
        <jdoc:include type="scripts" />
    </head>
    
  3. Save and reload. Your analytics tags stay as they are, below the snippet.

Without editing template files: a system plugin #

If you manage the site with a plugin, let a system plugin insert the snippet right after <head> in the finished page, in onAfterRender (subscribe to that event in the plugin's usual getSubscribedEvents()):

public function onAfterRender(): void
{
    $app = $this->getApplication();
    if (!$app->isClient('site')) {
        return;
    }
    $html = '<script>var huOptions = { "appID": "YOUR_APP_ID", "currentLanguage": "en", "blocking": true, "globalCookie": false };</script>'
          . '<script src="https://cdn.hu-manity.co/v2/hu-banner.min.js" type="text/javascript" charset="utf-8"></script>';
    $app->setBody(preg_replace('#<head>#', '<head>' . $html, $app->getBody(), 1));
}

addCustomTag() and the asset manager (registerAndUseScript()) place the banner after Joomla's own scripts; inserting in onAfterRender puts it first. A Custom HTML module is written in the page body (for example in the footer position); for the banner, use the template or the plugin.

What the order controls #

The banner holds recognised trackers that load after it until the visitor chooses, in regions whose rule requires consent first. A script placed above the snippet runs straight away, and a script you mark data-hu-category="1" is treated as essential. What runs before consent is your decision, so keep analytics and pixels below the snippet.

Confirm the result #

View the page source of your home page and of one article (not the browser's Elements panel): the huOptions script and hu-banner.min.js are the first two <script> tags in <head>, ahead of Joomla's joomla-script-options block and core.min.js, with no async or defer, and your analytics tag comes after them.

Then run the browser checks in plain-html in a private window (banner shows, no tracking cookies before the visitor chooses in a region whose rule requires consent first, trackers start after Allow) and, for the full procedure, verify-install. Test from a region your strictest rule covers (for example the EU), or confirm region rules are off.

Gotchas #

More help #