Cookie consent banner

An Overture consent banner asks your visitors which cookies they allow, keeps non-essential scripts off your pages until they agree, records each choice as proof of consent, and passes the choice to Google Consent Mode v2. It is set up in the Overture portal under Consent banners and works on every plan.

A banner counts as one form toward your plan. Each visitor's choices count as one submission per day: changing their mind later the same day isn't counted again.

Install

Add one script tag to the <head> of every page, before any Google tag or other script the banner should control:

<script src="https://script.app.overtureforms.com/contact-form.bundle.js"
        data-overture-consent="YOUR_TENANT_ID/YOUR_BANNER"
        data-overture-gcm></script>

The portal's Install tab shows this tag with your values filled in.

• Don't add async or defer. The banner has to run first so it can set Google's consent defaults and hold back other scripts.
• data-overture-gcm sends Google Consent Mode defaults immediately. Leave it out if your site doesn't use Google tags.
• data-overture-cookie-domain="example.com" shares one choice across your subdomains (www.example.com, shop.example.com).
• If your site uses a Content Security Policy, add a nonce attribute to the tag; the banner passes it to the scripts it adds.

Published changes reach your site within 5 minutes.

Starting it yourself

If you'd rather start the banner from your own code, load the bundle and call initConsent:

<script src="https://script.app.overtureforms.com/contact-form.bundle.js"></script>
<script>
  OvertureForms.initConsent({
    tenantId: "YOUR_TENANT_ID",
    banner: "YOUR_BANNER",
    googleConsentMode: true
  });
</script>

The banner runs once per page: loading the bundle again, or calling initConsent again, returns the banner that's already running.

What visitors see

On their first visit, visitors see the banner with Reject all, Customize and Accept all. Reject all and Accept all look exactly alike, so neither is pushed. Customize opens the preferences, where each optional category has its own switch, a description, and a list of the cookies it sets. The Necessary category is always on.

After a choice, the banner remembers it (for 180 days by default; you can set up to 395) and shows a small Cookie settings button so visitors can change their mind at any time. Visitors are asked again when the remembered choice expires, or when you publish with Ask visitors who already chose to choose again (do that when you add cookies or uses they haven't agreed to).

You can put your own "Cookie settings" link anywhere, for example in your footer:

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

Keeping scripts off until consent

There are three ways to hold something back until its category is allowed.

1. Scripts in the portal. Add them on the banner's Scripts tab, either by URL (https:// only) or as inline code. The banner adds each one to the page once its category is allowed.

2. Scripts in your own HTML. Change the script's type to text/plain and add data-overture-consent with the category key. The browser ignores it until the banner turns it back into a real script:

<!-- Before -->
<script src="https://example.com/analytics.js"></script>

<!-- After: held until "analytics" is allowed -->
<script type="text/plain" data-overture-consent="analytics"
        src="https://example.com/analytics.js"></script>

<!-- Inline scripts work the same way -->
<script type="text/plain" data-overture-consent="marketing">
  fbq("init", "1234567890");
</script>

List several categories, separated by spaces, when a script needs all of them: data-overture-consent="analytics marketing". A script that needs another type (such as module) keeps it in data-overture-type="module".

3. Embeds. For iframes, images and other embeds (videos, maps, social widgets), move src to data-src:

<iframe data-overture-consent="marketing"
        data-src="https://www.youtube.com/embed/VIDEO_ID"
        title="Product video"></iframe>

Elements your framework adds to the page later are handled too.

When consent is withdrawn

Scripts that already ran can't be unloaded. When a visitor turns a category off, the banner deletes the cookies you listed for that category (the ones your pages can read) and, unless you turn it off, reloads the page so it starts without those scripts.

JavaScript API

const consent = OvertureForms.consent; // the running banner, if any

consent.get();               // { decided, consentId, granted: [...], denied: [...], revision }
consent.has("analytics");    // true or false
consent.acceptAll();
consent.rejectAll();
consent.set({ analytics: true, marketing: false }); // others are refused
consent.showPreferences();
await consent.ready;         // once the banner's settings have loaded

Events

The banner dispatches events on document:

document.addEventListener("overture-consent:change", (event) => {
  if (event.detail.granted.includes("analytics")) startMyAnalytics();
});

The cookie it sets

The banner stores the visitor's choice in one first-party cookie, overture_consent, for the lifetime you choose. It holds the consent ID, the categories allowed, and when the choice was made. It counts as strictly necessary (it remembers the answer to the banner itself) and is listed under the Necessary category.

Recorded choices

Each choice is sent to Overture in the background and kept as proof of consent, with:

• the consent ID (also in the visitor's cookie, so you can find their record),
• what they chose and when,
• the banner version and revision they saw,
• the page (address and path only, never the query string),
• a shortened IP address (the last part removed) and the browser's user agent.

Recording never delays the page or Google's consent update. If it fails, the visitor's choice still takes effect.

You can see recent choices on the banner's Consent log and export them all as CSV. On the Business and Unlimited plans you can also receive each choice as it happens with a webhook (consent.recorded), and on Unlimited read them with the REST API.

Accessibility

The banner is built to WCAG 2.1 AA:

• Bars and boxes are labelled page regions that don't trap the visitor. They come first in the keyboard order. The centered layout is a modal dialog that takes focus.
• The preferences window is a modal dialog: focus moves into it, Tab stays inside, Escape closes it, and focus goes back to the button that opened it.
• Each category is a labelled switch with its description; buttons are at least 44 pixels tall.
• A screen-reader announcement confirms a saved choice.
• It follows the visitor's text size, reduced-motion and high-contrast settings, and right-to-left pages.
• The portal won't publish colors with less than 4.5:1 contrast.

The banner sits in its own shadow DOM, so your site's CSS doesn't affect it. Use the banner's Appearance tab (colors, corners, font, custom CSS) to style it. Its class names start with .ov-.