Integration Examples
Examples for integrating the Consentify widget with HTML, React, and Next.js.
Basic HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<!-- Your page content -->
<script
src="https://consentify.dev/widget.js"
data-site-id="YOUR_SITE_ID"
data-position="bottom-right"
data-theme="auto"
></script>
</body>
</html>Conditional Script Loading
Load third-party scripts only after the user consents to the relevant category:
<script
src="https://consentify.dev/widget.js"
data-site-id="YOUR_SITE_ID"
></script>
<script>
window.Consentify.onConsentChange((consent) => {
if (consent.analytics) {
const script = document.createElement('script');
script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID';
script.async = true;
document.head.appendChild(script);
}
});
</script>React / Next.js
For deeper React integration with hooks and programmatic control, see the SDK or Shadcn Registry.
Create a client component that loads the widget:
// components/ConsentWidget.tsx
'use client';
import Script from 'next/script';
export function ConsentWidget() {
return (
<Script
src="https://consentify.dev/widget.js"
data-site-id="YOUR_SITE_ID"
data-position="bottom-right"
data-theme="auto"
strategy="lazyOnload"
/>
);
}Add it to your root layout:
// app/layout.tsx
import { ConsentWidget } from '@/components/ConsentWidget';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<ConsentWidget />
</body>
</html>
);
}Manage Preferences Link
Add a link that lets users re-open the consent banner to change their preferences:
<a href="#" onclick="window.Consentify.reset(); return false;">
Manage Cookie Preferences
</a>