Your own tags: mark scripts and iframes for consent

Use this when the code of a tool has to stay in your HTML.

Mark a script

Change the type to text/plain and add data-category. The browser does not run the script. The banner runs it after the visitor allows the category. The other attributes of the tag are kept.

Before:

<script src="https://example.com/tracker.js"></script>

After:

<script type="text/plain" data-category="analytics" src="https://example.com/tracker.js"></script>

Inline scripts work the same way. The categories are preferences, analytics and marketing.

Mark an iframe

Move the address from src to data-src and add data-category:

<iframe data-category="marketing" data-src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

The iframe stays empty until the visitor allows the category. An iframe needs both attributes, data-category and data-src.

Tags that you add to the page later, from your own JavaScript, are picked up too.

Open the settings from your own link

Any element with data-fewbase-consent="open" opens the cookie settings:

<a href="#" data-fewbase-consent="open">Cookie settings</a>

Add such a link to your footer if you switch off the round button.

Read the choice from JavaScript

The banner adds window.fewbaseConsent. It exists after the Consent script has run, so put your own code below the line of code.

Call	What it does
`fewbaseConsent.accepted("analytics")`	`true` if the visitor allowed the category, `false` if not or before a choice
`fewbaseConsent.get()`	The current choice, or `null` before a choice
`fewbaseConsent.open()`	Opens the cookie settings
`fewbaseConsent.on("change", fn)`	Calls `fn` after each choice made on the page

get() returns an object with three fields: id (the record ID), categories (a number: 1 for Preferences, 2 for Analytics and 4 for Marketing, added together) and at (the time of the choice in Unix seconds). Necessary is always on and is not part of the number.

fn receives the same object. It is not called when the page loads with a saved choice, so check accepted() once at the start as well.

<script>
  function startIfAllowed() {
    if (fewbaseConsent.accepted("analytics")) startMyAnalytics();
  }
  startIfAllowed();
  fewbaseConsent.on("change", startIfAllowed);
</script>