--- title: Add a cookie consent banner to an Angular app description: Put the Cookie Compliance snippet first in the head of src/index.html as classic script tags, above your analytics tags, so the banner can hold them until the visitor chooses. kind: platform last_verified: 2026-10-22 --- # Add a cookie consent banner to an Angular app **In short:** paste the **live** snippet as the first classic ` ``` Prefer pasting the exact HTML from MCP/dashboard rather than retyping `huOptions` keys — the live snippet may carry Consent Mode defaults, `blockingEngine`, or custom providers. If the snippet is currently in the `scripts` array of `angular.json`, or added from a component, move it to the top of `` in `src/index.html`. ## 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 Run the browser checks 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) with `verify-install` (`skills/verify-install/SKILL.md`) against the running site. Test from a region your strictest rule covers (for example the EU), or confirm region rules are off. Angular-specific extra: | # | Check | Pass | |---|---|---| | A1 | View source (not devtools' rendered DOM) on `/` | `huOptions` and the `hu-banner.min.js` (or `/v2/…`) tag are the first `