Installation
Add the Cookient consent banner to your website with a simple HTML snippet.
Overview
Installing Cookient on your website involves adding a small JavaScript snippet to your HTML. There are two installation methods, depending on your needs:
Quick setup that loads the consent banner. Best for sites that don't need to block third-party scripts before consent.
Full GDPR compliance. Blocks analytics and marketing scripts until the user gives consent. Requires running a cookie scan first.
New to Cookient? Start with the Quickstart guide for a complete walkthrough from registration to installation.
Get Your Snippet
Each domain has a unique installation snippet with its own token. Here's how to find yours:
- Go to Domains in your dashboard
- Click on the domain you want to install the banner on
- Click the "Install Snippet" button
- Copy the code snippet from the modal
Domain Token
Your snippet contains a unique token like abc123xyz. This token identifies your domain and loads your specific banner configuration. Keep this token private – it's tied to your account.
Standard Installation
The standard installation uses an async loader that downloads and initializes the consent banner. This method is non-blocking and won't slow down your page.
<script>
(function(w,d,s,u,n,e,l){w['CookientObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments)},w[n].l=1*new Date();e=d.createElement(s);
l=d.getElementsByTagName(s)[0];e.async=1;e.src=u;l.parentNode.insertBefore(e,l)
})(window,document,'script','https://cookient.app/cdn/banner.js','cookient');
cookient('init', 'YOUR_DOMAIN_TOKEN');
</script>Script Blocking Mode
For full GDPR compliance, use the CDN-based script that blocks tracking scripts until the user gives consent. This prevents cookies from being set before the user makes a choice.
<script src="https://cookient.app/c/YOUR_DOMAIN_TOKEN.js" data-cookient-cdn></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
window.cookient && window.cookient.load();
});
</script>Requirement: Cookie Scan
Script blocking mode requires a completed cookie scan so Cookient knows which scripts to block.
Without a scan, the script won't know which third-party scripts belong to which consent category. Run a scan from the Cookie Management page before enabling blocking mode.
Script Placement
For script blocking to work correctly, the Cookient snippet must be the first script in your <head> tag.
Correct Placement Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- Cookient MUST be first -->
<script src="https://cookient.app/c/YOUR_DOMAIN_TOKEN.js" data-cookient-cdn></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
window.cookient && window.cookient.load();
});
</script>
<!-- Other scripts come AFTER Cookient -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_ID');
</script>
<!-- CSS and other head elements -->
<link rel="stylesheet" href="/styles.css">
</head>
<body>
...
</body>
</html>Common Placement Mistakes
Analytics will load and set cookies before Cookient can block them.
All scripts will have already executed by the time Cookient loads.
The blocking script must load synchronously to intercept other scripts. Note: The CDN script does not use async for this reason.
Verify Installation
After adding the snippet to your website, verify that it's working correctly.
Using the Dashboard
- Go to Domains in your dashboard
- Click on your domain
- Click "Verify Installation"
- Wait for the verification check to complete
Manual Testing
- Open your website in an incognito/private browser window
- Verify that the consent banner appears
- Make a consent choice (accept or reject)
- Check the Consent Logs page to confirm the choice was recorded
DevTools Verification
For a deeper check, use your browser's Developer Tools:
Look for requests to cookient.app. You should see the script loading and a config request to fetch your banner settings.
Check for any errors. A successful installation should show no Cookient-related errors.
After making a consent choice, check Local Storage for a cookient_consent key containing your consent preferences.
Troubleshooting
Common installation issues and how to resolve them.
Banner doesn't appear
- - Check that the snippet is added correctly to your HTML
- - Ensure the domain token matches your registered domain
- - Clear your browser cache and cookies, then reload
- - Check the browser console for JavaScript errors
- - Ensure your domain is added in the dashboard
Scripts still load before consent
- - Ensure Cookient is the FIRST script in your
<head> - - Make sure you're using the blocking mode snippet, not the standard one
- - Run a cookie scan to detect all scripts that need blocking
- - Check that the scripts are properly categorized in the Scripts tab
Token not found error
- - Ensure the domain is added in your dashboard
- - Check that you copied the full token without extra spaces
- - Ensure the domain in the token matches your website URL
CSP (Content Security Policy) errors
If your site uses Content Security Policy, add these domains to your policy:
script-src 'self' https://cookient.app; connect-src 'self' https://cookient.app;
Banner styling issues
- - Check for CSS conflicts with your site's styles
- - The banner uses high z-index values – ensure no elements have higher z-index
- - Test on different browsers and devices
- - Use the Banner Editor to customize the appearance