Tiny Consent - For Webflow

Scan the site

Paste the live site address. The scan reads sitemap.xml, then the HTML of each page, and adds every recognized tracker to the head snippet in the next step. On the published site those services show up in the preferences panel on every page, including pages that do not contain the tag.

When a page loads Google Tag Manager, the scan reads that container and includes the tags configured there. A pixel that some other script injects only after the page runs is still invisible here. Add its id to data-tc-vendors on the head snippet, or tag it in step 3.

Add the head code

The scan writes recognized services into this snippet. Copy it and paste it as the first thing in Head code, above every analytics or pixel snippet, with no async or defer.

Use site-level head code, not page settings, so the script runs on every page. Tags added under Apps & Integrations (the Google Analytics and Facebook Pixel fields) load before custom code and cannot be blocked; paste those snippets into Head code instead.

Rules by region: how geolocation works

With data-tc-geo the script starts strict on every page view (nothing optional runs, no banner), finds out where the visitor is, then applies the rule for that region. A choice the visitor already made always wins; if the region cannot be determined the visitor gets the opt-in banner.

opt-in (EU/EEA, UK, Switzerland, Brazil, Quebec): trackers wait, the banner asks.
opt-out (California and the other US states with a privacy law): trackers run, the banner is a notice with Do not sell or share. A Global Privacy Control signal turns marketing off regardless.
none (everywhere else): no banner; the Preferences button stays so anyone can still opt out.

Override the table with data-tc-regions, most specific key wins: data-tc-regions="eu:opt-in, gb:opt-in, us-ca:opt-out, *:opt-in" asks everyone outside the listed regions too. Keys are country codes (de), country-region (us-ca, ca-qc), the group eu, or *.

auto asks geojs.io for the visitor's country and region (one request per session, no cookies, result kept in sessionStorage) and falls back to the browser timezone when that fails. Mention the lookup in your privacy policy, or point data-tc-geo-url at your own endpoint. timezone makes no request at all but only knows continents: European zones get the GDPR banner, US zones the opt-out notice.

Test a region with data-tc-region="us-ca" on the script tag or TinyConsent.setRegion('de') in the console. Copy the component after you pick the rules: opt-in pastes the GDPR text and buttons, opt-out pastes the CCPA notice, and By region pastes both so the script can switch.

This snippet uses @1, so minor and patch updates are included. Use @main when a site should follow the latest build.

Tag your trackers

Four categories: essential, analytics, marketing, and personalization. Essential always runs. For every other tracker, change three things in its snippet:

Set type="text/plain" so the browser does not run it.
Rename src to data-tc-src.
Add data-tc-category="analytics" (or the category it belongs to).

<script type="text/plain" data-tc-src="https://www.googletagmanager.com/gtag/js?id=G-XXXX" data-tc-category="analytics"></script>
<script type="text/plain" data-tc-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXX');
</script>

Embeds

YouTube, Vimeo, and Google Maps go in a Code Embed element with data-tc-src instead of src. An optional placeholder with the same category disappears once it is allowed.

<div data-tc-element="placeholder" data-tc-category="marketing">
  This video loads after you allow marketing cookies.
  <a href="#" data-tc-element="open-preferences">Cookie settings</a>
</div>
<iframe data-tc-src="https://www.youtube-nocookie.com/embed/VIDEO_ID" data-tc-category="marketing" allowfullscreen></iframe>

Remove <noscript> fallbacks from tracker snippets. They fire without consent.

Good to know: untagged scripts, multiple categories

Scripts from known tracker hosts (Google Analytics, GTM, Meta, Hotjar, LinkedIn, TikTok, HubSpot, YouTube, Intercom, and more) are blocked even when untagged, including ones injected later by other scripts. A tag that lists two categories (data-tc-category="analytics, marketing") runs only when both are allowed.

Paste the component into the Designer

One click puts the banner, the preferences panel, and the small Preferences button on your clipboard in Webflow's own format: native elements, classes with the default theme, and every data-tc attribute already set. Everything except three small icons is editable in the Style panel.

Preparing the payload…

Then, in the Designer

Select the footer (or any component that is already on every page) and edit it so the paste lands inside.
Press Cmd+V (Ctrl+V on Windows). A tc-root div appears with the banner (bottom-right), the preferences panel, and the Preferences button (bottom-left).
Select tc-banner, tc-dialog, tc-button, and tc-float and swap the flat colors and fonts for your site's variables. Names, copy, and layout are free.

States and visibility while you work

Each optional category has a switch: a checkbox field (tc-switch) with an invisible input over a track and a knob. The script adds the combo class is-on to the switch and its children while the category is allowed, and is-open to an accordion, its toggles, and the chevron icon while it is open. Both combos arrive with the paste (the Analytics switch is on and the Essential row is open), so style the on and open states there.
The pasted styles hide the preferences panel and the Preferences button, so a published page shows the banner. Opt-in is the head snippet's default (data-tc-mode="opt-in"): the script shows that banner on the first visit and the button only after a choice. Leave the banner's display alone. To style the panel or the button, set Display to Flex, then set it back to None before publishing. Accordion bodies are visible in the Designer and start closed on the published site.

How the vendor list is built

Each category row is an accordion. Clicking the title or chevron opens the vendor list; each vendor opens its cookie table (name, purpose, duration).
The list is generated: on the published site the script scans the page for tracker scripts and embeds, matches them against a built-in registry (Google Analytics, Tag Manager, Meta Pixel, Google Ads, LinkedIn, TikTok, HubSpot, Hotjar, Clarity, YouTube, Vimeo, Intercom, and the rest of the block list) and clones the sample tc-vendor block once per match. Style the sample freely, but keep its data-tc-vendor and data-tc-field attributes. The tc-row_empty paragraph shows when nothing was found for a category.
Need a vendor the registry does not know, or a tag that fires server-side? Add it in Head code with window.TinyConsentVendors = [{ id, name, category, privacy, hosts, cookies }], or force a known one with data-tc-vendors="meta-pixel" on the script tag. A hand-written block with its own data-tc-vendor="some-id" is kept as it is.

What the attributes do (keep these)

Attribute	Where	Purpose
`data-tc="root"`	wrapper div	Everything must stay inside it.
`data-tc="banner"`	banner div	Shown on first visit.
`data-tc="preferences"`	panel div	Category panel. Hidden until opened.
`data-tc="float"`	small button	Persistent "Preferences" button. Shown after a choice, hidden while the banner or panel is open.
`data-tc-action="accept-all"`	button	Allow every category.
`data-tc-action="reject-all"`	button	Deny every optional category.
`data-tc-action="open-preferences"`	button	Open the panel.
`data-tc-action="save"`	button	Store the switch selection.
`data-tc-action="close"`	button, backdrop	Close the panel.
`data-tc-action="toggle"`	chevron button, row title, vendor head	Opens and closes the accordion it sits in. An accordion can have several toggles; all of them reflect the state. A link inside a toggle (the privacy policy) still navigates. The chevron button covers keyboard users, so the title is a plain div; a lone div toggle needs `role="button"` and `tabindex="0"`.
`data-tc-category="…"`	row div around each switch	Which category the checkbox inside controls. The visible title is yours to change. The Essential row has no switch, only a badge.
`data-tc-element="switch"`	checkbox field	Gets the combo class `is-on` (together with its input, label, and knob) while the category is allowed.
`data-tc-element="accordion"`	row div, vendor div	A collapsible box. The script sets `data-tc-open` and the combo class `is-open` on it.
`data-tc-element="details"`	div inside an accordion	Hidden while the accordion is closed.
`data-tc-element="chevron"`	icon inside the toggle	Gets `is-open` and rotates 180° while its accordion is open.
`data-tc-vendor="sample"`	vendor div inside the row details	Template for the generated vendor cards; removed on the published site. Any other value marks a hand-written card that stays.
`data-tc-field="…"`	inside the vendor template	`vendor-name`, `vendor-privacy` (link), `cookie` (repeated per cookie), `cookie-name`, `cookie-purpose`, `cookie-duration`; `empty` on the per-row message.
`data-tc-variant="…"`	banner text, buttons, anything	Marks copy for one rule: `opt-in`, `opt-out`, or `none`. The paste keeps only the rules you selected, so an opt-in component has the GDPR text, Reject all, and Accept all, and an opt-out component has the CCPA text, Do not sell or share, and OK. By region keeps every version.

If the paste does nothing

Webflow reads a specific clipboard format and changes it from time to time. Copy as HTML embed is the fallback: paste it into a Code Embed element. It works immediately, but the result is not styleable in the Designer.

Add a "Cookie settings" link

Visitors must be able to change their mind from any page. The component's Preferences button already covers that. If you would rather have a plain footer link (or both), add a text link and give it one custom attribute:

data-tc-element = open-preferences

Publish and test

Publish to staging first and walk through this list in a private window with DevTools open.

The banner shows and the Network tab lists no tracker requests.
After Accept all, trackers load, a tc_consent cookie exists, and the Preferences button appears bottom-left.
Reload: no banner, trackers load straight away, Preferences button still there.
Open preferences from that button, expand a row and a vendor, then Reject all: the tracker cookies (_ga, _fbp, …) disappear from Application → Cookies and the page reloads with everything blocked.
On a phone-sized viewport the banner spans the width and the buttons stack.

Cookie consent for Webflow sites you build.

We use cookies