Add a cookie consent banner to a Laravel app

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

In short: paste the live snippet directly after the opening <head> of the Blade layout every page uses (in a fresh app that is resources/views/welcome.blade.php; in yours, the shared layout file), above the other lines in <head> (@fonts, @vite).

Confirmed on a Laravel app: the snippet is the first script in the rendered page's <head>.

You need #

Where it goes #

  1. Copy the live snippet (see above).

  2. Open the Blade file that renders <head> for your pages (your shared layout; in a fresh app the starter page resources/views/welcome.blade.php).

  3. Paste the snippet directly after <head>, before the <meta> tags, @fonts, @vite and your analytics:

    <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>
    
        <meta charset="utf-8">
        @fonts
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
    </head>
    
  4. Your trackers stay as they are. Keep the banner as plain tags in the layout, outside @vite and your JavaScript bundle.

If the snippet is currently at the end of <head> or before </body>, move it up to directly after <head>.

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 #

Build or render the site, then view the page source of the output (not the browser's Elements panel): the huOptions script and hu-banner.min.js are the first two <script> tags in <head> of the rendered page, 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 #