Our.Umbraco.CookieConsent

Our.Umbraco.CookieConsent

Easily add a configurable cookie consent banner to your Umbraco site. Features include a dashboard for customizing behavior, appearance, and translations, using the Orestbida/CookieConsent library.

Configuration

• Access the dashboard
  Navigate to the Settings tab in the Umbraco Backoffice, and then select the Cookie Consent dashboard to manage all settings related to your banner.

• Customize appearance and behavior
  Use the dashboard to configure:

  • Position of the banner on your site.
  • Categories of cookies to display.
  • Layout and styles to match your site’s design.
  • ...

• Manage translations

  • Translations for the popup text can be managed in the Translations section of Umbraco, under the key Our.Umbraco.CookieConsent.
  • The available languages for the cookie consent popup depend on the languages configured for your Umbraco site.

• Render the banner in your layout To display the cookie banner on your website, add the following line in your main layout file (_Layout.cshtml or equivalent):

  @await Component.InvokeAsync("Cookie")
  

Scripts by category

You can define custom scripts that are injected only after user consent, based on the selected cookie category (e.g. Analytics, Marketing, etc.).

To do so:

• Navigate to the "Scripts" section in the dashboard
• Add a new entry with the target category (Analytics, Marketing, etc.)
• Paste your script using safe JS, such as dynamic script injection

Important: HTML <script> tags cannot be directly used inside JavaScript blocks. Instead, use JavaScript to create and inject scripts dynamically.

Example: Google Analytics script

    var gtagScript = document.createElement('script');
    gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-CN4GDXXXXX';
    gtagScript.async = true;
    document.head.appendChild(gtagScript);

    gtagScript.onload = function () {
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        window.gtag = gtag;

        gtag('js', new Date());
        gtag('config', 'G-XXXX');
    };

This logic will only be executed if the user accepts the analytics category

Credits

This package is a simple integration of the CookieConsent library, created by Orest Bida.

Cookie icons used in this project were created by Rohim - Flaticon.

License

This project is licensed under the MIT License. See the LICENSE file for details.