Skip to main content

How to Implement and Customize Cookie Consent Banner for Your Website or Funnel

Learn how to easily implement and customize a cookie consent banner to ensure compliance and enhance user experience.

Updated over 4 months ago

Ensuring compliance with data protection regulations is crucial for any business.

One of the most requested features by users is the cookie consent banner, which helps obtain user consent before collecting personal information. This guide will walk you through implementing and customizing a cookie consent banner for your website or funnel.

Benefits:

  • Compliance: Ensures your website or funnel is aligned with GDPR, CCPA, and other privacy regulations.

  • User Control: Empowers users to manage their cookie preferences.

  • Customization: Fully configurable to match your brand’s colors, fonts, and messaging.

  • Transparency: Offers clear descriptions of cookie categories and links to your privacy policy.

  • Marketing Integration: Easily categorize and manage tracking cookies, including analytics and advertising cookies.

How-to Steps:

1. Accessing the Cookie Consent Banner:

  • Navigate to the funnel or website builder interface.

  • Click on the cookie icon within the action header bar.

2. Enabling the Cookie Consent Banner:

  • Toggle the switch from the cookie consent sidebar on the right.

  • Accept the terms and conditions and click on "Agree."

3. Configure Button Actions:

  • Accept Essential: Accepts only the essential cookies needed for website functionality.

  • Accept All: Accepts all cookies, including tracking and analytics.

  • Reject: Accepts only essential cookies.

  • Cancel: Closes the popup and reopens the main banner.

  • Save Preferences: Saves the user’s selected cookie settings.

4. Customization Options:

  • General Settings:

    • Enable or disable the cookie list.

    • Choose the compliance type (Opt-In or Don’t Ask).

    • Add a message description and link to your privacy policy.

    • Customize the banner’s appearance (colors, fonts, text size).

  • Advanced Settings:

    • Set consent expiration (number of days before consent expires).

  • Choose layout styles for the banner display.

5. Managing the Cookie List:

  • Enable or disable different types of cookies.

  • Visitors can select which cookies to allow based on predefined categories.

Predefined Cookie Categories:

  • Essential: Required for basic website functionality.

  • Functional: Supports features like social media sharing and feedback collection.

  • Analytics: Tracks visitor behavior, including page views and bounce rates.

  • Performance: Helps optimize site speed and user experience.

  • Advertising: Used for targeted ads and marketing.

  • Uncategorized: Any cookies not assigned to the above categories.

Adding Cookies to Categories:

  • Cookie Key: Name of the cookie (regex patterns supported for multiple cookies).

  • Duration: How long the cookie lasts (e.g., 1 day, 30 days, 1 year).

  • Domain: The domain setting the cookie.

  • Description: Purpose of the cookie.

Using Regex Patterns:

  • You can use regex patterns to match multiple cookies, such as:

    • ga-* for all Google Analytics cookies (e.g., ga-1234, ga-3241).

    • _fbp.* for all Facebook Pixel cookies.

    • _ga.* for all Google Analytics cookies.

Scanning Your Website for Cookies:

  • Temporarily disable the Cookie Consent Banner.

  • Use a free tool like CookieServe to scan your website.

  • Review detected cookies and assign them to the correct categories.

Important: Make sure to disable the banner before scanning, as it may block non-essential cookies, preventing a complete scan.

6. Saving and Publishing:

  • Finalize your changes by saving or publishing the updated settings.

Pro Tips:

  • Detailed Customization: Make use of the advanced settings to specify essential cookies and add third-party tools that need to be whitelisted.

  • Consistent Branding: Ensure the cookie consent banner aligns with your website's overall branding for a cohesive look.

  • Policy Links: Include links to your privacy policy and cookie policy within the banner for easy access by users.

FAQs:

  1. Q: Can I customize the appearance of the Cookie Consent Banner? A: Yes, you can fully customize the banner's colors, fonts, text size, and layout to match your brand.

  2. Q: How can I manage the cookie preferences of my users? A: You can set up cookie categories (e.g., essential, analytics, advertising) and allow users to select which cookies they wish to accept.

  3. Q: What happens if a user clears their cookies? A: If a user clears their cookies, the Cookie Consent Banner will reappear, prompting them to re-select their preferences.

  4. Q: Can the Cookie Consent Banner be used for multiple websites? A: Yes, you can configure and enable the Cookie Consent Banner for each page or funnel separately.

  5. Q: Is the Cookie Consent Banner GDPR-compliant? A: Yes, the banner ensures compliance with GDPR by allowing users to manage their cookie preferences and providing clear links to your privacy policy.

Did this answer your question?