Install the TermsBox cookie banner on Vue, Angular, or Svelte / SvelteKit
This guide is for websites built with Vue, Angular, or Svelte and SvelteKit. Each of these has one shared HTML file that every page uses. You add the banner script there once, and it works across your whole site.
You do not need to write any Vue, Angular, or Svelte code. You add one line to a single HTML file. Find your framework below.
What you need
- Your TermsBox site id (also called your site key). It looks like a short random string of letters and numbers.
- Where to find it: log in to TermsBox, then go to Dashboard, open Consent Banner, and click the Install tab. Your site id is already filled into the ready-to-copy script there. You can copy the whole snippet from that page. The same snippet also appears during first-time setup, on the Getting Started card on your dashboard home, and on the success page right after checkout.
Note: the site id is not shown on its own anywhere. It is always inside the copyable script tag. It is not listed under Settings, so do not look there.
The snippet to copy
<script src="https://termsbox.com/cmp/termsbox-cmp.js" data-site-id="YOUR_SITE_KEY" data-auto-block="on"></script>Replace YOUR_SITE_KEY with your real site id from the dashboard. The easiest and safest way is to copy the whole snippet from the Install tab, because your site id is already filled in for you.
Do not add async or defer to this tag. The banner must load in order, before your other scripts, so it can block trackers until the visitor makes a choice. Adding async or defer will break it.
In all three frameworks below, you paste this snippet just before the closing </head> tag of the shared HTML file, then save and redeploy.
Vue
Vue projects have one main HTML file used by the whole app.
- In your project, open the
index.htmlfile. In most Vue projects it sits in the main project folder (the root). In some older projects it is inside apublicfolder. - Find the
<head>section near the top. It starts with<head>and ends with</head>. - Paste the snippet just before the closing
</head>tag. - Replace
YOUR_SITE_KEYwith your site id if you have not already copied the pre-filled version. - Save the file.
Example:
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<script src="https://termsbox.com/cmp/termsbox-cmp.js" data-site-id="YOUR_SITE_KEY" data-auto-block="on"></script>
</head>Angular
Angular projects have one main HTML file in the source folder.
- In your project, open the
srcfolder. - Open the file named
index.html. - Find the
<head>section near the top. It starts with<head>and ends with</head>. - Paste the snippet just before the closing
</head>tag. - Replace
YOUR_SITE_KEYwith your site id if you have not already copied the pre-filled version. - Save the file.
Example:
<head>
<meta charset="utf-8" />
<title>My Website</title>
<base href="/" />
<script src="https://termsbox.com/cmp/termsbox-cmp.js" data-site-id="YOUR_SITE_KEY" data-auto-block="on"></script>
</head>Svelte and SvelteKit
SvelteKit projects have a shared HTML template named app.html.
- In your project, open the
srcfolder. - Open the file named
app.html. - Find the
<head>section near the top. It starts with<head>and ends with</head>. You will also see placeholders like%sveltekit.head%. Leave those exactly as they are. - Paste the snippet just before the closing
</head>tag, after the%sveltekit.head%line. - Replace
YOUR_SITE_KEYwith your site id if you have not already copied the pre-filled version. - Save the file.
Example:
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<script src="https://termsbox.com/cmp/termsbox-cmp.js" data-site-id="YOUR_SITE_KEY" data-auto-block="on"></script>
</head>If you use plain Svelte without SvelteKit, your shared HTML file is usually index.html in the main project folder or a public folder. Paste the snippet before </head> there in the same way.
Verify it works (all frameworks)
- Deploy or restart your site so your change is live.
- Open your website in a browser and do a hard refresh (hold Shift and click reload, or use a private or incognito window so nothing is cached).
- Look for the cookie banner to appear. If it shows up, the script is loading.
- Go back to TermsBox, open Dashboard, then Consent Banner, then the Install tab, and click the Verify Installation button. TermsBox will visit your site and check that the script is present. When it finds it, the status changes to verified.
The Verify Installation button is the only thing that marks your site as verified. Just loading the banner on your site does not flip the status by itself, so click the button after you install.
Troubleshooting
- The banner does not appear: make sure the snippet is inside the
<head>of the correct shared HTML file (index.htmlfor Vue,src/index.htmlfor Angular,src/app.htmlfor SvelteKit), and that you saved and redeployed. - The banner appears but looks blank or does nothing: this usually means the site id is missing or empty. Confirm that
data-site-idholds your real site id, with no typos. An empty or dropped site id makes the banner load in a broken default state without any error message. - SvelteKit only: make sure you did not remove or overwrite the
%sveltekit.head%placeholder. Add the banner script near it, not in place of it. - Verify Installation says it cannot find the script: confirm your change is actually live on the public web address stored in TermsBox, then hard refresh and try again. The verifier checks your main site address, so that page must include the script.
- Verify Installation says it could not reach your site: if your site is password protected, not yet published, or protected by strong bot or firewall rules, the checker may be blocked. Make sure the page is publicly reachable, then try again.
- You added
asyncordefer: remove them. The tag must stay exactly as shown so it can run before your other scripts.