Cookie Consent Pop Up - How to configure and trigger this?

Hi team,

I have read on the thread about fonts and GDPR compliance that the pop up system is complete, but I am unable to figure out how to how to configure the triggering of a cookie consent pop up.

I have already asked this question as a comment on the announcement about the pop up tutorial, I guess I will not get a reply there, so I made this new topic about it.

So, about the cookie consent pop up, it has no button to trigger it, it just loads on page load. Can you explain how to set that up? I did not see that mentioned in the tutorial video, all the pop up triggering seems to be happening via some element on the page.

I also would love to know how to configure the actual functionality so that the tracking scripts etc. only load once the pop up has been accepted.

In my case I load all the scripts using Google Tag Manager. The Google Tag Manager Script is loaded in two places, in the Settings > Custom Code > Head Start and also a noscript version in the Body End.

This is the second time I have posted this question, it has been 7 days since I first posted the question, 4 days since I opened this thread, and still no response.

It really is very important to a website to have a cookie pop up that actually works, I am amazed no one else has asked this, or maybe it is obvious how to set this up and I am stupid not to figure it out, in any case I really need an answer to this so I can lauch my website with a working Cookie consent pop up.

Can someone from the Divhunt team please answer this thread?

1 Like

Hey, currently we do not have any native way for this, so there’s no plugin, only way to do it is to implement some 3rd party scripts. On google I found this one:

But maybe some other members of Divhunt have something better to recommend

1 Like

I use this script to do just that; it’s a pretty simple (i.e., not so sophisticated) script.
Paste this code into Settings -> Custom Code -> Body End, the styling is subjective :wink: :

<!-- Cookie Consent HTML -->
<div id="cookie-consent-banner" style="display: none;">
	<div style="
		position: fixed;
		bottom: -3%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		z-index: 9999;
		font-family: 'Lato', arial;
		padding: 16px 32px;
		border-radius: 16px;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	<div style="
		max-width: 300px;
		margin-right: 48px;">
		<p><span style="font-size:18px;"><b>Accept Cookies</b></span><br />
		<span style="font-size:12px;">This website uses cookies to give users like yourself the best possible content and experience.</span></p>
		<button id="cookie-consent-button" style="
			margin-left: 10px;
			padding: 0px 24px;
			border-radius: 24px;
			border: none;
			background: #0C1E32;
			color: white;
			cursor: pointer;">
	<p>I Accept</p>


<!-- Cookie Consent SCRIPT -->
    document.addEventListener("DOMContentLoaded", function() {
    var consentGiven = localStorage.getItem('cookieConsentGiven');

    if (!consentGiven) {
        document.getElementById("cookie-consent-banner").style.display = "block";
    } else {

    document.getElementById("cookie-consent-button").addEventListener("click", function() {
        localStorage.setItem('cookieConsentGiven', 'true');
        document.getElementById("cookie-consent-banner").style.display = "none";

function loadGTM() {
    // Load Google Tag Manager Script
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=''+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','YOUR-GTM-ID');

Replace YOUR-GTM-ID with your actual Google Tag Manager ID and the GTM should fire after consent is selected and a local storage item is saved as “cookieConsentGiven=true”.

Remove GTM from Header and Body (if set):
Given that you’re loading GTM dynamically based on user consent, you should remove the GTM script from "Settings -> Custom Code -> Head Start" and the "noscript" version from Body End.

I check my site here, to see if I am compliant:

The styling needs to be done in code. I wish we could access the div ID and be able to style that inside the Builder instead…

@dejan @Pakic : Can we pass ID’s and Classes between the Custom Code Editor and the Builder?


Instead of adding html in code, you can create a component which is being loadeded on all pages through builder. And then on that component add ID cookie-consent-banner, and on button inside of cookie consent add id cookie-consent-button.

We will create some components in future like this and share them on elements marketplace. So you can just drag & drop it, and add JS code.


Thanks @Pakic for the info, will look into the link you shared and into how to use a component as you described.

@MixxMaster thank you so much for taking the time to share that code, I apprecate that a lot. Will test it out shortly.

@Pakic I am attempting to do what you suggested, remove the html code from the Custom Code > Body End, create a component with the styling as I desire for the cookie pop up, and added the IDs to the banner and button.

But I am not getting that cookie banner to appear. It does work when I use the code that MixxMaster provided with the html, but not when I remove the html and try to use the component. Can you advise what I have missed in order to get this to work?

Screen recording what I see on my end when I try to use component for the cookie pop up

@nextlevelbros I have the same issue. Investigating today to see if I can figure this out…

Checkout the Cookiezen lifetime deal

Much cheaper alternatives like Cookiebot etc.

1 Like

@petrbilek Thanks a lot for that suggestion, I appreciate your effort to post that here for us, but since even the lifetime deal is limited to not so many websites, I will try to get this done without spending… I would rather put that money to more Divhunt licenses hehe :wink:

@MixxMaster if you get anywhere, would appreciate an update :+1:

@Pakic Any insight you can offer us to get this working with a component?

Absolutely! Just sharing what I use. Been looking for something.

The custom solution is great once you understand deeply the code. I am not :smiley:

1 Like

@nextlevelbros Sorry, no luck. It is a bit weird… If you create the same structure in the Builder and publish the site I actually cannot see the script firing at all… I’ll keep trying…

1 Like

Good luck mate @MixxMaster, I have given up for now on getting this working, and am going on with other website stuff. I am actually hoping that the Divhunt team will enlighten us soon on how to set this up so it works with components.

1 Like

@nextlevelbros @MixxMaster

We will build native solution in couple of days :slight_smile:


Glad to hear that! Will be looking out for that when it is ready :grinning:

@nextlevelbros I gave up too :slight_smile:

I launched 2 versions of it in the Builder (in Custom Code and as a Component) and I actually got the Component to close when clicking the “Accept” button from the Custom Code instance. That tells me it seems to work from Custom Code to Builder but not the other way around…

The Component doesn’t seem to read the cookie or fire the Custom Code script when you interact with it…

Or maybe I’m just stupid :sweat_smile:

Let’s wait for the official release :+1:t3:

1 Like

@dejan = is da BOSS :fire:


@dejan If you guys can include an exit intent in the pop-up options while you are working on that, that would be great. It’s not for the cookie consent obviously, and too many pop up can be annoying, but a well used exit intent can be very useful sometimes.

1 Like


Not sure if I understand correctly? Can you please explain or provide some video/image.


Exit intent is a type of trigger to show a pop up. It fires when the mouse moves out of the active viewport of the web browser, this reasoning is that you are moving your mouse in order to navigate away from the page or to close the tab. This type of trigger is used in internet marketing, to show a last-chance offer or lead magnet before someone leaves your site. Obviously it has not effect on mobile devices since there is no mouse cursor, but for dektop it has its uses.

Here is a video showing an exit intent pop up in action on a website:

Exit Intent Pop Up Example

Since you guys are going to work on the pop up functionality, it’s a good time to consider if the Exit Intent trigger can also be added.