# Cookie Banner notification

**URL:** <https://forum.ghost.org/t/cookie-banner-notification/40782>\
**Category:** Integrations & API\
**Created:** [August 28, 2023, 8:41am UTC](https://forum.ghost.org/t/cookie-banner-notification/40782 "2023-08-28T08:41:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![IvanM](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ivanm/32/24515_2.png) [@IvanM](https://forum.ghost.org/u/IvanM)\
**Post date:** [August 28, 2023, 8:41am UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/1 "2023-08-28T08:41:43Z")

</div>

Hi there. I need some pro looking cookie notice banner for my website.  
Payed or free. Any ideas?

---

<div class="post-metadata">

**Author:** ![webshaped](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/webshaped/32/3641_2.png) [@webshaped](https://forum.ghost.org/u/webshaped)\
**Post date:** [August 29, 2023, 5:47am UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/2 "2023-08-29T05:47:37Z")

</div>

I like to use this one:

> **[GitHub - orestbida/cookieconsent: :cookie: Simple cross-browser...](https://github.com/orestbida/cookieconsent)**
>
> :cookie: Simple cross-browser cookie-consent plugin written in vanilla js - GitHub - orestbida/cookieconsent: :cookie: Simple cross-browser cookie-consent plugin written in vanilla js

---

<div class="post-metadata">

**Author:** ![AmbientArtstyles](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/ambientartstyles/32/12169_2.png) [@AmbientArtstyles](https://forum.ghost.org/u/AmbientArtstyles)\
**Post date:** [August 30, 2023, 10:00pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/3 "2023-08-30T22:00:25Z")

</div>

Replying to save easily find this comment in the future. This is really exciting - I have been searching for something like this for awhile!

Would love to hear if anyone else has got it working for their site. After a long search ([old thread here](https://forum.ghost.org/t/where-to-place-a-callback-hook-for-cookie-compliance/21722)), I went with/currently use [CookieYes](https://www.cookieyes.com/).

---

<div class="post-metadata">

**Author:** ![mynoxin](https://avatars.discourse-cdn.com/v4/letter/m/e8c25b/32.png) [@mynoxin](https://forum.ghost.org/u/mynoxin)\
**Post date:** [March 29, 2024, 2:19pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/4 "2024-03-29T14:19:38Z")

</div>

Hey!

I’d like to use the Cookie Consent too instead of CookieYes.  
But I am not a developer - so can anyone help me how to set it up?

I don’t know where to place the .js file and where to place to code in the tag.  
In Code Injection is only the footer and header available.

I am really confused and everything I already tried, didn’t work. Can anyone help?

Thanks!

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [March 29, 2024, 3:42pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/5 "2024-03-29T15:42:59Z")

</div>

I haven’t used it, but try this:

In the code injection header:  
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0/dist/cookieconsent.css">`

In the code injection footer:

```auto
<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.0.0/dist/cookieconsent.umd.js">

<script>
CookieConsent.run({
    // your config. goes here (required)
});
</script>

```

See this page for what goes in the config:

> **[Getting Started | CookieConsent](https://cookieconsent.orestbida.com/essential/getting-started.html#configuration)**
>
> Simple cross-browser cookie-consent plugin written in vanilla js

---

<div class="post-metadata">

**Author:** ![mynoxin](https://avatars.discourse-cdn.com/v4/letter/m/e8c25b/32.png) [@mynoxin](https://forum.ghost.org/u/mynoxin)\
**Post date:** [March 29, 2024, 6:36pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/6 "2024-03-29T18:36:48Z")

</div>

oh, thanks! It works!  
Only issue… it is not shown as wide as it should be. it is much thinner. how can i influence that?

 ![Bildschirmfoto 2024-03-29 um 19.36.23](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/e/7/e78c15b630af494cb9e5345efde4aac956a883a4.jpeg)

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [March 29, 2024, 6:50pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/7 "2024-03-29T18:50:20Z")

</div>

You’ll need to read the docs :)

---

<div class="post-metadata">

**Author:** ![mynoxin](https://avatars.discourse-cdn.com/v4/letter/m/e8c25b/32.png) [@mynoxin](https://forum.ghost.org/u/mynoxin)\
**Post date:** [March 29, 2024, 6:54pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/8 "2024-03-29T18:54:58Z")

</div>

That’s what I do since yesterday all the time.  
I think it’s too complicated, I should stick with another and easier plugin.  
Thank you.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [March 29, 2024, 8:58pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/9 "2024-03-29T20:58:31Z")

</div>

Looks like you just need a little css to get it to be a little wider. I’m not sure I’d start over in that situation, but you do you! :)

---

<div class="post-metadata">

**Author:** ![p0ulp3](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/p0ulp3/32/35041_2.png) [@p0ulp3](https://forum.ghost.org/u/p0ulp3)\
**Post date:** [March 24, 2025, 10:11am UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/10 "2025-03-24T10:11:17Z")

</div>

Hello,

I tried to use it but cannot succeed to get it working.  
Here is my code for the header:

```auto
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.css">

```

And the footer: (basic config provided in the site)

```auto
<script src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v3.1.0/dist/cookieconsent.umd.js">
CookieConsent.run({

    categories: {
        necessary: {
            enabled: true, // this category is enabled by default
            readOnly: true // this category cannot be disabled
        },
        analytics: {}
    },

    language: {
        default: 'en',
        translations: {
            en: {
                consentModal: {
                    title: 'We use cookies',
                    description: 'Cookie modal description',
                    acceptAllBtn: 'Accept all',
                    acceptNecessaryBtn: 'Reject all',
                    showPreferencesBtn: 'Manage Individual preferences'
                },
                preferencesModal: {
                    title: 'Manage cookie preferences',
                    acceptAllBtn: 'Accept all',
                    acceptNecessaryBtn: 'Reject all',
                    savePreferencesBtn: 'Accept current selection',
                    closeIconLabel: 'Close modal',
                    sections: [
                        {
                            title: 'Somebody said ... cookies?',
                            description: 'I want one!'
                        },
                        {
                            title: 'Strictly Necessary cookies',
                            description: 'These cookies are essential for the proper functioning of the website and cannot be disabled.',

                            //this field will generate a toggle linked to the 'necessary' category
                            linkedCategory: 'necessary'
                        },
                        {
                            title: 'Performance and Analytics',
                            description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.',
                            linkedCategory: 'analytics'
                        },
                        {
                            title: 'More information',
                            description: 'For any queries in relation to my policy on cookies and your choices, please <a href="#contact-page">contact us</a>'
                        }
                    ]
                }
            }
        }
    }
});
</script>

```

Both urls are working fine, I see the css and js files, so any idea what I am missing ? I also did the cache reload.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [March 24, 2025, 10:24am UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/11 "2025-03-24T10:24:11Z")

</div>

I’d start by checking for any error messages from the browser’s console - press f12 and then go to the console tab. Any messages in red?

---

<div class="post-metadata">

**Author:** ![p0ulp3](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/p0ulp3/32/35041_2.png) [@p0ulp3](https://forum.ghost.org/u/p0ulp3)\
**Post date:** [March 24, 2025, 11:36am UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/12 "2025-03-24T11:36:08Z")

</div>

> [@Cathy\_Sarisky](#):
>
> ’d start by checking for any error messages from the browser’s console - press f12 and then go to the console tab. Any messages in red?

Thanks for the tip, unfortunately I have some message in red but it only says:  
newsletters/:128 GET [https://www.googletagmanager.com/gtag/js?id=G-XXX](https://www.googletagmanager.com/gtag/js?id=G-XXX) net::ERR\_BLOCKED\_BY\_CLIENT  
So nothing related to this cookie.  
(I have changed the id)

I was using some google code for Google analytics and also for the property of google search console.  
The whole code is this in the header: (+ some style change)

```auto
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.css">

<meta name="google-site-verification" content="YYY" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXX');
</script>

```

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [March 24, 2025, 12:05pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/13 "2025-03-24T12:05:08Z")

</div>

Can you confirm it isn’t loading in incognito mode? Trying to distinguish between it isn’t working, and YOU don’t need a cookie consent… :)

---

<div class="post-metadata">

**Author:** ![p0ulp3](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/p0ulp3/32/35041_2.png) [@p0ulp3](https://forum.ghost.org/u/p0ulp3)\
**Post date:** [March 24, 2025, 12:22pm UTC](https://forum.ghost.org/t/cookie-banner-notification/40782/14 "2025-03-24T12:22:56Z")

</div>

It is not loading in incognito mode too. And i have no error of google tag manager also.

It’s not a big deal, if I can’t get it working, I just need it due to google analytics, but I don’t use GA4 a lot, so I could get rid of both I think.

Thanks anyway for your help !