Install the TermsBox cookie banner on a React app (Create React App or Vite)
This guide is for websites built with plain React using Create React App or Vite. If you use Next.js, follow the Next.js guide instead.
You do not need to write any React code. You add one line to a single HTML file.
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.
Where to put it (step by step)
React apps built with Create React App or Vite have one shared HTML file that every page uses. You add the script there once, and it works on every page of your site.
- In your project, open the
publicfolder. - Open the file named
index.html. - Find the
<head>section near the top of the file. 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.
Your public/index.html will look something like this:
<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>You only add this once. React apps load a single page and then change views as the visitor clicks around, without a full page reload. The banner loads one time and keeps working while visitors move between your views. You do not need to add it again for each route or page.
If you use Vite, the file is still index.html, but it may sit in the main project folder (the root) instead of a public folder. Open whichever index.html is the one with the <head> section, and paste the snippet before </head> in the same way.
Verify it works
- 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 at all: make sure the snippet is inside the
<head>ofpublic/index.htmland that you saved and redeployed. Confirm you edited the real HTML file your build uses, not a copy. - The banner appears but looks blank or does nothing: this usually means the site id is missing or empty. Double check that
data-site-idhas your real site id inside the quotes, with no typos. An empty or dropped site id makes the banner load in a broken default state without any error message. - 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 make sure that page includes 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.