Cookie Consent on Your Own Terms: An Elementor Pro Build for UK Client Sites

UK cookie consent has a reputation for being a plugin problem. It is not. On plenty of client sites, the job is narrow: tell visitors what is running, ask before non-essential scripts fire, make refusing as easy as accepting, and keep a record you can retrieve. Elementor Pro gives you the popup and form plumbing. A small, well-commented snippet handles the consent state. This tutorial is for UK builders who want that control without adding another dashboard to maintain. It is not legal advice; if a client runs complex ad tech, special category data, or a membership stack, get the privacy policy and consent flow reviewed properly.

What PECR and UK GDPR actually require

The ICO's position is straightforward: non-essential cookies and similar technologies need consent before they are set. Consent must be a clear affirmative action, specific, informed, and easy to withdraw. Pre-ticked boxes and implied consent do not cut it. Analytics cookies are not automatically exempt just because they are for stats. If you use them, get consent unless you have had a proper exemption assessment. Essential cookies, such as basket or security cookies, can run without consent. You also need to record consent: who agreed, when, what they were told, and which version of your banner they saw. Keep that record no longer than necessary. Under UK GDPR, consent records form part of accountability.

The build at a glance

Create a Popup called Cookie consent. Use a bottom bar, no full-screen overlay, and keep it keyboard accessible. Add a Text Editor with short copy and links to the cookie policy and privacy notice. Add two Button widgets: Accept all and Essential only. Add a third link: Cookie settings. Use an Elementor Pro Form as the logger, not the visible UI: hidden fields for consent version, categories, timestamp and page URL, plus a Webhook action to your endpoint. Trigger it in JavaScript after a choice. Do not load Google Analytics, Google Ads, Meta Pixel, Hotjar or any other non-essential script until consent is granted. That means removing hard-coded tags from the theme and header plugin, and loading them conditionally or via Google Tag Manager with Consent Mode defaults set to denied.

One warning: Elementor popups can set their own display or frequency cookies. Test what the popup does. If a cookie appears, either treat it as essential to the consent interface or avoid frequency settings that create it. The consent banner should not be the thing that breaks the consent rule.

Set Consent Mode defaults before tags

Put this before Google Tag Manager or gtag loads. Consent Mode v2 has been the baseline for Google ads personalisation in the UK since 2024, and it expects ad_user_data and ad_personalization as well as ad_storage and analytics_storage.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  analytics_storage: 'denied',
  wait_for_update: 500
});

In Google Tag Manager, the same defaults need to fire before any measurement or ads tags. Do not rely on the banner click to set the first state. Denied is the starting point; granted is the update.

Wire up the buttons

Give the accept and reject buttons IDs, then use a snippet like this in an HTML widget or a small site-specific plugin. Replace the popup ID and the logging endpoint with the client's values.

const CONSENT_VERSION = '2026-11-01';
const COOKIE_NAME = 'uk_consent';
const POPUP_ID = 123;

function writeConsent(categories) {
  const record = {
    version: CONSENT_VERSION,
    categories: categories,
    timestamp: new Date().toISOString(),
    page: location.pathname
  };
  document.cookie = COOKIE_NAME + '=' + encodeURIComponent(JSON.stringify(record)) + '; path=/; max-age=15552000; SameSite=Lax';
  if (typeof gtag === 'function') {
    gtag('consent', 'update', {
      ad_storage: categories.marketing ? 'granted' : 'denied',
      ad_user_data: categories.marketing ? 'granted' : 'denied',
      ad_personalization: categories.marketing ? 'granted' : 'denied',
      analytics_storage: categories.analytics ? 'granted' : 'denied'
    });
  }
  logConsent(record);
  elementorProFrontend.modules.popup.closePopup({ id: POPUP_ID });
}

function logConsent(record) {
  const body = new URLSearchParams({
    consent_version: record.version,
    categories: JSON.stringify(record.categories),
    timestamp: record.timestamp,
    page: record.page
  });
  navigator.sendBeacon('/wp-json/your-consent-endpoint/v1/log', body);
}

document.querySelector('#accept-all').addEventListener('click', function () {
  writeConsent({ analytics: true, marketing: true });
});

document.querySelector('#essential-only').addEventListener('click', function () {
  writeConsent({ analytics: false, marketing: false });
});

If you prefer Elementor Forms, point logConsent at the form's webhook URL and map the fields to hidden fields, or post to a small custom REST endpoint that writes to a private custom table. Do not store raw IP addresses in the consent record unless there is a real need. Timestamp, categories, version and page are usually enough for accountability. Set a retention period and stick to it.

Reopening the banner and withdrawing consent

Withdrawal must be as easy as giving consent. Add a Cookie settings link in the footer. If the saved consent cookie is missing, show the popup. If it exists, apply the saved categories to Consent Mode on page load. The footer link should clear the visible state and reopen the same popup, not send visitors to a help article. Keep the wording plain: Accept all, Essential only, Cookie settings. Avoid dark patterns such as a bright accept button and a grey reject link.

Testing checklist before handover

• Clear cookies and load the site in a private window. In DevTools Network, filter for analytics, doubleclick and facebook. Nothing non-essential should fire before a choice.
• Click Accept all. Confirm the consent cookie is written, Consent Mode updates in the Tag Assistant debug view, and analytics requests appear after reload.
• Click Essential only. Confirm non-essential requests stay absent, including after a reload.
• Reopen Cookie settings and withdraw. Confirm the update to denied and that the cookie record reflects the change.
• Tab through the banner on desktop and mobile. Buttons need visible focus states and sensible order.
• Check the cookie policy matches the cookies actually set. A policy that lists cookies the site no longer uses is a small but real accountability problem.
• Keep a test record: banner version, date, who tested, and screenshots of the Network panel before and after consent.

If the client uses Google Ads, test Consent Mode v2 in Google Tag Assistant rather than trusting the visual banner alone. If the site has a cookie banner from a previous agency, audit what it actually blocks. Many banners look compliant and still let Meta Pixel fire on first paint.