BytexDigital.Blazor.Components.CookieConsent

<div align="center"> This library offers a simple way to handle GDPR compliant cookie consent concerns in your Blazor WASM/Serverside app. </div> <br /> <div align="center" style="padding-top: 3rem; padding-bottom: 5rem;"> <img src=".github/resources/1.png"> <img src=".github/resources/2.png"> </div> <br />

How to install

<br />

Note

The following installation instructions have been split up depending on how you use Blazor.

• If you use .NET 8 (or higher) Blazor WebApps AND have your <Router> statically rendered (this means the router's or it's parent component rendermode is not explicitly set for example through [RenderModeWebAssembly] or [RenderModeServer]), then follow the first guide.

• If you use .NET 8 (or higher) Blazor WebApps AND have your <Router> dynamically rendered (this means the router's or it's parent component rendermode is explicitly set for example through [RenderModeWebAssembly] or [RenderModeServer]), then follow the second guide.

• If you use .NET 7 or prior, then follow the third guide.

<br /> <details> <summary> 🔧 Installation .NET 8 and higher, Blazor Web App</summary> <br>

Note

This library is compatible with dynamic Blazor WebAssembly and Server components within one Blazor Web App project. This means that the UI can be rendered in WebAssembly or Server and changes will propagate to all other interactive components regardless of whether they are running on WebAssembly or the Server. Usage of the CookieConsentService is also possible in all interactive components regardless of whether they are running on the server or in WebAssembly. Interactive means they are explicitly rendered either through Blazor Server or Blazor WebAssembly (e.g. with [RenderModeWebAssembly] or [RenderModeServer]) and NOT statically rendered Blazor components.

Install-Package BytexDigital.Blazor.Components.CookieConsent

<br />

Requirements

• Library version 1.1.0 or higher
• .NET >= 8.0
• You're using Blazor Web App and your <Router> is rendered statically without a render mode set (no RenderMode attribute set)

<br />

Configure in your project

1. Configure your App.razor

First you will have to determine which Blazor implementation should display the Cookie Consent user interface. It can either be rendered with Blazor WebAssembly or Blazor Server.

Note

If you, for example, choose to render in Blazor WebAssembly, the main CookieConsentHandler will need to be configured to render in WebAssembly.

If you're running interactive Blazor Server components in the same project too and wish to be able to interact with the library there as well, for example to perform a CookieConsentCheck, you'll need to add a CookieConsentInitializer to render on the server which will hook everything up to communicate with the client project. If you're not running Blazor Server components or do not need to interact with them there, you can omit this initializer.

The same applies the other way around if you're rendering the UI in Blazor Server and have WebAssembly components interacting with the cookie library, then the handler must be on the server and the initializer on the client.

🅰️ If you choose to render it with Blazor WebAssembly, add the following beneath your router:

<Router AppAssembly="@typeof(App).Assembly">
    ...
</Router>

<!-- Add this -->
<BytexDigital.Blazor.Components.CookieConsent.CookieConsentHandler @rendermode="@RenderMode.InteractiveWebAssembly" />

<!-- Add this additionally, if you use interactive Blazor Server components aswell and wish to interact with the library on the server too. -->
<BytexDigital.Blazor.Components.CookieConsent.CookieConsentInitializer @rendermode="@RenderMode.InteractiveServer" />

🅱️ If you choose to render it with Blazor server, add the following instead:

<Router AppAssembly="@typeof(App).Assembly">
    ...
</Router>

<!-- Add this -->
<BytexDigital.Blazor.Components.CookieConsent.CookieConsentHandler @rendermode="@RenderMode.InteractiveServer" />

<!-- Add this additionally, if you use WebAssembly components aswell and wish to interact with the library on the client too. -->
<BytexDigital.Blazor.Components.CookieConsent.CookieConsentInitializer @rendermode="@RenderMode.InteractiveWebAssembly" />

<br />

2. Add the required CSS

Add the following css include to your App.razor/Host.razor file.

<link rel="stylesheet" href="_content/BytexDigital.Blazor.Components.CookieConsent/styles.min.css" />

<br />

3. (Optional) Add the default font used

Installing the font
By default, the components use the following order of fonts

Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Inter is the font used in the screenshots. If you wish the components to use this font, import the inter font by additionally adding the following CSS link:

<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

<br />

4. Register and configure the services in your dependency container

Add the required services in your Program.cs/Startup.cs and configure cookie categories present in your application.

The library implicitly adds a necessary (value of constant CookieCategory.NecessaryCategoryIdentifier) category.

<br>

🅰️ If you're rendering the UI with Blazor WebAssembly, the call will have to be made as follows:

In the WebAssembly client project

builder.Services.AddCookieConsent(o =>
{
    // Your configuration
});

Add this additionally in the server project, if you use Blazor Server aswell and wish to interact with the library on the server.

builder.Services.AddCookieConsent(o =>
{
    // The same configuration as on the client! Best to put this lambda in a shared project to reuse to reduce duplication.
}, withUserInterface: false);

<br>

🅱️️ If you're rendering the UI with Blazor Server, the call will have to be made as follows:

In the server project

builder.Services.AddCookieConsent(o =>
{
    // Your configuration
});

Add this additionally in the client project, if you use Blazor WebAssembly aswell and wish to interact with the library on the client.

builder.Services.AddCookieConsent(o =>
{
    // The same configuration as on the server! Best to put this lambda in a shared project to reuse to reduce duplication.
}, withUserInterface: false);

<br>

Example configuration

builder.Services.AddCookieConsent(o =>
{
    o.Revision = 1;
    o.PolicyUrl = "/cookie-policy";
    
    // Call optional
    o.UseDefaultConsentPrompt(prompt =>
    {
        prompt.Position = ConsentModalPosition.BottomRight;
        prompt.Layout = ConsentModalLayout.Bar;
        prompt.SecondaryActionOpensSettings = false;
        prompt.AcceptAllButtonDisplaysFirst = false;
    });

    o.Categories.Add(new CookieCategory
    {
        TitleText = new()
        {
            ["en"] = "Google Services",
            ["de"] = "Google Dienste"
        },
        DescriptionText = new()
        {
            ["en"] = "Allows the integration and usage of Google services.",
            ["de"] = "Erlaubt die Verwendung von Google Diensten."
        },
        Identifier = "google",
        IsPreselected = true,

        Services = new()
        {
            new CookieCategoryService
            {
                Identifier = "google-maps",
                PolicyUrl = "https://policies.google.com/privacy",
                TitleText = new()
                {
                    ["en"] = "Google Maps",
                    ["de"] = "Google Maps"
                },
                ShowPolicyText = new()
                {
                    ["en"] = "Display policies",
                    ["de"] = "Richtlinien anzeigen"
                }
            },
            new CookieCategoryService
            {
                Identifier = "google-analytics",
                PolicyUrl = "https://policies.google.com/privacy",
                TitleText = new()
                {
                    ["en"] = "Google Analytics",
                    ["de"] = "Google Analytics"
                },
                ShowPolicyText = new()
                {
                    ["en"] = "Display policies",
                    ["de"] = "Richtlinien anzeigen"
                }
            }
        }
    });
});

</details> <details> <summary> 🔧 Installation .NET 8 and higher, Full WebAssembly or Full Server</summary> <br>

Install-Package BytexDigital.Blazor.Components.CookieConsent

<br />

Requirements

• .NET >= 8.0
• You're using Blazor Web App and your <Router> is dynamically rendered within a Blazor Server or WASM component (This means your <Router> is inside a component that is fulled rendered either with Blazor Server or Blazor WASM (That is the case if there is a [RenderModeWebAssembly] or [RenderModeServer] attribute on the component containing the router or if the component containing the router is rendered with a @rendermode="@RenderMode.InteractiveWebAssembly" or @rendermode="@RenderMode.InteractiveServer" attribute))

<br />

Configure in your project

1. Configure your App.razor

Add the CookieConsentHandler your App.razor, beneath the Router component, like so:

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView Ro