---
# How to Use JavaScript to Display a Custom Banner After Cookie Consent

**URL:** https://modul-r.codekraft.it/2023/10/how-to-use-javascript-to-display-a-custom-banner-after-cookie-consent/
Date: 2023-10-17
Author: Erik
Post Type: post
Summary: Introduction Obtaining user consent for processing their data is a crucial aspect of compliance with data privacy regulations, such as GDPR and CCPA. To enhance user experience, you might want to display a customizable banner on your website after the user has provided consent via a cookie banner. This article will guide you through the […]
Categories: Blog
Featured Image: https://modul-r.codekraft.it/wp-content/uploads/2023/10/5102708.jpg
---

**Introduction**

Obtaining user consent for processing their data is a crucial aspect of compliance with data privacy regulations, such as GDPR and CCPA. To enhance user experience, you might want to display a customizable banner on your website after the user has provided consent via a cookie banner. This article will guide you through the use of a JavaScript code snippet that displays a banner after the user has accepted cookie consent.

The JavaScript code for this functionality can be found in the file `checkCookieConsentAndShowPopup.js` on [GitHub](https://gist.github.com/erikyo/1bc36c90c3e751f1ea16e6178ce8d3e4). 

It's a simple and versatile solution that allows you to show a banner with configurable content once the user has given their consent.

**Getting Started**

Before we delve into the code, let's understand the purpose of this JavaScript code and its key components:

**1. `COOKIE_NAME` and `COOKIE_POPUP`**

These variables determine the names of the cookies used to check if the user has accepted cookie consent and if the banner has been displayed. You can adjust these names according to your requirements.

**2. `COOKIE_POPUP_CLASS` and `COOKIE_POPUP_LINK`**

- `COOKIE_POPUP_CLASS` is the CSS class name for the custom banner, which you can style to match your website's design.

- `COOKIE_POPUP_LINK` is the URL to which users will be redirected when they click the "Accept" button on the custom banner. You can customize this URL to suit your needs.

**3. `bannerContent` Object**

This object contains the content for your custom banner, including the title, text, and labels for the "Accept" and "Reject" buttons. You can personalize these elements to align with your website's branding and message.

**Integration**

To integrate this code into your website to display a custom banner after cookie consent, follow these steps:

- Include the `checkCookieConsentAndShowPopup.js` script in your website's HTML file.

```
`<script src="path-to-checkCookieConsentAndShowPopup.js"></script>`
```

2. Customize the variables in the JavaScript code to match your website's requirements. Adjust `COOKIE_NAME`, `COOKIE_POPUP`, `COOKIE_POPUP_CLASS`, `COOKIE_POPUP_LINK`, and the content within the `bannerContent` object.

By following these steps, you can integrate this JavaScript code into your website to display a custom banner after users have given their cookie consent. The custom banner will only appear if users haven't already provided consent. Remember to tailor the code to your specific website's needs and styling to ensure a seamless user experience and compliance with data privacy regulations.

## The code

This gist contains JavaScript code for displaying a customizable banner on a website after the user has accepted cookie consent. 

[Raw](https://gist.github.com/erikyo/1bc36c90c3e751f1ea16e6178ce8d3e4/raw/d17355effa7dfb4e714e916cd2d4ae6e7c84a787/checkCookieConsentAndShowPopup.js)

---

## Categories

- Blog

---

## Navigation

- [About WordPress](https://modul-r.codekraft.it/wp-admin/about.php)
- [Get Involved](https://modul-r.codekraft.it/wp-admin/contribute.php)
- [WordPress.org](https://wordpress.org/)
- [Documentation](https://wordpress.org/documentation/)
- [Learn WordPress](https://learn.wordpress.org/)
- [Support](https://wordpress.org/support/forums/)
- [Feedback](https://wordpress.org/support/forum/requests-and-feedback)
- [Codekraft Modul R](https://modul-r.codekraft.it/wp-admin/)
- [Plugins](https://modul-r.codekraft.it/wp-admin/plugins.php)
- [Themes](https://modul-r.codekraft.it/wp-admin/themes.php)
- [Widgets](https://modul-r.codekraft.it/wp-admin/widgets.php)
- [Menus](https://modul-r.codekraft.it/wp-admin/nav-menus.php)
- [Background](https://modul-r.codekraft.it/wp-admin/themes.php?page=custom-background)
- [Header](https://modul-r.codekraft.it/wp-admin/themes.php?page=custom-header)
- [Live](https://modul-r.codekraft.it/wp-admin/admin.php?page=wc-settings&tab=site-visibility)
- [Customize](https://modul-r.codekraft.it/wp-admin/customize.php?url=https%3A%2F%2Fmodul-r.codekraft.it%2Fproduct%2Flogo-collection%2F)
- [1414 updates available](https://modul-r.codekraft.it/wp-admin/update-core.php)
- [2,1662,166 Comments in moderation](https://modul-r.codekraft.it/wp-admin/edit-comments.php)
- [New](https://modul-r.codekraft.it/wp-admin/post-new.php)
- [Media](https://modul-r.codekraft.it/wp-admin/media-new.php)
- [Page](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=page)
- [Product](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=product)
- [Order](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=shop_order)
- [User](https://modul-r.codekraft.it/wp-admin/user-new.php)
- [Edit product](https://modul-r.codekraft.it/wp-admin/post.php?post=255&action=edit)
- [SEONo index](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_dashboard)
- [Front-end SEO inspectorPremium](https://yoa.st/admin-bar-frontend-inspector?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Semrush](https://yoa.st/admin-bar-semrush?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Wincher](https://yoa.st/admin-bar-wincher?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Google trends](https://yoa.st/admin-bar-gtrends?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Learn more SEO](https://yoa.st/admin-bar-learn-more-seo?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Improve your blog post](https://yoa.st/admin-bar-improve-blog-post?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Write better content](https://yoa.st/admin-bar-write-better?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Help](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_page_support)
- [Settings](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_page_settings)
- [Tools](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_tools)
- [Plans](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_licenses)
- [Upgrade](https://yoa.st/admin-bar-get-premium-woocommerce?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Autoptimize](https://modul-r.codekraft.it/wp-admin/options-general.php?page=autoptimize)
- [Performance](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&_wpnonce=a6493b7534)
- [Purge All Caches](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_all&_wpnonce=a6493b7534)
- [Purge Current Page](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_post&post_id=255&force=true&_wpnonce=a6493b7534)
- [Page Cache](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_pgcache&_wpnonce=a6493b7534)
- [Database](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_dbcache&_wpnonce=a6493b7534)
- [Object Cache](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_objectcache&_wpnonce=a6493b7534)
- [Feature Showcase](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_feature_showcase&_wpnonce=a6493b7534)
- [General Settings](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_general&_wpnonce=a6493b7534)
- [Manage Extensions](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_extensions&_wpnonce=a6493b7534)
- [FAQ](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_faq&_wpnonce=a6493b7534)
- [Support](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_support&_wpnonce=a6493b7534)
- [Notifications](https://wordpress.com/reader/notifications)
- [Howdy, Erik](https://modul-r.codekraft.it/wp-admin/profile.php)
- [Log Out](https://modul-r.codekraft.it/wp-login.php?action=logout&_wpnonce=bb28826117)
- [Home](https://modul-r.codekraft.it/)
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Shop](https://modul-r.codekraft.it/shop/)
- [Tag /Archive format](https://modul-r.codekraft.it/tag/post-formats/)
- [Modul R](https://wordpress.org/themes/modul-r/)
- [Modul R (git)](https://github.com/erikyo/Modul-R)
- [Modul R Child (git)](https://github.com/erikyo/Modul-R-child)
- [CF7 Antispam](https://wordpress.org/plugins/cf7-antispam/)
- [OH-MY-SVG](https://modul-r.codekraft.it/oh-my-svg/)
- [Model-Viewer WordPress block](https://modul-r.codekraft.it/model-viewer-wordpress-block/)
- [Remove Capslock](https://wordpress.org/plugins/remove-capslock)
- [Blog](https://modul-r.codekraft.it/category/random-access-memories/)
- [Codekraft](https://github.com/codekraft-studio)
- [About Me](https://modul-r.codekraft.it/erik-golinelli/)
- [Contact](https://modul-r.codekraft.it/contacts/)
- [Credits](https://modul-r.codekraft.it/credits/)

---

## Footer Links

- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Download](https://wordpress.org/themes/modul-r/)
- [Contact form 7](https://modul-r.codekraft.it/category/contact-form-7/)
- [Quick Start](https://modul-r.codekraft.it/category/quick-start/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Post Formats](https://modul-r.codekraft.it/category/post-formats/)
- [Block](https://modul-r.codekraft.it/category/block/)
- [Clothing](https://modul-r.codekraft.it/product-category/clothing/)
- [Privacy Policy](https://modul-r.codekraft.it/privacy-policy/)
- [Proudly powered by WordPress & made in Bologna with ♥ by Codekraft](https://codekraft.it/)