Installation

Install SmartConsent in under two minutes. CDN script tag, React component, or Google Tag Manager — pick the path that matches your stack.

3 min read · 5 sections

Overview

SmartConsent is a single JavaScript bundle loaded from our CDN. There are three supported install paths: a plain script tag for static sites and most CMSes, an NPM package for React and Next.js apps, and a Google Tag Manager Custom HTML tag for teams that already manage scripts through GTM.

Option 1 — CDN script tag

The simplest way to install SmartConsent. Paste the snippet into the <head> of every page, before any other script. Works with WordPress, Shopify, Wix, Webflow, and plain HTML.

Paste into <head>, above any analytics or marketing script.

html
<!-- SmartConsent -->
<script>
  window.smartConsentConfig = {
    version: 1,
    webhookUrl: "https://your-api.example.com/consent"
  };
</script>
<script
  src="https://cdn.smartgenie.co.uk/smartconsent.min.js"
  defer
></script>

Option 2 — React / Next.js

The @smartgenie/smartconsent-react package wraps the core bundle in a drop-in component with full TypeScript types and SSR support. Render it once in your root layout.

bash
npm install @smartgenie/smartconsent-react

app/layout.tsx

tsx
import { SmartConsent } from "@smartgenie/smartconsent-react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <SmartConsent
          version={1}
          webhookUrl="https://your-api.example.com/consent"
        />
        {children}
      </body>
    </html>
  );
}

Option 3 — Google Tag Manager

If your team already uses GTM, create a single Custom HTML tag that fires on all pages with priority set above every analytics and marketing tag.

  1. In GTM, create a new Tag → Custom HTML.
  2. Paste the snippet below into the HTML field.
  3. Set the trigger to All Pages (Page View).
  4. Set Tag firing priority to 100 (or higher than all analytics tags).
  5. Publish the container.

GTM Custom HTML tag

html
<script>
  window.smartConsentConfig = {
    version: 1
  };
</script>
<script
  src="https://cdn.smartgenie.co.uk/smartconsent.min.js"
></script>

Verify your install

Open your site in an incognito window and open DevTools. You should see the SmartConsent banner within 500ms, and window.smartConsent should be defined in the console.

javascript
// In the browser console
window.smartConsent.version;    // "1.x.x"
window.smartConsent.state();    // { region: "EEA", regulation: "GDPR", consent: null }

Verify your installation

Run a free scan to confirm SmartConsent is gating scripts correctly, detecting your jurisdiction, and hitting a passing compliance score.

Run a free scan