Adding a cookie consent banner

A cookie consent banner is an essential feature for any website or portal, especially if the site uses cookies for tracking, analytics, or personalized experiences. This is important for compliance with privacy regulations like the General Data Protection Regulation (GDPR) in the European Union or California Consumer Privacy Act (CCPA) in the United States.

Here’s a step-by-step guide to adding a cookie consent banner to your Power Pages portal:

1. Understand the Legal Requirements

Before adding a cookie consent banner, ensure that you understand the privacy regulations that apply to your portal. The key requirements generally include:

Informing users about the use of cookies.
Obtaining consent before cookies are set on the user’s device (especially for non-essential cookies like analytics).
Allowing users to control cookie preferences, including opting in or out.

For the EU, the GDPR requires explicit consent, while in the U.S., privacy regulations vary by state (e.g., CCPA in California).

2. Create the Cookie Consent Banner HTML

The banner should appear at the bottom or top of the page, informing users that cookies are used and providing them with options to accept or manage preferences.

Example HTML for Cookie Banner:

<div id="cookieConsentBanner" class="cookie-consent-banner">
  <p>We use cookies to enhance your experience. By continuing to visit this site, you agree to our use of cookies. <a href="/privacy-policy" target="_blank">Learn more</a></p>
  <button id="acceptCookies" class="btn">Accept</button>
  <button id="manageCookies" class="btn">Manage Preferences</button>
</div>

Learn more: This link can direct users to a privacy policy or cookie policy explaining how cookies are used.
Accept: When clicked, this button will accept the cookies and hide the banner.
Manage Preferences: This button could open a modal or page where users can choose which cookies to enable or disable.

3. Style the Cookie Banner

Add CSS to ensure the banner is visually distinct and stays at the top or bottom of the page. It should be clear but not obstructive.

Example CSS for Styling the Cookie Banner:

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 1000;
}

.cookie-consent-banner p {
    margin: 0;
    font-size: 14px;
}

.cookie-consent-banner .btn {
    background-color: #ffbf47;
    color: #333;
    padding: 10px 20px;
    border: none;
    margin: 0 10px;
    cursor: pointer;
}

.cookie-consent-banner .btn:hover {
    background-color: #e6a700;
}

.cookie-consent-banner a {
    color: #ffbf47;
    text-decoration: none;
}

.cookie-consent-banner a:hover {
    text-decoration: underline;
}

This CSS positions the banner at the bottom of the page, uses a dark background for contrast, and ensures that the buttons are visually prominent.

4. Add JavaScript for Cookie Consent Functionality

You need JavaScript to handle the user’s interaction with the cookie banner, such as accepting cookies or managing preferences. The script can use localStorage or cookies to remember the user’s choice.

Example JavaScript:

// Check if cookies have already been accepted
if (!localStorage.getItem('cookiesAccepted')) {
    document.getElementById('cookieConsentBanner').style.display = 'block';
}

// Accept cookies
document.getElementById('acceptCookies').onclick = function() {
    localStorage.setItem('cookiesAccepted', 'true');
    document.getElementById('cookieConsentBanner').style.display = 'none';
};

// Manage preferences (optional, opens modal or page)
document.getElementById('manageCookies').onclick = function() {
    window.location.href = '/cookie-preferences'; // Link to cookie preference page
};

In this script:

The banner is displayed only if the user hasn’t accepted cookies yet (checked using localStorage).
Once the user clicks “Accept,” the banner is hidden, and their preference is saved.
If the user clicks “Manage Preferences,” it redirects them to a page where they can control their cookie settings.

5. Test Cookie Consent Functionality

After implementing the cookie consent banner, thoroughly test it:

Test cookie acceptance: Ensure the banner disappears when cookies are accepted and reappears if the user clears cookies or uses a different browser.
Test manage preferences link: Ensure that the preferences page or modal opens correctly when the “Manage Preferences” button is clicked.
Test the appearance: Check how the banner looks across different devices (desktop, tablet, mobile).

6. Provide Cookie Preferences Page

To comply with the GDPR or other privacy regulations, users should be able to manage their cookie preferences. Create a Cookie Preferences page that lets users:

Opt in or out of different categories of cookies (e.g., functional, analytical, marketing).
View more details about each category and how their data is used.

Example Cookie Preferences Page:

<h2>Cookie Preferences</h2>
<p>Select the types of cookies you’d like to allow:</p>

<form id="cookiePreferencesForm">
  <label>
    <input type="checkbox" name="analytics" id="analyticsCookies"> Analytics Cookies
  </label><br>
  
  <label>
    <input type="checkbox" name="marketing" id="marketingCookies"> Marketing Cookies
  </label><br>
  
  <label>
    <input type="checkbox" name="functional" id="functionalCookies"> Functional Cookies
  </label><br>

  <button type="submit">Save Preferences</button>
</form>

Use JavaScript to capture and save the user’s choices to localStorage or cookies.

7. Update Cookie Policy and Privacy Policy

Make sure your cookie policy and privacy policy are up-to-date and include detailed information about the types of cookies used, their purpose, and how users can manage their preferences. Ensure that these policies are easily accessible from the cookie consent banner (e.g., via the “Learn more” link).