Sitebase
All articles

How to add a cookie banner to your website

Flavio Copes ·

Install the snippet, mark analytics and marketing scripts so they wait, then confirm Reject keeps those tags off

You decided the site needs a consent prompt. Google Analytics or an ads tag is already on the page.

A banner that only says Accept does not fix that. The optional scripts have to stay inert until someone chooses.

Sitebase’s Cookie banner is that prompt and the gate. You paste one snippet and mark the optional tags. Accept or Reject then decides what runs.

If you are still deciding whether you need one, start with Do you need a cookie banner on a small website?.

Sitebase is in private beta. Public signup isn’t open. These steps are for accounts with access.

Add your website in Sitebase. On the Features to start with step, select Cookie banner. If the site already exists, use + Add more.

A site has one Cookie banner. Open it. Until someone makes a choice, Setup is the default tab.

Put the snippet on every page

Copy the snippet from Setup. Put it in the shared layout, ideally in <head>. The banner needs to load on every public page, not only the homepage.

<script
  async
  crossorigin="anonymous"
  src="https://sitebase.dev/embed.js"
  data-sitebase-widget="YOUR_BANNER_KEY"
></script>

Replace YOUR_BANNER_KEY with the key from the dashboard, or paste the complete snippet Sitebase gives you. In an Astro layout, add is:inline so the script stays intact.

This feature is script-only. An iframe cannot set a cookie for your domain or control scripts on the host page. There is no hosted embed URL here. That matters on Notion, Wix, or Squarespace when the editor strips scripts.

Gate the optional scripts

The banner does not rewrite tags you forgot. Only scripts you mark wait for consent.

Change each optional tag to type="text/plain" and add data-sb-consent. Use analytics or marketing.

<script
  type="text/plain"
  data-sb-consent="analytics"
  src="https://www.googletagmanager.com/gtag/js?id=G-4N8K2P1H7Q"
></script>

type="text/plain" stops the browser from running the tag. After someone accepts analytics, the runtime inserts a real script. A Meta or ads pixel uses data-sb-consent="marketing" the same way.

Scripts without that attribute keep running. Sitebase analytics is cookieless. Leave that tracker alone.

Set the copy and who sees it

Open Config. Saving updates the live banner.

The defaults already have equal Accept all and Reject all buttons, plus Preferences. Preferences start off. Necessary stays on and locked.

Keep those two primary buttons visible. Change the Message if you want. The default talks about analyzing traffic and improving the site.

Position is Bottom bar or Corner card. Consent expiry (days) is 30 to 365. The default is 180. After that, the banner asks again.

Leave Who sees the banner on All visitors (default, safest) unless you have a reason. The other option is Only where consent is required (EU/EEA, UK, Switzerland). Outside those countries the banner does not appear and gated scripts run. If the country is missing, the banner still shows.

If you run Google Analytics or Google Ads, turn on Google Consent Mode v2. The runtime sends denied defaults, then updates them with the visitor’s choice. Analytics maps to analytics_storage. Marketing maps to ad_storage, ad_user_data, and ad_personalization.

Leave Floating “Cookie preferences” badge on. After a choice, a small control stays on the page so people can change their mind. If you turn it off, add this to your footer:

<a href="javascript:sitebaseConsent.open()">Cookie preferences</a>

A banner without a policy leaves people guessing. Set Cookie policy link and Policy link label.

The URL must start with https://, or it can be a relative path like /cookie-policy.

If the site also has Privacy & legal pages, Config suggests the hosted cookie policy:

https://sitebase.dev/embed/YOUR_LEGAL_KEY?variant=cookie_policy

Review that page before you publish it. See the legal pages documentation for how those pages go live.

Check Accept and Reject

Open the published URL in a fresh window. The preview in Setup is for layout. The live page is the test.

Reject everything. Confirm the Google tag does not load. Accept analytics only. If you also gated a marketing tag, confirm it stays off. Change the choice from the badge and watch the scripts follow.

The first choice lands in the register. After that, Data is the default tab.

You get a Consent choices chart for the last 30 days and a Consent register. Each row shows When, Choice, Categories, Consent ID, and Version. The labels are Accepted all, Rejected all, Custom choice, and Withdrew consent. There is no IP and no browser string. The register stays as long as the feature exists. Download full register (CSV) exports the full list.

The choice also lives in a first-party cookie named sb_consent on your domain. It holds a random ID, the granted categories, and the consent version.

If you add a pixel later, tag it, update the policy, then click Ask all visitors again. Stored choices expire. The banner comes back on the next visit.

You can read the current choice from your own code:

const choice = sitebaseConsent.get()

Before anyone clicks, that is null. After a choice it has the granted categories, the consent ID, and the version. sitebaseConsent.onChange runs after every new choice. The page also fires a sitebase:consent event.

For the full attribute list, see the cookie banner documentation. For the “do I need this” question, see the cookie banner decision.