SDKWatch/Docs
DashboardSign In

Consent Banner

One script tag. Fully configurable. GDPR-compliant out of the box.

On this page

#Embed Snippet

Add the following to your page's <head>:

html
<script
  src="https://sdkwatch.com/banner.js"
  data-snippet-id="YOUR_SNIPPET_ID"
  defer
></script>

The banner script is ~8KB gzipped and loads asynchronously. It will not block page rendering.

#Configuration Options

Configure the banner via data-* attributes or via the window.SDKWatchConfig object (must be set before the script loads).

AttributeTypeDefaultDescription
data-snippet-idstringrequiredYour project's Snippet ID
data-positionstringbottomBanner position: bottom, top, modal
data-langstringenUI language: en, es, fr, de, pt
data-themestringdarkColor theme: dark, light, auto
data-accentstring#10b981Accent color (hex)
data-auto-blockbooleanfalseAuto-block non-consented scripts
data-show-powered-bybooleantrueShow 'Powered by SDKWatch'

Full configuration example

html
<script>
  window.SDKWatchConfig = {
    snippetId: "YOUR_SNIPPET_ID",
    position: "bottom",
    lang: "en",
    theme: "dark",
    accent: "#10b981",
    autoBlock: true,
    showPoweredBy: false,
    onAccept: (consent) => console.log("Accepted:", consent),
    onDecline: (consent) => console.log("Declined:", consent),
  };
</script>
<script src="https://sdkwatch.com/banner.js" defer></script>

#CSS Customization

All banner elements are namespaced under .sdkw- and can be overridden:

css
/* Banner container */
.sdkw-banner {
  border-radius: 12px;
  font-family: "Inter", sans-serif;
}

/* Accept button */
.sdkw-btn-accept {
  background: #10b981;
  border-radius: 8px;
}

/* Decline button */
.sdkw-btn-decline {
  color: #6b7280;
}

/* Category toggle */
.sdkw-toggle[data-checked="true"] {
  background: #10b981;
}

/* Banner title */
.sdkw-title {
  font-size: 1rem;
  font-weight: 600;
}

#data-sdkwatch-category

To auto-block third-party scripts until consent is given, add the data-sdkwatch-category attribute and change type to text/plain:

html
<!-- Analytics — blocked until user consents -->
<script
  type="text/plain"
  data-sdkwatch-category="analytics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"
></script>

<!-- Advertising — blocked until consent -->
<script
  type="text/plain"
  data-sdkwatch-category="advertising"
  src="https://connect.facebook.net/en_US/fbevents.js"
></script>

<!-- Functional — always allowed -->
<script
  data-sdkwatch-category="functional"
  src="/app.js"
></script>

Available categories: analytics, advertising, functional, preferences, security.

#JavaScript API

Once the banner script is loaded, window.SDKWatch exposes the following methods:

getConsent()

Returns the current consent state as an object.

javascript
const consent = window.SDKWatch.getConsent();
// → {
//   analytics: true,
//   advertising: false,
//   functional: true,
//   preferences: true,
//   security: true
// }

on(event, callback)

Subscribe to consent events. Available events: consent-given, consent-updated, banner-shown, banner-hidden.

javascript
window.SDKWatch.on("consent-given", (consent) => {
  console.log("User consented:", consent);
  // Initialize analytics, etc.
});

window.SDKWatch.on("consent-updated", (consent) => {
  // User changed preferences
});

show()

Programmatically show the consent banner (e.g. from a Privacy settings link).

javascript
document.getElementById("privacy-settings")
  .addEventListener("click", () => {
    window.SDKWatch.show();
  });

hide()

Hide the banner without recording a decision.

javascript
window.SDKWatch.hide();

#Framework Examples

Plain HTML

html
<!DOCTYPE html>
<html>
<head>
  <script>
    window.SDKWatchConfig = { snippetId: "YOUR_SNIPPET_ID" };
  </script>
  <script src="https://sdkwatch.com/banner.js" defer></script>
</head>
<body>
  <!-- your content -->
</body>
</html>

React

jsx
// components/ConsentBanner.tsx
"use client";

import { useEffect } from "react";

export function ConsentBanner({ snippetId }: { snippetId: string }) {
  useEffect(() => {
    window.SDKWatchConfig = { snippetId };
    const script = document.createElement("script");
    script.src = "https://sdkwatch.com/banner.js";
    script.defer = true;
    document.head.appendChild(script);
    return () => {
      document.head.removeChild(script);
    };
  }, [snippetId]);

  return null;
}

// Use in your app:
// <ConsentBanner snippetId="YOUR_SNIPPET_ID" />

Next.js

tsx
// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script id="sdkwatch-config" strategy="beforeInteractive">
          {`window.SDKWatchConfig = { snippetId: "YOUR_SNIPPET_ID" };`}
        </Script>
        <Script
          src="https://sdkwatch.com/banner.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue 3

javascript
// plugins/sdkwatch.js
export default {
  install(app, { snippetId }) {
    window.SDKWatchConfig = { snippetId };
    const script = document.createElement("script");
    script.src = "https://sdkwatch.com/banner.js";
    script.defer = true;
    document.head.appendChild(script);
  },
};

// main.js
import { createApp } from "vue";
import SDKWatchPlugin from "./plugins/sdkwatch";

createApp(App)
  .use(SDKWatchPlugin, { snippetId: "YOUR_SNIPPET_ID" })
  .mount("#app");
Edit this page on GitHub
← Quick StartAPI Reference →