> ## Documentation Index > Fetch the complete documentation index at: https://docs.cookiechimp.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # JS & Single Page Apps > Install a consent banner in JavaScript-powered SPAs like Astro, Vue, React Router, SvelteKit, and more. Single Page Applications (SPAs) update the URL and the visible page **without a full page reload**. Because of this, a script tag added to `` only runs once — on the first load — and the CookieChimp widget can be torn down or lost when the user navigates between routes. This page covers two things: 1. **How to load the CookieChimp script so it runs on every page**, framework by framework. 2. **How to position the Privacy Trigger** so the floating icon survives client-side navigation. We have dedicated guides for the most common frameworks — they're more detailed than this overview: [Next.js](/installation/nextjs) · [React (Vite/CRA)](/installation/react) · [Remix](/installation/remix) · [Nuxt](/installation/nuxt) · [Angular](/installation/angular) · [Astro](/installation/astro) · [SvelteKit](/installation/sveltekit). This page is the catch-all for any SPA that doesn't have its own guide. *** ## How do I install CookieChimp in an SPA? The pattern is the same across all SPA frameworks: 1. **Inject the script** into `` so it loads as early as possible — ideally before the framework hydrates. 2. **Re-initialize** the widget on every client-side route change by listening to the framework's navigation event. The exact navigation event differs per framework. Pick yours below. The reinit pattern is the same across frameworks: **remove the existing CookieChimp script tag (if any) and append a fresh one**. Loading the script again triggers CookieChimp to rescan the newly mounted DOM. There's no public `reinitialize()` API — script re-injection is the documented mechanism. ### Astro Astro's [View Transitions](https://docs.astro.build/en/guides/view-transitions/) emit an `astro:page-load` event after every navigation **including the first**, so this single handler covers both initial load and subsequent transitions — no separate static ` ``` **Not using View Transitions?** If you haven't enabled `` in your layout, Astro performs a full page reload on each navigation — the standard ` ``` ### Generic SPA (no router events) If your framework doesn't expose a router event you can hook into, listen for `history.pushState` and `popstate` — this fires on both programmatic navigation and back/forward: ```html theme={null} ``` *** ## How do I position the Privacy Trigger in an SPA? The Privacy Trigger is the floating icon users click to update their consent preferences. By default it's appended to ``, which is fine for traditional pages — but in an SPA, you usually want it in a **specific spot in your layout** and you want it to **survive route changes**. Place a `
` with the ID `cookiechimp-container` wherever you want the trigger rendered: ```html theme={null}
``` Put this in a part of your layout that **doesn't unmount on navigation** — typically the root layout, just inside ``. ### Persisting across view transitions Some frameworks tear down and recreate DOM nodes between routes, which would remove the Privacy Trigger. Use the framework's "persistent element" attribute to keep it: ```html theme={null}
``` See the Astro docs on [persisting components](https://docs.astro.build/en/guides/view-transitions/#maintaining-state) and the Turbo docs on [persisting elements across page loads](https://turbo.hotwired.dev/handbook/building#persisting-elements-across-page-loads). *** ## How do I run code based on consent? The `cc:onConsented` event fires once when the user has made an initial choice (and on subsequent page loads when consent is already stored). ```javascript theme={null} window.addEventListener("cc:onConsented", function (event) { if (CookieChimp.acceptedCategory("analytics")) { // "analytics" category enabled } if (CookieChimp.acceptedService("Google Analytics", "analytics")) { // "Google Analytics" service enabled } }); ``` The `cc:onUpdate` event fires when the user changes their consent from the preferences modal. ```javascript theme={null} window.addEventListener("cc:onUpdate", function (event) { var detail = event.detail; /** * detail.cookie * detail.changedCategories * detail.changedServices */ if (detail.changedCategories.includes("analytics")) { if (CookieChimp.acceptedCategory("analytics")) { // "analytics" category was just enabled } else { // "analytics" category was just disabled } if (detail.changedServices["analytics"].includes("Google Analytics")) { if (CookieChimp.acceptedService("Google Analytics", "analytics")) { // "Google Analytics" service was just enabled } else { // "Google Analytics" service was just disabled } } } }); ``` *** ## Troubleshooting * **Banner shows on first load but not after navigation** — your re-initialization listener isn't firing. Double-check the framework-specific event name (`astro:page-load`, `router.afterEach`, `useLocation`, `afterNavigate`). * **Privacy Trigger disappears after navigation** — add the framework's persistence attribute (`transition:persist`, `data-turbo-permanent`) to your `#cookiechimp-container` div.